NUTRIGENE APP

Imagine having a diet that has been customized based off your DNA. No more guessing how well your body processes certain nutrients or wondering what you may eat to feel fuller and healthier in your diet. NutriGene was designed to meet those needs by providing a custom planned diet based off your DNA report. See the process below of how this prototype was designed.

Team Members: Jen Allen, Jan Acosta, Leonel Alcántara

My Role: Project Manager | UX Research | Usability Testing | Client Coordination

The Problem

  • How can a user find genetic based diet or information in an easily digestible format
  • How a user can submit their DNA report or get a DNA test so they can receive the curated meal plan.
  • Where can a user get better meal plans based off DNA results rather than fad diets or “one size fits all” meal plans
  • Not enough options on genetic based diet on the market, want to make sure their data is safe

The Solution

Using a team approach to UX Research & Design, we divided the tasks of the design process based off the sprint model. The sprint model is used for rapid prototype development and usually done in the time frame of one week. For this process we used three weeks to research, develop, design, conduct usability testing, iterations, and a/b testing for a robust prototype addressing the needs of the client. 

Discovery Phase

UX Research

User Survey & Interview | User Persona & Empathy Map | Journey Map

Methods:
Competitor Review – See what others are doing and how successful an integration with timeline for bus arrivals is doing.
User Interviews – Create Survey for potential users to take online and gather demographic information

Recruitment Plan:
Find friends and co-students that utilize show interest to participate in the survey
Find competitors that have created similar apps and evaluate how they solved the solution

Timeline:
1 week

Resource Needs:
Willing participants, google sheets, other case study or documentation from competitors.
maze.design usability testing

User Survey & Interview

This is how we surveyed for general interest in the app and to see if users had a DNA Test. This was important to defining on the onboarding screens to allow for the user to order a test through the app if they did not have one already done.

User Persona & Empathy Map

Journey Map

Information Architecture

User Flow:
Beginning to understand what would be needed for the app, I created a user flow to provide all possibile options for a user to experience when searching for a new bus, saving a bus, looking up favorites, and even account actions such as logging in and signing out.

Sketching:

Our team created sketches per person and we decided on the best route when presenting within the group on how to proceed towards the next step: wireframes.

User Flow

Sketches

Jen sketches “Crazy 8” each sketch drawn in under 1 minute of screen elements and ideas

Leo sketches his revised ideas for the organization of the data screens

Jan sketches the onboarding process screens

Visual Design & Branding Phase

Color Pallet & Logo Design

 

Through client interview and interpretation of medical community color choices, Leonel was able to design a soothing yet complimentary logo and color pallet that reflected the client’s desire to look calming yet professional.

Style Guide 

Wireframes

High Fidelity Mockup

Usability Testing Phase

Testing & Measurements

Usability Testing:
For the user testing group, we had a total of 5 usability test users and conducted two separate testing groups that were recorded via zoom. In addition to observation and review of the usability test, we also conducted the task test through maz.design to provide statistical data and feedback as designed by our user testing guide.

Measurements:
Utilizing maze.design and zoom for testing, we were able to measure outcomes of tasks of the usability test. Some tasks proved more difficult than others with an abnormal high failure rate and expressed frustration from the participants.

A/B Testing & Iterations

A/B Testing:
We followed up with an additional usability test through maze.design to provide data if new iterations were better received by the user.

Iterations:
By providing a more fluid and simplistic design in the onboarding screens of the app, user exerience rating improved and task completion rate increased. In addition, the users reported a positive feedback to the changes.

What I learned

Working in a team environment was fulfilling and explorative in the UX/UI Design process. My roles involved in the UX Research and Usability Testing provided insight on the many avenues to involed in a user center design. Each decision was questioned and supported with either research or informed decision making as a group.

 

Also, it was great to see each team member excel in their area of choice. When we came together as team and discussed the assets, data, or designs curated, it provided an overview of the project with precise deadlines. This was also the first time using the sprint method, which included rapid prototyping and testing. 

 

Overall, this experience was enjoyable and challenging as new concepts were combined in a team effort with one coheisive theme.

See the prototype here