ScanWatch is the latest addition to Withings’s smartwatches. It was announced at CES 2020 and it is the successor of Steel HR, Withings’s most sold product and one of the best smartwatch in the market. Following Withings’ medical orientation, ScanWatch would add more medical features than any other smartwatch in the market allowing you to track sleep apnea, record an ECG or take a blood oxygenation level measurement (SpO2) right on your wrist.
The task to lead the design for both the embedded UI and the app’s features was a real challenge: What is like to design for a hardware product in 2020 where all other smartwatches are just getting bigger and better screens? How to educate users on the importance of new medical metrics such as SpO2?
After almost a year of research, tests and iterations, ScanWatch is out for the public in Europe and will soon be in the US.
Smart watches are like any other objects. This means they are subject to all the rules of good design, starting with Dieter Rams’
10 rules for good design.
My work on this project focused on two major points: the hardware interactions and the look & feel of the interface.
The first thing that I worked on was to rethink the general navigation. Steel HR used to have only one button on the right to do everything : from navigating between menus to select things it was the only way to navigate. It also featured a small and not very bright screen. We had a lot of feedbacks from our users telling us it was hard to read at times or to understand what they were doing on the watch.
With ScanWatch embedding more complex features, it became clear both the information structure and the look and feel of the watch needed to be reworked from the ground up, improving what worked and rethinking what did not.
The hardware was already defined when I started the project: ScanWatch would introduce a new wheel to navigate more easily between sections of the watch. The screen would also be bigger, brighter and with a better resolution. The hardware improvements were here, now was time for some interface improvements.
One of the core idea at Withings that I tried to follow during the whole process was that people should be able to use the main features of our watch without a smartphone. It’s not because ScanWatch is a connected product that people will always want to interact with it using a smartphone! Not being able to interact directly with an object leads to frustrations and the product is eventually abandoned. No one want this.
Below is a Steel HR and some screens associated. Notice how close from each others the different screens are and the use of very small elements in the interface:
By wearing ScanWatch on your wrist, the information is meant to be read at a ~50cm distance but using the watch in different circumstances is also something to take into account: you don’t read things the same way whether you’re working out, dancing or chilling at home.
ScanWatch’s screen is a mono color OLED screen with a 120 x 80 squared pixels definition and a high frame rate.
One of the major constraint I had to take into account before starting the design phase was that the screen has no grey levels (only black and white), so there is no Anti-Aliasing possible.
I also had to take into account the fact that the screen is a rectangle: it’s embedded in a circle so that just a part of it is actually usable.Below is a very early prototype I could use to test different layouts, gauge the screen estate available and compare it with the previous watch.
Given the hardware specification, I had 3 interactions possible with ScanWatch: Scroll with the wheel, a single press and a long press.
We had learned with Steel HR that it is hard for our users to learn new patterns and new interactions so I needed to keep it as simple as possible. The goal was to make the best use of the interaction vocabulary available to create an easy to use and easy to learn interface: Every action on the watch should have an expected outcome.
In the meantime, I mapped the content users would need to access and the actions that could be performed based on Steel HR model:
1. Step counting, distance, floors climbed, calory burned during the day, sleep score
2. Start/end an ECG
3. Start/end a Blood Oxygenation Levels measurement
4. Make a Heart rate measurement
5. Events like: low battery, step goal achieved, heart condition detected
6. System things like time, reset, pairing…
The first few ideas that I had regarding the navigation was to give the crown some dimensionality, allowing you to scrub through layers of the UI. Unfortunately, due to the technical limitations of the screen it was hard to implement.
Reflecting this, I tested 2 different navigation patterns. I wanted to confirm my assumptions that the wheel was indeed useful and well understood to our users.
→ The first navigation pattern would be similar to the navigation on Steel HR where a short click would be the main element:
Short press : Navigation
Long Press : Selection
→ The second navigation pattern would be where the scroll and the wheel are the main elements to navigate:
Scroll: Navigation
Short press: Selection
I tested my assumptions with employees at Withings, asking them to do a specific task with the prototype. People reacted better to the second navigation pattern, being more comfortable navigating it. They would naturally scrub the wheel and find what they needed and click to select things. The goal with this navigation is for the user to create a mental model of his carousel, so he can remember it and access quickly the screen he might need.
The general navigation pattern on the watch was understood and clear but one of the major remaining issue was legibility: we had a bigger and brighter screen, how can I smartly use it to actually help our users monitor their health?
Typography is essential to convey the right message, especially in such a reduced space. Steel HR used to use a 1px thick typeface which, given the screen size was not sufficient to have enough lisibility. After interviewing some users, I tried to grasp what was important to them on a screen and what was not. I asked them to rank the information on screen from the most important thing to the least.
→ Their metrics and what screen is displayed to the user at a given time appeared to be the most important information.
I started to build different templates that would fit our existing screens while improving them with what I had learned. I tried to see how much information we could get on screen, how it would fit given the screen estate.
I asked myself: should we have 1, 2 or 3 lines on the same screen? What is enough information and what is too much information?
Here is an exemple of the working prototype that was used to define the spacing rules, with a side by side comparison with Steel HR :
1
The first template should be used to display information like step counting, elevation, distance, floors climbed and calory burned during the day. The value in those screens resides in the metric they provide to the user.
That’s why it uses the large font (LF) to display the data first, an icon at the top to have a visual indicator as to which screen is displayed and a subtitle with secondary information to help understand the data.
2
The second template should be used for notifications and alerts. It features the Medium Font (MF) that was created to ensure a perfect legibility with long texts and no matter what you’re doing.
3
The third template was created for menus: given the hierarchy of the watch, not everything could be included in the main carousel. I had to categorize items based on their importance, their value for the user and the way they work. An ECG or SpO2 measurement for exemple needs an action from the user to start the measurement. For this template I chose to give the icon the most important place with the Small Font (SF) below as an indication.
These templates helped to build 3 typefaces specifically designed for ScanWatch with readability in mind. Both the templates and the typefaces were created together to make sure everything was on point. These typefaces were created over the course of one month, by iterating on what already existed, keeping the look and feel of previous products while making it unique. Simplicity is the key to the different typeface’s appearance. The resulting raw build gives it both personality and the necessary sturdiness to perform at this scale.
Using a smartwatch should be fun. You should expect everything and interactions have a huge role to play if played at the right time with the right timing. One key takeway that I gathered during the tests of the prototype was that people would not understand nor interact with ScanWatch when they were faced with an actionnable screen.
As a huge part of the UI is built around folders and actionnable screens, I had to come up with something that would help users understand if something is clickable or not. I put in place an indicator to help with that: I wanted to test what would trigger an action from the user.
Due to the refresh rate of the screen, users would sometime have to wait for the animation to finish before they could interact with their watch again. Animations should be an addon to the screen, like the cherry on a cake, not something that creates frustration.
Users would also not really understand what was going on: they had just clicked on their watch and they were left with a long animation. I needed something more obvious and fast forward. That’s how the indicator came up: it bounces to the side of the screen indicating an action and is round like the crown. This propal being the most successful during the tests, I decided to go with this one.
Here are some of the interactions that were implemented in ScanWatch:
My work on this project would not be complete if I hadn’t planned about the future of ScanWatch’s features. How do I measure the success of the product? Even though I tested a large number of things, you can’t always test and predict everything so it’s important to track whether or not things are understood and used like I planned.
That’s why I created a spreadsheet to mutualize everything that should be tested and tracked with the launch of ScanWatch. It’s a very simple spreadsheet where everyone can participate, add a doubt they might have and how to remove the said-doubt.
ScanWatch is the most complex and advanced medical wearable Withings has ever done. It was a first for me to work on this kind of hardware/software integration, where interactions are so prevalent. Without proper methodology, it would have been hard to come up with such a unique experience. My key learning while working on ScanWatch is the importance of working directly on the hardware you are designing for, with your users.
Each of those elements allowed making key decisions on the product (Validate an architecture or optimize the look & feel for the hardware for exemple) to make the most out of the device’s components and its characteristics.
