GoKawiilI recently got a Pebble Time 2 as it seemed like a fun smartwatch away from Google/Apple/Samsung with a good 4 weeks of battery life. One thing I wanted to do is to create a custom watchface for my specific problems.
It took more effort to design the watch than I had anticipated and there’s a deceptively large amount of thought that has gone into some of the features here, so I thought it’d be interesting to write a little about it.
I don’t get 30 days of battery life with the watch; in practice it’s closer to ~2 weeks, with heart rate monitoring disabled.
Issues I want the watch to help me with It’s difficult to describe what I’ve been going through the last ~6 months. It started with a normal depression (yeah, a “normal depression” says a lot already) but it was followed by what felt like a big increase in volume; manageable issues I’ve had forever were suddenly overpowering. I’ve always found it difficult to start chores and boring tasks, yet now it felt like trying to swim through quicksand. At the same time I had huge problems with hyper focus. I could start working on something and the entire day would just disappear; I would sit in front of the computer for 8 hours without any break, interrupted by having to go get my kids from school and I realize that my bladder is exploding and I hadn’t eaten lunch yet. Then I would spend the rest of the day thinking about it, even having difficulty falling asleep because I’m still thinking about it. Needless to say, my time management has gone out the window, even missing appointments for the first time ever. Of course, a watchface won’t solve any of these but I’m desperate and nothing I’m trying is helping. Concretely I’d like the watch to help me with these things: Give an overview of today’s calendar. Getting started with tasks. Alerts to break hyper focus. I was going to name the watchface “ADHD hero” but that was a little on the nose as I don’t have an ADHD diagnosis (yet… The investigation is under way but it’s not a quick process). It’s common for people to claim they have ADHD, like the cool kids. The issues I’m having are quite severe and it’s not something “cool to have”. A watchface only for me I like open source but I don’t have any plans of publishing the watchface. The entire point of the watchface is to remove friction in my life, not create another source of anxiety. This way I’m free to change it, rewrite it, pollute it with vibes, and I can focus on making it just good enough for me without having to worry about others. I encourage you to steal anything you like and create your own watchface; it’s straightforward with Pebble.
Prototyping with Claude I’m a big believer in being able to quickly iterate through different prototypes. I’ve had success with using Claude to generate HTML prototypes and it can spit out images like this: 31/10 Design-wise it’s hit-and-miss and Claude seems to lack creativity and taste (but sometimes it comes up with great ideas). You need to guide it properly and I’ve gotten good usage from telling it to generate dozens of variations of a concept and iterating from there. All images in this post are generated in this way at various points of the development. It can also quickly generate interactive prototypes, like this embedded widget that simulates (almost) the entire watchface and its features: Start task Bluetooth Sleep Todoist Events around rim 4 Steps Battery OK Low Critical A simulation of the watchface, generated by Claude. This is super useful and I’ve used it to fine tune the wedge geometry, color scheme, a chiptune library, and more. These are rough prototypes and they serve to give a direction, not to be a perfect representation of the end result. The interactive widget above for example has a bunch of rendering artifacts that don’t exist in the real watchface.
Finding a style The design of the watchface started before I had the watch and before I wrote a line of code. Initially the feel was very different; it was a cleaner, more uniform, design without as much clutter and everything followed a consistent design language. I just knew that it was perfect. The original watchface. Tracking tasks. When the watch arrived I built it and it sucked. It was so boring… I saw the Comic Drop watchface and its comic book panel layout is really interesting. Wouldn’t it be cool to have a similar comic book panel layout that would show the events during the day? Maybe they could be dynamic and move around during the day? A comic book panel subdivision. It would be really neat to have some pixel graphics of a computer during the morning when I should work, a picture of a barbell when I should exercise, etc. Unfortunately that’s beyond my skill level at the moment so I had to give up that idea. So I went back to the original design but iterated on a “comic book” style with thicker lines, brighter colors, and more irregularities: 2 31/10 The new comic book style, with elements I’ll discuss later. This is a more interesting watchface and it looks much better on the wrist than the first iteration. Not perfect of course but it catches my interest, which is the point.
Calendar overview I want to be able to glance at the watch to see my calendar. Watchfaces such as the Sectograph add event information inside the clock (so an event between 1 and 2 would colorize the section of the analog clock) and I wanted something similar. Here are some prototypes to give you an idea of what I’m talking about: Single event in the day. Four events the next 6 hours. Fully loaded day. This should hopefully make it easier for me to be able to plan my day a little better. Pebble already has built-in notifications for events that work well. This is purely for me to visualize the day. A notable omission in my design is the lack of a text description of the event. That’s nice but it also clutters the design I’m going for. The important thing for me isn’t what the event is, it’s “is there an event at all”. Non-uniformity My brain is very good at filtering away static and uninteresting information. For example, I’ve tried to have Calendar, Habitica, and Todoist widgets on my phone to help me keep track of my events/habits/tasks… But it didn’t take long for my brain to start completely ignoring them despite them taking up 80% of the screen. When I say ignore I mean that literally: I completely stopped noticing them. So what I wanted to try was to spice it up a little by randomizing the event geometry. See these two examples: Uniform events. Non-uniform events. To me the non-uniform prototype is more visually interesting and the changing geometry should hopefully prevent me from filtering them out. The goal is to give a general overview of the day, not to display a precise calendar. I tried to have each event size correspond to the event length but I abandoned that for more randomization. To make generation simpler (and to save on battery) I snap events into 15-minute intervals. I’m not sure yet if this is a good call but so far it’s fine. You can argue that the rounder uniform version would look better on the Pebble Round 2, which is fair. Here’s a similar mockup but with the round’s geometry: Uniform events on the Round 2. Non-uniform events on the Round 2. I still think the non-uniform variant catches the eye more and solves my specific problem a bit better but there’s no denying that a round layout on a round watch fits very well. Moving towards 12 o’clock Another idea I had was instead of statically fixing events to their times I wanted the events to move towards “now” at 12 o’clock. So an event that renders at 3 o’clock is 3 hours away and an event that overlaps 12 is ongoing. While this prevents me from easily looking back at my day (past events disappear) it makes it easier to feel the urgency as events draw closer. A bit weird perhaps but in practice it feels great. Here’s the same event through its lifecycle: drifting in from 3 o’clock, ongoing as it crosses 12 (with the countdown band draining in the clock), then gone once it’s in the past. Something like this: Event is a few hours away. Event is ongoing. Event is in the past and has disappeared. Completion countdown This works pretty well but there’s a problem: how to differentiate between an event that will start in one minute and that has been going on for a while? Because the event gets cut off at 12 there’s no way to tell at a glance. At first I tried to enlarge the event wedge so it touches the clock if it’s ongoing. That was a bit weird so instead I tried to colorize the clock outline with the event that’s ongoing. Then I realized, why not have the outline count down the remaining time of the event, similar to a Time Timer? The countdown band draining as the event completes. In practice this works out wonderfully well. I had dozens of prototypes for line weights, fill direction, the clock itself, etc but I won’t bore you with them. I tell myself that real design should appear to be effortless.
Work timer I quite like the completion countdown for calendar events. This kind of design is often associated with tracking tasks (such as in Pomodoro) so why not add it to the watch too? For example, I might want to configure a stretch of 60 min work / 15 min break / 60 min work before I should stop working. Pretty standard stuff. As I’m struggling to get started I’ll add a twist: a working block should have a 5-minute warm-up period. So the timeline looks like this: warmup work break warmup work 60 min 15 min 60 min I chose to include the 5 minute warm-up into the work length, so they’re both 60 minutes long instead of 65 minutes. I think it makes sense to have that one count down (from filled to empty) while the working block counts up (from empty to filled), like so: Task 5-min warm-up followed by two 1 hour rounds, with a 15-min break between. Starting/stopping timers on a Pebble watchface This is a post about design, not about implementation, but I still need to address how we can implement a work timer toggle. The issue is that a Pebble watchface is a background process that cannot interact with Pebble’s physical buttons. You can bind the buttons to quick launch Pebble apps but not watchfaces. A watchface can detect steps and taps on the watch but it cannot communicate with other apps. There’s a few ways to get around this: Toggle using taps only. Implement it as a Pebble app, not a watchface. Add a new Pebble app (tied to a button) that round trips commands via the companion app back to the watchface. press toggle toggle Quick launch button Pebble app Companion app on phone Watchface I first tried to implement toggling using taps but it was too unreliable. If I went the app route I’d have to relaunch it all the time, which represents unacceptable friction. What’s left is the janky phone round trip solution. I already need a companion app for the calendar sync but it still makes me queasy. Crap like this is why I don’t feel like publishing the watch. *shudder*
Clearing alarms and forcing breaks I’ve tried alarms, Pomodoro, and similar before but they all share the same failure mode: I simply ignore the alarm and continue with what I was doing. A Pomodoro can’t be interrupted; it marks 25 minutes of pure work. Francesco Cirillo, The Pomodoro Technique I don’t know, it could be 2 minutes just as likely as 200 minutes. So I figured I’ll try to force myself to take breaks by making it annoying to clear (a bit like the Hand Grenade Alarm clock but in wrist form). The watchface can vibrate, play sound, react to steps, and detect taps and this is the flow I came up with: An alarm fires when I should stop working I first need to walk +20 steps before I can clear it When that’s done I can dismiss it by tapping on the watch a bunch of times The alarm transforms the screen and vibrates and plays a tune until it’s dismissed (repeats every 30 seconds). I had to silence it during calendar events to not mess up meetings too much. Visually the required steps are drawn at the border (no events are shown during an alarm) and the alarm is drawn as a comic-style blast (tapping it shrinks the blast). Like this: Dismissing the end of day alarm. How well does it actually work? It’s a pretty cool setup and it is helping but it still fails quite often. Most of the time I forget to start the work timer and other times I’m able to add enough steps by waving my hand around like a crazy person, and then continue working. (If I raise the step count then it gets annoying to dismiss when I’m actually walking.) Could be tuned better I suppose. Other types of alarms PAUSE Time for a break STOP Stop working EOD End of day ALARM Manual alarm Visually there are some distinct alarms I use: Pause (signals the start of a short break between two working blocks)
Stop (signals the end of all working blocks)
... continue reading