Redesigning the home screen to showcase data we already had

Problem statement

We already had charts for steps, sleep and exercise, but they were buried in the app and very few people were viewing them. Meanwhile, the home screen was bombarding patients with a bunch of data that wasn’t very useful.

How could we make the existing healthy behavior data more visible and engaging?

What was so bad about the original home screen?

UX audit

• It showed a bunch of data that was confusing and overwhelming to patients. Most people don’t know how to interpret Body Water or Visceral Fat measurements.

• It was missing the data  we wanted patients to focus on (steps, sleep, and exercise)

• People had to explore the hamburger menu to find out that the steps, sleep, and exercise screens even existed

It overwhelmed people with unimportant information and hid the important information in the hamburger menu.

What do people want on a weight loss app home screen?

User interviews

I already knew we wanted to showcase healthy behavior data for scientific reasons, but I wanted to make sure we didn’t miss other things that people wanted to see.

In a series of interviews with people who had used weight loss apps in the past, I found that all of them wanted to see their weight loss progress front and center. This wasn’t surprising. People also were interested in seeing food tracking information, but the app didn’t support food tracking and adding a big feature like that was not a possibility for this project.

To meet expectations, the new home screen would also need to show weight loss progress.

What design elements could I use?

Constraints

The main constraint of this redesign was only using elements we already had, so I took stock.

For weight, we had the most recent weight and a line chart of weight progress.

For steps, sleep, and exercise we had today’s total, a progress bar for today, and a bar chart showing the last 7 days.

My redesign would include only existing elements, but reimagined for use on the home screen.

UX goals for the new home screen

Information architecture

1. Patients should be able to tell at a glance how they were doing with their weight, steps, sleep, and exercise. ➡️️ Include a version of the progress charts right on the home screen

2. Those who wanted to delve deeper should be able to access the dedicated screens for these charts without opening the hamburger menu. ️➡️️ Put the charts in tappable cards that would open each chart’s dedicated screen.

To let people see how they were doing and easily delve deeper, I decided to put the charts right on the home screen and make them tappable cards.

How did my designs perform with real people?

Usability testing

I created 2 versions of my best design and made them into high-fidelity prototypes. I tested them with 6 people who had similar characteristics to our patients.

I tested how quickly they understood the information on the screen and how easily they could get to the dedicated screen for each card. I also asked them which version they preferred.

The design with the progress rings performed better.

Getting this thing built

Developer handover

I made a file for the developers that had the new home screen designs along with detailed notes about the interactions. I included different versions of the screen to show how it would look in different scenarios, such as when there is no data.

I met with the developers and QA engineer to review the handover file and answer any questions they had. I also answered any questions they had as they were working on it, and I reviewed the finished product before we launched it.

I gave the developers a file with all the screens and detailed notes, and checked their work before launch.

It looks pretty, but was it effective?

Measuring impact

After the new home screen launched, I checked our analytics to see whether more people were viewing the detail screens for healthy behaviors, and whether they were viewing those screens more frequently. For comparison, I checked a 1-month period before the new home screen launched and a 1-month period after it launched.

So... were more people viewing the detail screens for weight, steps, sleep, and exercise? Yes! Out of everyone using the app, the percentage of people viewing their behavior details at least once increased by 300% after the redesign.

And what about individual people? Was each person visiting these screens more often? Again, yes! On average, each person viewed their behavior details 400% more often after the redesign.

Conclusion? This redesign was very effective.

With the new home screen, 3x more people viewed their charts and each person viewed their charts 4x more often.

What did I learn, and what would I do differently next time?

Reflections

You can do a lot with the data and features you already have.

We didn’t need new features or new data to increase people’s engagement with their weight loss behaviors - we just needed to show them more prominently.

More is not better. More is often overwhelming.

The original home screen drowned people in useless data. If you want people to pay attention to something, you have to get rid of the distractions surrounding it.

I needed a better documentation style for the development notes.

Interestingly, several questions the developers had for me while building the new screen were things that were already covered in the handover notes. I was glad to give them clarification, but wondered what was going wrong. Either the developers were not paying attention to the documentation or something about my notes made it easy to miss details.

If people are making mistakes, usually it signals an opportunity to improve the design. So I thought about ways I could improve my notes to be easier for developers to digest. The notes I had given them were long lists of bullet points below each screen, which was probably overwhelming and causing them to miss details. I decided to try putting comments on each part of the screen for next time.

The visual design for the weight chart could still improve.

The weight chart itself had a pretty short vertical space to work with. This made it difficult to see whether the line was moving significantly or staying flat. I would like to find a way to give the weight chart more space so the trend was easier to see.