Better Feature Redesign

Better Therapeutics (BT) is a mobile medical app using behavioral therapy and plant-based nutrition to reverse chronic conditions such as type 2 diabetes. I redesigned the interface for logging daily health behaviors (referred to as Check Ins).

CONTRIBUTIONS

• Interaction design

• Usability testing

• Visual design

• Prototyping

• Project management

Design Problem

The Check In feature was designed to meet the following objectives:

1. Increase awareness of participants’ behaviors and health through self monitoring.

2. Collect participants’ daily health data to personalize their treatment plan.

3. Measure outcomes/success of treatment.

The old version of Check Ins required participants to log data via a chatbot called Cassie. While initially this was interesting and novel for participants, it quickly became a cumbersome and tedious experience.

Goal: Redesign the Check In experience to make it faster and easier for participants to log daily information about their health.

Process

01. DISCOVERY

The discovery process involved collecting feedback and data on the old experience from three main sources: our customer care specialist, past user interviews and analytics.

My favorite part of this process involved looking at analytics on how participants used (and didn’t use) the old UI.

I combined my learnings from all sources to understand the problems and gaps in the old experience.

There were six general problem areas:

1. Not quick and easy - Participants are frustrated with having to wait for the chatbot to finish her script before they can log another data point.

2. Not discoverable - Participants have a hard time figuring out where in the app to log daily values and how to log via the chatbot.

3. Lack of personalization - Participants are asked to log values that aren’t relevant to them (such as blood glucose for people who do not have diabetes).

4. Lack of flexibility - No ability to log data for previous days, which makes participants feel like they have failed if they can’t get credit for days they forgot to log.

5. Mismatched workflow - Participants tend to track/measure certain values early in the day (weight, blood pressure, blood glucose) and others later in the day (plant-based meals and exercise). We ask them to check in on all of these things at the end of the day.

6. Incongruent UI patterns - When logging data in Cassie, the keyboard doesn’t have a decimal on the number so users can’t add a more precise weight.

02. DESIGN

Because Check Ins is centered around data collection, I first wanted to understand the full set of data requirements and how it would be used in the product.

I asked the product and health team to provide the following information:

1. What type of data do we need to collect from users?

2. What is the exact input/format we need to collect for each data type (e.g. whole number, decimal)?

3. What are the constraints of this data (e.g any limits on what can be entered)?

4. How often do we need to collect this data?

5. How will the user input this data (e.g. manually, connected device)?

6. How will we use this data?

Once we defined these data requirements, I could explore different layouts and controls for inputting each data type.

The general design process for this project involved experience mapping, sketching and multiple iterations informed by internal testing and tests on User Testing.

03. TESTING

We tested the new UI a number of times throughout the design process both internally and on User Testing.

The tests were designed to assess if the new UI:

• Was easy to find and access when needed.

• Was clear about what type of data participants needed to log and when.

• Enabled participants to log data more quickly than the old UI.

• Provided participants with intuitive controls for logging data.

• Aligned with participants’ workflows (what data they wanted to log and when).

04. FINAL ITERATION

The new Check In UI was launched on the Better Therapeutics app in October 2018.

(old UI on the left, new UI on the right)

Key Challenges

1. Limited and inaccessible design system.

   • The color palette used inaccessible color combinations. This caused downstream issues such as having to significantly increase the font size to improve legibility, which resulted in reduced screen real estate.

   • The functionality needed for this feature was very different from anything else in the app and so working with a fixed design system limited solutions for the new UI.

2. Limited prototype functionality for usability testing. I did not have a fully functional prototype to allow users to sufficiently test the data input controls, which was an important measure to assess how well the new UI performed. I tested with a lower functionality prototype on InVision.