Gauge Geometry: a watch face design

Designing an information-rich yet elegant e-paper watch face that takes inspiration from classic watches

Roles

Design
Coding

Pebble is a smartwatch with an always-on paper-like display. Its open development platform has enabled the community to create a huge library of custom watch faces. After getting a Pebble Round, I was finally able to achieve my dream of creating my own watch design.

In this personal project, I explored elegant solutions for visualising information in the small space of a watch. I was able to take advantage of Pebble’s unique display to create a design that looks physical but would not be achievable with traditional mechanical watches.

Several Pebble Round watches, each with a different face on its circular screen — Pebble Round’s hardware and default watch faces. *From Pebble’s press materials*

App store listings of various watch faces, from traditional analogue and digital faces to more esoteric designs with additional information or decorative elements — Pebble Round’s hardware and default watch faces. *From Pebble’s press materials*

Methods

Design direction

I wanted a design with the simplicity of a dress watch so that it could go well with a variety of attires. I also wanted to include additional information besides time via subtle complications made possible by the digital display.

I have always preferred dual analogue-digital watches, since I like the benefits of both visualisations of time. In analogue clocks, the arrangement of hours and minutes along a circular timeline helps visualise the length between two points in time. On the other hand, digital clocks are great for their easy-to-read display of the precise time.

Several watches with simple faces, mostly containing just the clock dial and hands — Dress watches tend to have simple designs and limited complications

Fitting information on a small screen

The watch has a small 180×180 px display, so it was important to prioritise key information in order to minimise visual clutter. I found the following to be the most important to have on hand at all times:

Time: the most important element. This must be legible at a quick glance, ideally without having to adjust the angle of your wrist.
Day/date: this is also frequently referenced throughout the day, but is not as time sensitive
Temperature: current and high/low of the day
Battery level: Pebbles do not need to be charged every day, so it is useful to see when a charge is needed

Pebble’s display suffers from poor contrast when viewed at more oblique angles, making it hard to read smaller numbers. To ensure legibility of the time in those more extreme conditions, I decided to make the hour and minute as large as possible and embrace it as the core design element.

Watch viewed from an extreme angle, with the display elements at a lower contrast — In the final design, the time is legible at a glance even from oblique viewing angles. The day/date and min/max/current temperatures are also subtly shown.

Watch face showing the time prominently in both analogue and digital format, the date in a smaller font, and a gauge along the circumference — In the final design, the time is legible at a glance even from oblique viewing angles. The day/date and min/max/current temperatures are also subtly shown.

While traditional digital watches are limited to showing time via seven-segment displays, Pebble’s dot matrix display makes it possible to use beautiful, meticulously designed typefaces. To echo the shape of the Pebble Round, I chose a geometric typeface with circular letter forms.

Building with a large engraving of its address number — Century Gothic is a geometric typeface that combines near-perfect circular forms with interesting details that stand up to scrutiny at large sizes, making it a popular choice for display signage.

Window display showing discount rates in a large font — Century Gothic is a geometric typeface that combines near-perfect circular forms with interesting details that stand up to scrutiny at large sizes, making it a popular choice for display signage.

Diver-style watches commonly include the date of the month as the only complication. On mechanical watches, every element adds more physical moving parts, creating more edges and visual clutter. However, with a digital display I was able to additionally include the month and day of week cleanly in the same small space.

One unique feature of this watch face design is the readout of temperatures subtly integrated into the clock dial. I simply mapped degrees to the minute marks on the clock dial, such that a marker at the 20-minute position would indicate 20˚C. Since daily temperatures do not typically fluctuate more than 60˚C (in populated areas), this provided more than enough space to work as a temperature gauge.

Diagram of a temperature gauge in Celsius and the corresponding readout values — The temperature gauge configuration in the companion phone app doubles as instructions for reading in Celsius and Fahrenheit modes

Diagram of the temperature gauge with values in Fahrenheit — The temperature gauge configuration in the companion phone app doubles as instructions for reading in Celsius and Fahrenheit modes

Similarly, the battery level can be encoded in the form of a gauge along the perimeter of the watch face. By overloading the clock dial with both a temperature and battery scale, I was able to display both of these tertiary information graphically, without introducing too much visual clutter.

While the watch is plugged in, the battery level markers fill up to indicate charging. Also shown at the beginning of the video is the watch face initialisation animation.

Development & iterative design

Code for the watch face was written in C. As this was my first time developing on Pebble, much of the design process involved tinkering with the code as I got to know the framework and its limitations. The watch’s lower-density e-paper display renders designs very differently from typical light-emitting displays, so it was important to test on the actual device.

To avoid waiting for compilation with every tweak, I implemented a debugging tool to adjust sizes and colours from the phone. This saved a lot of time between rounds of testing, making it possible to iteratively fine-tune the design for optimal legibility from different angles.

This watch face configuration feature laid the foundations for a highly customisable design. The debugging tool was eventually tweaked with preset themes and sensible parameters, turning it into a configuration screen that allows users to easily customise the watch face to suit their preferences and outfits.

Controls for changing the colours of various elements of the watch face and the shape of the watch hands — Configuration screen allows users to effortlessly select a preset theme or create their own designs

The design in different colour schemes — Configuration screen allows users to effortlessly select a preset theme or create their own designs

Results

This started as a watch face for personal use. Eventually, I published it to the community to positive reviews.

If you have a Pebble, you can install Gauge Geometry from the Rebble app store.

Watch face in rose and green colour scheme — Different themes in action

Watch face with numbers in black, and hands in red and blue — Different themes in action