epoch: from start to finish

tl;dr

I built and designed a Fitbit watch face from the ground up using JavaScript ES6 for the backend and followed Apple’s Human Interface Guidelines for the watchface UI.

the project:

Epoch is a dynamic, multifunction watch face on the Fitbit app store. It shows you the weather, your daily fitness goals, and the time — all in an intuitive, interactive interface. If you’re on your phone, click Versa or Ionic to check out Epoch on the Fitbit app store otherwise click Versa or Ionic to view it on desktop!

If you want to follow the entire implementation of the watch face from design to publication, get a cup of coffee and go through the entire post!

my process

This is the first app I’ve ever published! Needless to say, I wasn’t very familiar with the whole development process, and learned a ton of technical and project management skills along the way. This post goes through some of the learning experiences I had, plus some helpful tips if you’re working on your own Fitbit watch face.

My design workflow went something like this:

Step 1: Designing the Ionic watch face in Sketch

Step 2: Developing the Ionic watch face GUI

Step 3: Developing the Ionic watch face backend

Step 4: Designing the Versa watch face in Sketch

Step 5: Developing the Versa watch face GUI

Step 6: Developing the Versa watch face backend

Step 7: Launch

key elements of design

Design is a crucial implementation factor that deeply affects user interactions with technology. In some cases, it’s the defining detail that drives user adoption. After seeing Fitbit’s sales dramatically turn around with the release of the Versa succeeding the Ionic, I concluded that users value the design aspect a lot. The Versa, being sleek, elegant and very fashionable has shipped over one million units. Extrapolating from this we can see the best way to appeal to the most users would be by creating a feature rich yet simple in application that caters well to the audience both through functionality and aesthetics. Now with that in mind, when designing a watch face, the face should be designed with the same principles, thus complementing the watch.

ionic design

Design is something I’m passionate about and is used universally. I set out to create my vision using Sketch. It seemed like the obvious choice given that Fitbit has resources in Sketch and it is the prototyping tool they use as well. Having no prior experience using Sketch, I quickly picked up the basics with a couple of tutorials. A couple of hours later and some experimenting I came up with the design below.

My prototype wasn’t very detailed, however, it sufficed. It gave me a general guideline as to what I’m building. The biggest thing for me when prototyping was to get the placement of the graphic elements set in stone and then handle the decorative elements after.

Here I’ve only attached the Ionic design because that’s the first one I prototyped and built. However, this process had a key flaw. When designing I hadn’t taken into account the different screen sizes. I went in with the mentality that one design fits all. However, as you’ll later see the Versa has a completely different aspect ratio and porting this design onto it was unfeasible.

design principles

A user only looks at their watch for maybe a second or two and cluttering the screen with lots of information would make it difficult for the user to find what they’re looking for. I made the decision that there were 3 main things I wanted the user to be able to see with a glance: temperature, weather and how close they are to their goals (after all, it’s a fitness tracker more than a watch). This generally could be displayed in a very cluttered manner, however, with the current design implementation the arcs act with a dual-purpose. With a quick glance the user is able to identify the weather using the ring colors as well as their daily stats with the rings. With a simple tap on the weather icon the user is also able to access the current temperature. The stacked time is also large and is again easily read by the user. I chose to use familiar shapes and styles to generate a sense of user belonging.

implementing the ionic design

Before I delve into the details of coding the watch face, I wanted to comment on how well the Fitbit developer SDK is written. The SDK is really well organized and makes it really easy to find features that you want to implement. However, I felt that the depth of the guides was lacking but were easily compensated for with enough digging in the SDK.

The infrastructure of the app consisted of a front end implemented with SVG and styled with CSS. The backend functionality was implemented with JS and a companion app to access the internet. This was very conveniently done using Fitbit’s messaging feature, which does much of the heavy lifting to communicate between the device and the companion (phone).

working on the ionic ui

Working on the GUI was fairly simple… or so I thought. After prototyping the design on Sketch, I thought doing the GUI would be super simple, since I had all the pixel values. I thought it would just be easy positioning, and it was until I realized that with hardcoded pixels I wouldn’t be able to port the same code onto the Versa. In order to make a universal watch face I should’ve used percentages for sizing. Moving beyond this problem, I ran into another issue as Fitbit uses an older version of SVG I wasn’t able to assign a rounding property to the arc edges. In order to simulate rounded edges, I had to add circles at the end of the arcs that advance at the same rate as the arc bodies. While doing this I realized more flaws in my design as I had used odd numbers for the arc widths, meaning that the circle radii would have to have half pixels, which isn’t possible. Along with that, the whole circle element width was an odd integer meaning that the center of the circle was also a half pixel. This made rotating the arc heads a problem because the center of the circle was undefinable so the positioning of the heads were always skewed half pixels out of bounds. These issues resulted in a lot of front end refactoring to make the UI render flawlessly. After learning this I sought to fix these issues and make it easier on the Versa.

working on the ionic back end

Developing the back end was one of my favorite parts of development process. Reading through the SDK learning more about file transfer and communication with the companion app really helped me understand the fundamental architecture upon which Fitbit apps are built on. I didn’t really encounter any major issues when coding the backend. The backend consists of calculations of arc angles, pulling current stats from the device, fetching the temperature and rendering the GUI elements based on the information. This summed up the development of Ionic watch face which was now ready for publishing.

versa design

After completing the Ionic, I pulled up Sketch once again to prototype the Versa design. I was hoping to keep the design super similar to the Ionic just with some positioning changes. Pulling both artboards side by side, the ratio difference was significantly incompatible. This led me to redesigning parts of the watch face to fit the 1:1 ratio. This included reducing the arc sizes and introducing the date, both of which really contradicted my design principles. Although unfavorable, it was necessary in order to avoid excessive empty space of squeezing the Ionic design onto the Versa. The rest of the design followed the same principle supporting a micro interaction where tapping the weather icon renders the temperature. As well as the arcs change color based on the current weather outside. The Versa design is pictured here.

working on the versa ui

After initially making the mistakes with the Ionic, I now had a chance to fix it with the Versa watch face. I’d use percentages instead of pixels. Having the experience making the Ionic greatly sped up the process of coding the Versa. I could copy paste most of my code and just reposition everything with percentages this time. That was until I came to rounding the arc edges once again. Using some simple math, we see that the Versa is 300x300px which means 1% is 3px, which is unfortunately an odd number. Thankfully this time I didn’t make the mistake of having an odd width arc but rather the whole circle was an odd width. This yielded the half pixel problem yet again for the translation of the arc heads. After fixing that issue, everything else was smooth sailing.

working on the ionic backend

Implementing the back end was super simple since I had already really done it. I had written very modular code the first time around so I could simply copy and paste it into the Versa backend. There was still one feature that I wanted to add in however, which was animating the arcs on screen wake. I was able to reproduce this using requestAnimationFrame() which incremented the arcs in an animation like fashion until it reached the desired goal. This can be seen below.

Unfortunately, after testing this out on the device itself it was super laggy and took away from the user experience, therefore had to be scrapped from the production watch face.

ready for launch and google analytics

Now that both watch faces were done I was ready for launch! I looked up some details and was disappointed at the fact that Fitbit doesn’t provide the developer with the number of downloads. I found this key in being able to assess how your watch face performs in the community and provides feedback for future development. In order to track the number of downloads I used a organic Google Analytics method. Since, Fitbit also doesn’t provider the developer with unique device id’s, I used the Fitbit SDK and their Crypto API to generate a secret key that I stored locally in the device. This method essentially reproduced the concept of a unique id. I then post this ID to my Google Analytics app allowing me to see when a new user downloads my watch face.

launch and summary

After finally implementing the last feature I submitted the watch face for review and it’s now been published on the Fitbit App Store. If you own a Fitbit, feel free to try them out using the links below. If you have any feedback doesn’t hesitate to contact me. I’m still learning and would love to hear what you have to say.

Ionic: https://gam.fitbit.com/gallery/clock/77d667c5-d753-4050-9680-6a2554c3e9e0

Versa: https://gam.fitbit.com/gallery/clock/2b69a8df-eddf-4562-8a9b-5b720767612c