Codename Voyager (Reach US) - 2020

Voyager is a prototype pre-run that has been launched in the app stores. This app is meant to be a health super app that spans across five verticals of health:

a) Mindfulness
b) Mental wellbeing
c) Nutrition and diet
d) Fitness
e) Condition management and doctor consultation

In the first version, we’ve built the meditation vertical only. We intend to build the other verticals within the next year and replace the Roundglass Reach app with this one.

TL;DR: Scroll to the bottom of the page for design.

There is a need for an app like this. Covid-19 has been an eye-opener for most of us. Staying healthy at home and by yourself has never been more important and more difficult. The idea here is to create a super-app that understands your needs, suggests the right health plan, and curates a health plan for you. It becomes a one-stop solution for all of your health needs. This solution spans across five health verticals as illustrated earlier.

Users' frustrations are centered around managing separate apps for each vertical. This is a tedious process. These apps also do not necessarily communicate with each other, leading to fragmented health information. We want to consolidate the information and provide a cohesive solution to our users' needs.

Voyager takes a clinical approach to health and subjects each user to an on-demand health assessment that helps the user assess and understand their current health condition. The app then recommends the best way forward based on your current health status and requirements. This is backed by a lot of subject matter experts and doctors.

Market and Target Audience

This app is targeted towards the US and North American markets. We conducted persona research that helped us understand potential users' pains and ambitions.

Here are some customer attributes:
a) They own a smartphone, maybe a smartwatch as well.
b) They are working professionals with a crunch for time.
c) They all have the intent to get healthy but don’t know how.
d) They belong to the 22-50 age group.

After listing a Craigslist advertisement to interview for this research in exchange for a cash reward and permission to record the interview, we shortlisted 25 of 150 people from five major cities: SFO Bay Area, Seattle, Chicago, Ann Arbor, and Atlanta. We were careful not to choose people who were either here just for the money or did not express enough enthusiasm about the survey (especially the ones with single-word answers).

We interviewed and recorded these 25 people to understand their pain points and what kind of apps they use to manage their health. Here are some of our findings.

Personas

Our design principles

10 Commandments of Voyager

1. Thou shall fight for the user.

2. Thou shall not make the user choose - 2 large CTAs in most screens’ views.

3. Thou shall not scroll sideways - except when you absolutely need to, intended well.

4. Thou shall use images, not illustrations.

5. Thou shall use a grid of 8 with minimum spacing of 16px.

6. Thou shall not design iOS and Android separately except for the native elements.

7. Thou shall not make me read too much. No text for design's sake.

8. Thou shall not make me navigate too deep - L2 at max, with quick return to home.

9. Thou shall delight the user with music, notifications, and micro-interactions.

10. Thou shall test everything.

Before we began our design, we drafted a list of quirky principles the team agrees with. We kept referring to these throughout the design process.

Our All-Star Design Team
We had a team of three designers, one product manager, and the business head working on the first draft of Voyager.

Role and Location:
a) Product designer/Team manager (Me in Bangalore)
b) Product designer (Noida)
c) User researcher/UX designer (SFO)

Our Timeline
First draft in about three weeks. We wanted to demo the concept to the CEO and get approvals, as this was going to be a major pivot from the existing B2B app. This app would also become the vessel to test the quality of the mindfulness meditation tracks that we were producing in parallel.

Overall design took about six weeks to bring it to a design deliverable state.

The Process

1. The Information Architecture:

We mapped out our user journeys that we would end up building in the course of this design. This step helped us to scope out the work and manage our time better. These flows were highly volatile and we kept tweaking them as we developed the concepts of the app. The colored boxes represent different stem pages and their states. (View full size image for the IA)

2.     Crazy 8s: Design thinking for everyone.

I truly believe there is a designer in everyone. This step helps in bringing out the best designs from everyone. In a Crazy Eight session, we take an A4 sheet and fold it twice, once vertically and once horizontally. This gives you four sections on the paper on both sides. We would have daily meetings where all five of us would take up a user flow from the information architecture we had previously defined.

Here are the steps we followed:
a) Discuss something funny:
Puts everyone at ease, lets you feel human again. Best work is done in the absence of hierarchy and with an open mind.

b) Define a problem statement:
In as few words as possible and fold the paper. I believe in crisp straight lines.

c) Think fast - 2 min quick draw solution:
This lets us do rapid thinking when we sketch quick solutions on each quadrant of the paper, on both sides. This step forces us to focus on the bare essentials and not obsess over the craft of design, avoiding lingering biases since you have so little time to come up with a solution.

d) Reconvene and quick presentation:
Discuss our solutions with each other. Make a pros vs. cons list of all of the solutions we could come up with.

e) Think slow - Sketch a detailed flow:
Here we discuss and analyze the pros and cons list and assemble a solution with the team. After we draft the flows, we think of as many use cases as possible and address each flow in great detail. We are ready for testing at this point. This process has helped me achieve many magical solutions in a variety of scenarios.

3.     User testing: What my family hates me for.

We had started working remotely and from home. Catching an unsuspecting colleague at work was no longer possible. I tried scheduling calls and Zoom meetings, but nothing matched the speed of my excitement.

Enter Muktai (my wife) and Pritanjan (my brother, who also works for Roundglass’ marketing dept). We were in quarantine together. They were my usual test subjects. Similarly, family members of the other designers were involved in the design testing. A design would only ship if it satisfied at least 4 out of 5 people that we showed it to. Typically, I like to do interviews with five people that we can sit across the table from. It helps you read users better in person.

4.     Visual design: what you see is what we make.

We were a distributed team and we needed a common visual design library and components that we would use to build out the app. I am a big fan of the Atomic Design principle, or as I also like to call it, Object-Oriented Design.

a) Basics of Atomic Design by Brad Frost:
Atomic design principles are at the core of most successful designs out there. In our approach, we build upon this. (Read more about atomic design here)

b)    Component Library:
Following the Atomic Design principles, we designed, defined, refined, and reused the components in our designs. We have weekly or on-demand meetings about the component library and how to induct newer components into the app design or not.

c)    Visual design surveys:
Based on these inputs and app store comments (on the existing Reach app) that we gather from our users, we build our component libraries and visual design mood boards. We ensured the basics of visual design hygiene, like readability, contrast ratios, and principles like Gestalt, are not just met but excelled at. We ran the visual design tests along with the usability testing and recorded Net Promoter Scores (NPS) for the visuals as well. So far, we are at around 4.1/5. We are aiming for at least 4.5.

And for the Finale! Let’s look at some designs.

Click any screen to view a larger image.

The other stuff

Other screens that make the app useable.

Why is a meditation app dark?

Turns out most people like to meditate at dark places. As beginners, they tend to peek at the phone screens. The brightness of phone screens cause great discomfort. A lot of people pointed this out to us when we were building aware. I used that learning and some app store comments on reach india app to keep the app in dark mode or default to the system theme.

Also this Dark theme is trending.

Engineers don’t always see designs the way designers do.

How can we help them? To address this very problem, we decided to detail out the design and use zeplin for our handoff. we would have two checkins with them every week and more impromptu conversations when required.

Our app is live right now.

But in private beta.

There is still a lot more i would love to tell you about voyager, but i’d prefer to do that over a call. You can always reach me over an email.