How I made a top 5 watch face for Pebble

With the demise of Pebble, it’s time to pay homage to their awesome products by sharing how I created one of the top 5 analog watch faces for their smart watch platform.

Right hand watch depicting my watch face for their third Kickstarter

It started in November of 2014 when I got my first Pebble Classic. I had already settled on getting a Pebble in late October based on its good reviews, but I patiently waited till Black Friday in hopes of a better deal and was rewarded with a $20 discount.

Before the smart watch, I had always worn analog watches and had been more accustomed to reading analog dials than digital numbers. Pebble only had one default analog watch face to choose from and it lacked many features, so I was eager to find an alternative.

There were many third party watch faces to choose from in the App Store and I found Łukasz Zalewski’s collection of analog watch faces particularly attractive.

Watch face by Łukasz Zalewski looking good under good lighting conditions on a Pebble Classic

However, I felt their readability under dim lighting conditions to be subpar, which was an important deal for me. This was due to Pebble’s transflective LCD screen which worked on the principle of reflecting light to produce light.

The numbers and clock hands were too thin and faded into the background under dim lighting. I needed the hour hands to be thicker to be more visible.

I wanted something I could read out of the corner of my eye even when the watch was out of focus.
Under dim lighting some watch faces simply become hard to read. Photo by TimeSmooth of a Pebble Time.

The Watchface Generator

I was quick to find the Watchface Generator website by Paul Rode, which allowed me to create a custom watch face of my own with just a few clicks.

My guiding principles were that the minute hand should stretch to the edge of the screen (for maximum visibility), the hour hand should be more than half, but no more than three quarters of the length of the minute hand and the segment markers should be long and run in from the edge of the screen, yet not cover the hour hand.

Unfortunately the generator didn’t allow the minute hands to overlap the segment markers. The longer I wanted the minute hands, the less space remained to place the segment markers. Thankfully, the generator allowed uploading a custom background so my workaround was to draw custom segment markers on a background. And because it was a graphic, I could also add numbers for the quarter hours which made it more readable.

I used long segment markers that pointed towards the center to draw the eyes in the right direction when viewed at an angle.

I was also able to fine tune the pixels of the slanted lines and round numbers to make them appear less jagged. Thus formed my first custom watch face.

I uploaded it to the App Store in December of 2014 and even created a banner showing off its readability.

My first watch face called “Readable” on a Pebble Classic

Before it’s retirement, it garnered a total of 17 hearts and 274 installs.

While the watch face was usable, there were other visual deficiencies that could not be fixed using the generator.

One thing that bugged me was the design of the watch hands. The generator had a choice of rectangular hands, rectangular hands with a pointed tip, and pointed hands with a fat base.

Hand options from Paul Rode’s Watchface Generator

When the hands are viewed under dimmer lighting and when viewed at an angle, they become a blurred blob which makes it harder to read.

Hand appearance when out of focus and in dim lighting

The real culprit was the center axis where the hour and minute hands overlap. I wanted the hands to tapper to a thinner profile as it approached the center axis to minimize the overlap, but I didn’t want the whole hand to be thin because the thinner it was, the more difficult it would be to read.

If I wanted to solve this, I would have to write my own watch face. I began researching the Pebble APIs and reading their tutorials.

From Scratch

I had an idea of a pill shaped clock hand with a thin twig that connected it to the axis. It would solve the 2 main problems. The pill shape could be as wide as necessary to be readable and the thin twigs allowed the hour and minute hands to be visually separated when viewed out of focus. The pill shape also provided a tip for precision pointing, without needing a sharp point.

A quickly glanceable differentiation of the hour hand from the minute hand was also important, so I decided on a pill shaped hole on the hour hand.

Thus formed my first custom watch face design, which I uploaded to the App Store on February 6, 2015.

Full screen rectangular design, and the round design that came 5 days later

The full screen rectangular design came first with the round design following 5 days later created for the sake of completeness.

While the design was simple, its implementation was far from it.

The Pebble API at the time was unpolished and didn’t provide a way to draw rounded pill shapes. The only rounded objects it could draw were circles. It did have a rudimentary vector API for drawing arbitrary shapes with straight edges, but it couldn’t draw rounded lines.

To achieve the pill shape, I sketched it out on a bitmap screen and then mapped it to points on a grid. The hour hand could be drawn with 16 points, the minute hand took 12 points and the hole within the hour hand took 8 points. The hour hand took more points because it was slightly wider than the minute hand. The twig connecting it to the axis was just a 1 pixel wide straight line drawn separately.

Because the pill hands weren’t true rounded shapes, the clock hands were not always smooth and for certain times of the day it was extra jagged. But at an arm’s distance it was good enough.

Everything else was just a static image I mocked up in a graphics editor and loaded as a background image.

To this day, the round version has garnered 191 hearts and 2,922 installs, while the rectangular version has garnered 60 hearts and 753 installs.

At the time I was using the CloudPebble IDE for development (a tool created by Katherine Berry), which was a portable and user friendly app and even had its own rendering window.

CloudPebble IDE

Pebble Time

Pebble’s second iteration of their smart watch was the Pebble Time, which shipped with a color screen and an enhanced API. I was quick to jump on the bandwagon and started porting my watch face to the new color screen.

While my watch face could already run fine on the new watch with minor changes to the code, some new APIs allowed me to greatly simplify my code. Drawing the pill shape was now inbuilt to the API. It could be achieved by simply drawing a line with a width of 3 pixels or more. The ends of the lines were automatically rounded and they looked better than my rotated vectors. The color screen also allowed Pebble to introduce anti-aliasing which was also inbuilt to the API.

(Left) Early firmware only supported vector shapes, so the hour hand was more jagged. (Center) Later firmware had better drawing APIs, so the hour hand was rounder and smoother. (Right) Later firmware with anti-aliasing turned on.

Porting to the new API allowed me to dump a lot vector paths. The segment markers were now lines and not background images. I also took the time to introduce animations for the first time, since it was easier with the new API. I even moved the date into the circle to look more like traditional watches and made the date dynamically shift up or down, so as not to be blocked by the clock hands.

Startup animation on a Pebble Time. Video by Joseph Mearman

Since the new API didn’t work on the Pebble Classic watches, I released the updated watch face as a new face, so that older Pebble Classics could still run the old watch face. I released the round version first since it was easier to port and I liked the round version more on the Pebble Time, because the new metallic frame no longer made the bezel feel empty.

Thus formed the animated, colorful, and anti-aliased version of this watch face, which I uploaded to the App Store on May 13, 2015.

Photo by WorkInProg-reddit of a Pebble Time

There are 2 indicators not shown in this photo.

The Bluetooth indicator is located just below the center axis that only shows up when the connection is lost. It is in a prominent location because it usually means you left your phone behind and you need to go back and get it. When the connection is lost, my watch face also gives off a double vibration, which is deliberately distinctive from the notification vibration (single vibration).

The battery indicator is located in the top right corner that only shows up when the battery falls under 30%.

On May 16, I got an email from a Pebble employee asking if it was okay to use my watch face for the Pebble Time launch. Obviously, I agreed.
Ranked 4 of the top 5 in the Analog Picks category. Screenshot taken March 16.

Around this time my watch face got featured in the Analog Picks category of the App Store, which helped boost my downloads. To this day it has garnered over 2,235 hearts and 75,796 installs.

It is currently number 27 in the Most Loved Watch Faces category and number 4 in the Analog Picks category.

Through the encouragement of seeing the open community using my watch face, I added more features that I felt others would benefit from.

I changed the default typeface (Gothic) used to display the date to a custom typeface (Raavi), which is wider and more legible when viewed from a distance.

(Top row) Default system typeface, (Bottom row) Custom typeface for improved legibility

I also added hourly vibration, which was a popular feature that people looked for, and improved on it by having a unique vibration pattern for each hour and gave it a 10 second delay to avoid overlapping with vibrations from calendar reminders.

The hourly vibration pattern follows Roman numbers to express the hour. For example, a short vibration (120 ms) stands for “I” meaning 1 o’clock, while a long vibration (320 ms) stands for “V” meaning 5 o’clock. Therefore, 4 o’clock is represented by “IV” which is expressed as a 120 ms vibration, followed by a 100 ms delay, followed by a 320 ms vibration. 10 o’clock is represented by “X” which is really just “V+V”.

I added a feature to allow the quarterly segment markers to be colored differently from the hourly segment markers, so that more colorful themes were possible.

Ronny Carr, the creator of the popular Travel app on Pebble, mentioned that he liked that my icons were small. This at a time when other people were using enormous icons that just cluttered their designs.

Wearing the Pebble Time was a delight. It was more ergonomic than the Pebble Classic with its curved back and its compact profile allowed it to tuck neatly under the cuffs of my sleeve.

Slow motion eye candy slowed to 80 times

Pebble Time Round

Photo by makoto_kw of the Pebble Time Round

Pebble’s third iteration of their smart watch was the Pebble Time Round and boy was it made for analog watch faces. Porting to the Round didn’t require code re-writes, but it did require re-evaluating certain constants used within the face, because the dimensions were now larger (180 x 180px) and the battery indicator, which previously lived in the corner of the rectangular screen, now had to be relocated.

When I finally got hold of a Pebble Time Round, I needed to re-tweak the UI after realizing some new physical constraints.

Photo from the PDR 2015 slide show showing the bezel gap

The Pebble documentation had already warned about leaving 2 pixels off the perimeter which would be covered by the raised bezel, but I had to increase the buffer some more after realizing that viewing the watch at extreme angles would cause even more of the screen to be obstructed due to the raised bezel. And when the bezel visually touched any of the segment markers, it made it look misaligned.

While playing around with the aesthetics, I decided the minute hand no longer needed to cover all the segment markers and allowed a little of the marker to be visible to add detail and complexity to the watch. It would still remain covered on the rectangular watch faces, which had a smaller screen.

Pebble Classic (left), Pebble Time (center), Pebble Time Round (right)

Around this time I was using an app by Matthew Hungerford that turned on the backlight when my arm was lifted up and the watch screen was pointing upwards. This beat the “flick wrist for backlight” feature that Pebble already had. Unfortunately, it only worked if it was running as a background app and Pebble only allowed a maximum of 1 background app. Another popular background app at the time was Misfit for step tracking and because it was also a background app, I would have to choose between the 2 of them.

I decided to include the code from Matthew Hungerford into my watch face, so that I could free up the background app slot. It’s turned off by default to save power and users can turn it on in the settings page.

Pebble also updated their latest firmware to run on Pebble Classics, which was a great engineering feat considering its lower hardware specs. I added support for Pebble Classic to my watch face, which didn’t require much code change, which goes to show what a tremendous job the Pebble engineers had done. I didn’t merge it with my old watch face code (which was listed separately), so that people who were still running old firmware could still have access to my old watch face.

Spottings

On July 17, 2015 while Pebble was tweeting about their new timeline feature, they showed someone wearing my watch face!

Screenshot of Pebble’s twitter account

CNET wrote a review of the Pebble Time Round on November 5, 2015 and featured my watch face in one of their photos. Thanks to Igor Traskovetskyi for pointing this out.

CNET’s review of the Pebble Time Round

Wired also featured my watch face in their November 5, 2015 review of the Pebble Time Round.

Wired review of the Pebble Time Round

Wearable featured my watch face in their November 18, 2015 review of the Pebble Time Round. They showed it on both the Round and on the Pebble Time Steel.

Wearable review of the Pebble Time Round

But nothing compared to seeing the CEO of Pebble wearing my watch face on stage at the Web Summit in Dublin.

A photo of Eric’s sexy hands at the Web Summit was featured on the CNET website on November 4, 2015.

Right hand side is showing my watch face on Pebble’s third Kickstarter

The Pebble Time Round was even lighter than the Pebble Time and the thinner profile felt even better. But because it was no longer waterproof, I eventually went back to wearing the Pebble Time.

According to stats from October 2016, my watch face had around 3,300 users with the most being Pebble Time (basalt) followed by Pebble Time Round (chalk) and the last being Pebble Classic (aplite). I had a spike in Pebble Time Round users on October 4 when my watch face got listed in the Optimized for 4.0 category. I still have no idea what “unknown” is in the graph.

Stats from October 2016

While my watch face wasn’t particularly clever or artsy, I’m glad plenty of people enjoyed it for what it was.

Fitness and firmware 4.0

With Pebble’s stronger push to a fitness direction, I pondered how I could add fitness aspects to my watch face.

I briefly made a fork of the watch face to add a step progress bar around the outside of the segment markers. Downloads were low on the App Store, so I pulled it.

I didn’t want to just add numbers to it and wanted something that fit in with the design of the watch face.

Quiet Time, Bluetooth connection lost and battery icons are shown

Meanwhile, I continued to add features as they came up. The latest firmware allowed watch faces to detect Quiet Time status, so I added a quiet time indicator to the left of the center axis. This was an important feature as users sometimes accidentally turn on Quiet Time without knowing and miss out on receiving lots of notifications.

I also added an option for the Bluetooth connection vibration to be silent when Quiet Time was on, which is during bedtime or when the user is in a meeting.

Timeline Peek on the Pebble Steel

Pebble’s 4.0 firmware also introduced Timeline Peek, which allowed upcoming calendar events to appear on the watch face as a bar across the bottom. Some developers decided to shrink their interface to accommodate this, which seemed natural for circular designs. However, I felt that it sacrificed readability when shrunk, so I opt to shift the circle up and allow a bit of the dial to be covered up.

I also got around to supporting Pebble’s Clay library (by Keegan Lillo), that allowed the settings page to work offline. (Previously my settings page was hosted on Github pages.) It required a full rewrite as the previous settings page was written in HTML and JavaScript, while the new settings page was written in the Clay markup language. It resulted in 55% less code.

(Left) the old settings page written in HTML and JavaScript; (Right) the new settings page defined using JSON

Pebble Time 2 (code name Emery)

I updated my watch face to run on Emery and Jon Barlow was kind enough to provide test photos of it running on actual hardware. The new screen was larger (220 x 228px) and the resolution increased from 182 to 202 PPI meaning I had to increase the width of all lines if I wanted it to look at least similar to before.

My watch face running on a Pebble Time 2 testing unit taken by Jon Barlow

Of course, the product failed to come to fruition, but if you own a Pebble Time 2 prototype, the watch face runs on it, albeit without my fine tuning.

Goodbye

When Pebble announced they were folding and selling most of their assets to Fitbit, it was a heartfelt goodbye.

It was good that they were able to keep their servers up even after they shut down, while I pushed out a few more bug fixes. Kudos to Fitbit for getting an excellent OS with good iOS/Android integration.

Looking back, creating for Pebble was fun and allowed me to experiment with many different watch faces.

In no particular order are these watch faces: Motherboard, Aluminium, Fourier, Tilt Wheel, Da Hood, Tailpiece, Buzz Me, Instruments and Willie
Buzz Me got featured in the rotating banners section of the App Store

One of my watch faces, Buzz Me, even got featured in the rotating banners section. It was a watch face that showed a QR code that passer-bys could discreetly scan and send anonymous messages right to your watch.

Nowadays, I wear a Pebble 2 + HR while it’s still working. There just isn’t a competitively priced smart watch with as many features and such an inviting form factor as the Pebble on the market. Eric certainly had the right vision for Pebble.

Although Eric Migicovsky promised to buy anyone wearing a Pebble a beer if he ran into them, it’s time we shared the favor. It was fun and rewarding while it lasted as we made our mark on wearables history with #makeawesomehappen.

Have any questions or feedback? Leave it in the comments box below.

If any Pebblers happen to pass by Hong Kong (or neighboring Shenzhen), drop me a DM and we can have some tea!

Photo by MrJspeed showing the Pebble Classic, Pebble Time Steel, Pebble Time Round and Pebble 2