Redesigning The Mango Health App

Introduction

Note: This redesign was done for KPCB’s 2017 Design Fellows application.

Redesign a feature of a KPCB company’s product.

Simple yet provocative, this prompt immediately fired up my internal creative gears as I sifted through KPCB’s impressive portfolio. I imagined daring interfaces for tech unicorns such as Uber and AirBnB and visual overhauls for social networks like Pinterest and NextDoor, but I eventually settled on Mango Health, an app that helps people manage their medications and stick to healthier habits.

To me, this pick represents something familiar — some close family and friends rely on similar apps — but not obvious, and more importantly is a service whose users I could positively impact through a carefully crafted redesign.

As a plus, I found its interface well overdue for a polish and I was in a cleaning mood.

Step 1: What’s the Problem?

When I redesign an existing service, I first and foremost look for real, human-facing problems instead of focusing on creating a Dribbble-y visual masterpiece that may not add tangible value.

In this vein, the first thing I did while I testing out Mango Health’s app was ask a few close friends and family to download it too and send me a short report on their experience. I always do this to ensure that I’m not stuck in a bubble of my own perspectives and instead learn what real people think.

After reading these reports and trying the app extensively myself, I compiled a list of the most important problems, categorized either as human or design issues. Here they are:

People Problems:

  • Unclear visual hierarchy — “What should I be looking at first? What is important to me?”
  • Actions are not always obvious — “Can I tap on this? How do I say I’ve taken a medication?”
  • Scope is undefined — “What can this app actually do?”

Design Problems:

  • Cluttered interface — confusing mix of font sizes and cases, repeated images, outdated icons, and un-clearable cards.
  • Unformatted information — confusing use of “Inbox” tab for general information about different medications, unformatted descriptions, unclear hierarchy.
A few examples of the cluttered, unintuitive screens of Mango Health’s app.

Even after only a few minutes interacting with this app, everyone I asked to download it reported some degree of usability problems. My goal was to make the app more intuitive, simple, and useful for its diverse groups of users.

Step 2: Who’s the Audience?

Since my design philosophy begins with people problems, I decided to ask my “test subjects” the following questions to better understand how to shape and prioritize my redesign:

“What are the top 3 things you want to see when you first open the app?”
  • A glanceable medication schedule — “Which pills should I take now? At dinner? How many of each, and what do they look like again?”
  • Medication-specific notes — “Do I pair this pill with dinner? Should I avoid alcohol? When does my prescription end?”
  • Smart notifications with helpful reminders such as “Time to take your X (2 pills) and Y (1 pill)!” with quick actions like “Mark as taken” or “Remind me in 15 minutes.”
“What are the top 3 things you want to do in the app?”
  • Mark medications as taken
  • Set/change reminders
  • Learn more about specific medications

With these priorities defined, I wanted to make sure that how I approached the solutions would be in line with who actually uses the app. Thus, I created three personas to fit the different demographics I believe are the most represented to refer to during the design process. I won’t delve into the details in this article, but they were:

  • Student Sally, an artistic 16-year-old high school student who is still getting used to the idea of taking regular medication.
  • Mother Jane, a young working parent who enjoys getting reminders on the go.
  • Grandpa Joe, a retired doctor who sometimes forgets which pills to take and when.

Step 3: Explore Solutions

Whiteboarding

If you’ve ever reached a solution to a design problem without using a whiteboard, are you truly a designer? At least to me, there’s something about its forgiving surface — a swish of the finger and you start afresh — makes it indispensable to brainstorm and conceptualize ideas on.

So I grabbed one of my whiteboards (one is never enough anymore), and dumped abstract representations and rough sketches galore. Once some ideas solidified, I took to sketching screens. Here’s the result of a whiteboarding session I had for the “Home” screen, complete with labels and questions and scribbles:

I did this for each screen and worked out how I wanted to present the important info on each one.

Sketch

Once the dirty work of conceptualizing and sketching was sufficiently done, it was time for my favorite part of the design cycle: Sketch-ifying my ideas into high-fidelity wireframes and prototypes.

In this stage, I got a stronger grasp of what my design would feel like on an actual device, and for that reason there were even more iterations and surprising changes here than in any other stage. Detail-oriented decisions like font choice, color scheme, whitespace, and iconography became the focus, and designer intuition and trying new things took over.

Many hours and artboards later, I had a final set of screens:

All the Sketch artboards for my Mango Health redesign.

Step 5: Final Product

Although a final set of artboards is technically enough to call a redesign, I don’t like to stop there — they may be complete, but some differ in size and there is a flatness and visual imbalance that makes them look unprofessional.

Instead, I try to spruce things up with some graphics and iPhone templates. The results are the following and the graphic I used as the thumbnail:

A slightly more presentable version of some artboards.

Conclusion

In this case study, I sought to redesign Mango Health’s iOS app following the method of human-centered design, which starts with real, user-facing problems and focuses on improving the experience in a tangible way before advancing to visual design stages.

I first asked questions and framed the possible solutions as ways to help the people who currently use the app, whether they be young or old, casual or power users. I drew out these ideas on my whiteboard to get a better representation of them, and then took my findings from the whiteboard to Sketch, transforming them into the final product: a high-fidelity app prototype.