Designing the perfect Amazfit Bip watch face

4 min readJan 4, 2019

Smart watches experienced a revival in 2018 as Apple and Google updated their watch OS. While Google and Apple smart watches continue to be an expensive splurge for the average consumer, Xiaomi (the Chinese manufacturer) has been making remarkable smart watches at unbelievably low prices for some time now.

One of Xiaomi’s 2018 success stories is the Amazfit Bip smart watch. It’s inexpensive ($79.99), has a battery life of 45 days and the software experience is quite good. One of the key features of the smart watch is that it lets you customize the look of the home screen, using a watch face (essentially a “theme”.)

The Problem

There’s a vibrant community of individuals developing Amazfit Bip watch faces but the best watch faces available are copies of popular designs from the likes of Apple and Nike. Therefore, I decided to take on the challenge to design a watch face that’s novel and tailored for the Amazfit Bip.

The Goal

Although the Amazfit Bip is an inexpensive smart watch, I didn’t want it to feel or seem “limited” in capabilities. People should be able to identify that I am wearing a high-quality smart watch that has lots of useful, utilitarian and practical functions.

The Challenge

As stated, the goal is to highlight the Amazfit Bip’s true capabilities and make it more premium and desirable, rather than an inexpensive entry-level watch.

The key challenge is that the Amazfit Bip has an e-ink display which only supports monochrome and can only display a select few colours. Expensive Apple & Android watches tend to have AMOLED screens which have no restrictions whatsoever.

The Design

Logic behind the design:

Initially I had placed the battery, bluetooth and alarm indicator at the bottom and the date, time and weather info at the very top which are the primary functions of a watch and my most basic needs. Then, I realized that we don’t always look at the corners of watches — rather at the watch as a whole and focus on the biggest elements. Therefore, I moved the battery, bluetooth and alarm indicators to the top and placed the date, time and weather to a more centered position.
Using the F-pattern (the natural reading pattern), I get date and time (together) and the weather. Date and time is the most traditional function of a watch — and I chose to keep weather because I don’t actively track it and often end up in the rain without an umbrella.
The icons beneath the clock highlight the health tracking features of the watch which are really the noteworthy features of this smart watch. I am not much of a runner but counting steps and calories is a neat statistic to have to measure physical activity. What interests me more is my heart rate which really tells me how well I am handling my obesity, the condition of my heart and overall fitness. Therefore, I separated the heart rate from the steps and calorie counters. The separation helps me easily discern heart rate from the rest and it also creates visual intrigue. The text beneath the icons may not always be there when no statistic is available and the design would still look complete.
The use of white space, color, different font sizes help create contextual contrast in an elegant manner. There’s just enough detail in the design to earn the user’s attention, while not being too cluttered such that it compromises usability.

I had created other versions before this — but scrapped them as this new design emerged.

Pictured on the left is the original (default) watch face that comes with the Amazfit Bip. On the right is the proposed new design. The black version is the best choice (among the variations I designed) because it blends in with the bezels around the watch.

If you liked this design and want me to convert it into an actual watch face that you can download an install on your Amazfit Bip, then please leave a comment and let me know. Don’t forget to share this article to keep me encouraged and motivated.

Alternatively, you can create this watch face yourself using a free online tool: https://v1ack.github.io/watchfaceEditor/