23andMe_white.png

23andMe

Creating the first iOS App for 23andMe

23andMe

Creating the first native iOS App for 23andMe

 

Role / Interaction & Visual Designer

Company / 23andMe

I worked with 23andMe to design the MVP version of their first mobile app.  They wanted to limit the project scope to creating their web Discovery feature in iOS.  This allowed me to focus on translating their existing and requested web concepts into an intuitive mobile interaction model that could easily scale as they added features.

The Discovery app is 23andMe's portal for collecting phenotypic (non genetic) research from users.  Simply put- users can answer questions about their health and lifestyle and receive insights as a reward for participation.  The aggregate data received from users contributes to scientific research that 23andMe supports.

 

THE GOALS

  • 23andMe was in the process of redefining their web visual style and overall brand and didn't have very defined interaction patterns for their website.  They wanted a simple design that felt like their brand without knowing exactly what their brand identity would be when their visual redesign was done.  

  • Since we were starting with just one of 23andMe's features, the app needed to feel complete to users yet be scalable as soon as 23andMe was ready to offer more.

  • Users earned a research "insight" for each question they answer and the insights are often directly related to that question. There was an ongoing debate over where to place the insights and how obtrusive they should be, versus how much we should keep the user focused on answering questions.

THE CONSTRAINTS

  • Obtaining scientifically valid data was the main business goal for this app.  Many of the designs had to support very rigid content formats that 23andMe's research team had approved.  For example, questions that had been asked on their website had to be formatted in the exact same way on the mobile app, including answer formatting, so we didn't bias the user.

THE SOLUTION

  • Obtaining research data is the primary goal of Discovery, so my designs kept that as the focus for users.  Users earn insights for each answer they give, but the insights are on a separate page from the question flow.  Users are alerted that they've earned insights by a subtle animation on the insight page logo, rather than interrupting them by displaying one insight after each question.

  • 23andMe had previously decided that they wanted to use a bottom tabbed navigation.  This felt appropriate for them, but not for a single feature app.  We removed the tabbed navigation for this version with plans to implement it in the future.


 

Sketches

 

User Flows

Users earned a research "insight" for each question they answered as a way to incentivize their participation.  There was an ongoing debate over where to place the insights and how obtrusive they should be, versus how much we should keep the user focused on answering as many questions as possible to support business goals.  Brainstorming around different user flows helped the team come to consensus.

23andMeFlow.png
 

Navigation Exploration

 

WIREFRAMES

 

VISUAL DESIGN EXPLORATIONS

 

FINAL DESIGNS