Designing a personal Pebble watchface ★

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.

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:

To me the non-uniform prototype is more visually interesting and the changing geometry should hopefully prevent me from filtering them out.

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:

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:

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?

In practice this works out wonderfully well.

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:

1. Toggle using taps only.

2. Implement it as a Pebble app, not a watchface.

3. Add a new Pebble app (tied to a button) that round trips commands via the companion app back to the 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.

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

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)
• End of day (working day completely over)
• Manual alarm (just a normal fire-once alarm without dismissal)

I’ve separated them visually and they each use unique vibrations and tunes.

Date and week number

Here are some prototypes for dates that I liked but ultimately discarded:

The difficulty is to not crowd the watchface too much with the date and the other elements I’ll get to later. In the end I ended up with a simple 31/10 label and a small weekly text without background as I don’t look at the week number that often:

I’m not completely sold on the week number display (yellow labels were a lot more fun) but it’s good enough I guess.

Step counter

It was really difficult for me to find a step counter design I liked. Everything I tried just felt off. Here are three of my attempts:

I used to track steps at the edges for most of the design (you can see the step elements in many of the prototype images in this post) but in the end it introduced a bit too much clutter for my taste. While the other two attempts above are crude and could be polished more I didn’t see potential in them. (Examining and cutting away branches is important during design I think.)

And then the revelation: I don’t care about the exact step count. The only purpose of showing steps is to help me keep the step count up, so I’m not sitting in front of the computer all day, and having badges for tiers solves that problem even better.

Here are the badges I use:

Bronze is achieved at 33% of my daily goal, silver at 66%, gold at 100%, and diamond is for over-achieving with 150%. I feel that having an easy to reach tier helps me do something on the lazy days and the hard-to-reach tier helps give me an extra kick the days I’m out and about.

Yes, not knowing exactly how much is left to the next tier is slightly annoying, but for those cases opening up the Health app on the watch to view the step count is good enough.

Battery states

High after the rush of figuring out how to display steps let’s use the same approach for battery warnings:

Yes, I probably should make the little battery interactive or something but this is a 80:20 situation: I get 80% of the benefit from 20% of the effort. It’s good enough.

Bluetooth & Sleep / DND

More badges!

Pebble has a “Quiet Time” mode that silences notifications. This is a separate thing from Android’s sleep mode or do-not-disturb mode. As I have a companion app I can detect the Android state and the watchface combines the two (and silences task alarms for instance) while also showing a “sleep” bubble so I can see these invisible states.

The next task

I’m a big fan of some of the ideas of Getting Things Done such as the idea of the “next task”: the one actionable thing that you should do next.

I’ve used the Todoist Android widget on my phone to display my tasks but I wanted to incorporate it into my watch too. The idea is to only display the next task, something like this:

While I think all three prototypes above are visually pleasing I went with the wider display that takes up less vertical space:

As a bonus I don’t have to mess around with rendering angled text.

Completing/rescheduling the task

It works fairly well but there’s a wrinkle: when I’ve done the task or realize I can’t do it now I have to pull up my phone and that’s annoying so in practice I’m leaving a stale task alone forever, priming my brain to ignore it.

I’ve tried the Todoist Mini app on the Pebble but there’s so many clicks to find the task and complete or reschedule it.

What I did was add it to the app I’m already using to toggle the work timer and give it a menu of options:

I can still toggle the work timer, complete the next task, or reschedule the task (it’s rescheduled for tomorrow).

I’ve bound it to the UP button via “quick launch”. To keep toggling the work timer as simple as possible pressing UP again toggles the timer (so double clicking UP when the watchface is visible toggles the timer). Otherwise it uses the standard Pebble control scheme (UP/DOWN to select and SEL to execute) and the app closes and returns to the watch when an item is selected.

So far it’s been working really well but as has always been the case before with these productivity “fixes”; I always tire of them eventually.

Edge markers

As a little extra I added some markers to track other types of things along the edges:

The colored dots for calendar events are genuinely useful as many events require some preparation/travel time. In these cases I add a reminder for the event at, say, 15 minutes before. With the dots this preparation time can now also be seen by glancing at the watch (Pebble natively shows reminder alerts anyway.)

The end of day marker is also useful for when I’m planning my working day but sunrise / sunset is mostly a gimmick, and I don’t use the manual alarms .