2020 - Withings

Health Mate

Some Context

Beside working on embedded experiences for our products, I also work on Health Mate, Withings’s companion app.

This is the place where all your data is located, giving you insights on your health, trends and diagnosis for medical features.
Health Mate gives you more information and more context on the data your devices provide.
It encompasses all 12 Withings’ devices and with the brand new Health Coach, you can get help understanding your metrics: it gives you insights and pushes specific content by correlating different type of data your devices provide.

We want people to understand their data, how their habits can influence their metrics and how they can take action.

Redesigning Heart Rate Views

The heart rate view in the app is crucial: it is used by millions to track their heart’s health.
It deals with your heart which can be stressful for some. You have to be carefull at what you say and how you say it: you do not need to stress healthy users and on the other hand you need to inform users that they might be sick or vulnerable.

What the Heart Rate views looked like before the redesign. 
It’s simple but informational.

At the begininng of the project I was wondering: the current view might not be the best but it works as you can quickly see how your day went. But I decided to dig deeper and went for some internal tests. I would show people the current view with different settings and ask questions like:

Do you think you are in good shape right now? What are the different zones? Do you understand them? Do you know how to take action on these metrics? How do you interpret the graph?
Do you think you’ll be sick if you go too high? Are you able to compare yourself with other people of your age and know what’s good and what’s not?


The result were quite impressive: it was clear that people would understand what was presented to them. They would just not find any value in it: it was more informational to them rather than really useful.

Some early explorations I did to understand what users needed in a graph.
Exploring new ideas

I knew I had to work on the value we bring to the user. What is the purpose of this page if it displays the same information as on the device you wear everyday? Health Mate should be the place where your data is put in context and where you can see trends so you know your body better.

I started an exploration phase where I tried many different styles and layout. Some were very different compared to what we had but I wanted to test them. Below is an exploration I did trying to replace the main graph.

The goal of this graph is to represent every measurement that happened during the day. The main problem that we had was that it happened to be cut very often (depending on how you wear your tracker, automatic measurements can fail, resulting in nothing being displayed to the user). Another idea behind this graph was that the concept of HR range was little to no understood.

When you take a HR measurement, your heart can beat at different rhythms. It will go from 65 to 95 bpm during the minute of the measurement for exemple. The graph is drawned by taking the average HR but we display the whole range behind the graph. This is something that users had trouble understanding. They were wondering what it would mean if the main curve would represent their HR.

I also had to make sure it would work in a lot of different use cases: the graph can look completely different whether you have a day full of measurement or if you only have one measurement. I wanted to explore new ways for the user to understand this idea of « range » while keeping the simplicity of the current one.


Another concept that I tried to develop during this phase was that HR only matters when put in context: your heart can beat at 180BPM, it’s only becoming a problem if you’re resting.
It’s also better to understand global trends as you may have different recommendations based on your age or your condition. It’s important to be able to compare yourself to the rest of your population.

I wanted to give you a quick visual indicator first and the main value side by side. Overall, I wanted you to have a better idea of your heart’s health.

These categories were worked with doctors to make sure they were on point medically but also comparable and understood by all:

Confronting your ideas with the real world

Each category is here to help you understand how your heart reacted to the different events that might have happened during your day and help you know how normal things are compared to people similar to you in age and condition.
There has been a huge amount of work with doctors to create these categories, so that the diagnosis you see on the card is dynamic based on your age and what’s recommanded for you.

→ Context is key: We allow you to compare yourself with others in time. We also help you know if your results are considered normal or not.

High and Low Heart Rate alerts is another feature that was suggested by our doctors: when you’re resting, your heart rate should be between 50 and 100 bpm.
Above or below that range might indicate a problem. We already had this information, we were just not making anything out of it. I thought it could be interesting to add it here and even receive alerts when you’re out of the range: it helps you understand when things are getting suspicious and take action.

I had a bunch of ideas that I needed to confront to the real world and users. I needed to be quick on this one so I chose to go with Maze to test a prototype I had made. My assumptions were quickly challenged, and I discovered flaws in the graph that could’ve proven disastrous had it gone into production: the different graphs I tested were not understood at all! 

Users would tell me they had a hard time reading it and understanding their data. This was a regression compared to version they were using in production. I decided to stick with the current graph following this session, it might not be perfect but it remains understood by everyone and that’s what matters here.

Despite the first graph misunderstanding, the different cards were very well understood and people liked them. They liked how information was displayed: they could know instantly what was good and what was not during their day.

Another fear that I had was that by showing more information to users, they would stress more regarding their heart’s health: if we give them a constant diagnosis, they might be more tempted to check it every now and then to make sure everything’s fine. I was proven wrong by the different tests as people would find this kind of information important rather than really fearful.
This was our psychologist’s opinion as well: when there is something wrong, it’s better to tell the user what is happening rather than not say anything.

More flaws were ironed out and soon the different screens were remade, re-prototyped and tested on another Maze prototype with real clients.

Button Text
Withings - 2020
Scan
Watch
Button Text
2019
Lifesum