Nourish

An end-to-end mobile application for cooking healthy & quick recipes

 

Product Scope: End-to-end mobile application.

Task: Design an end-to-end mobile application for cooking healthy recipes.

My Role: Research, Persona Mapping, Sitemapping, User/Task Flows. Sketching, Wireframing, Prototyping, User testing.

Project Timeline: 2 weeks/ 80 hours

 

Process Overview

 

Research

Background

Problem

Many users are concerned about their cooking habit routine. Users cook the same food every day, sometimes compromising with not being healthy in their busy schedule. Users want to cook healthy but have no time to plan their healthy meals. Users who want to live healthily but don't know how to cook healthy to stay fit. Users who want to boost their immune system through healthy food especially in the time of covid-19 and they are not sure how to cook healthy recipes. 

Nourish is a mobile app that likes to share its healthy recipes. They also like to share information about superfoods, herbs, and their benefits to boost the immune system for users. 

How might we make healthy recipes and quick meals in a busy lifestyle?

 

Research Goal

I want to know what makes the users not cook healthy recipes. What bothers users is to compromise cooking unhealthy food. How to design a useful healthy recipe app for users to stay healthy and fit. 

 

Methodologies

  1. Secondary research to see what users feel about not cooking healthy food

  2. User interviews to understand how users make time for cooking healthy and staying healthy and fit

  3. User Interview about user needs, goals, and pain points 

  4. Competitive analysis about other food recipe apps and how they help users to cook healthy food to maintain a healthy lifestyle. 

Research Objectives 

  1. Learn about why users have a difficult time cooking healthy recipes

  2. Learn about what makes them not cook healthy recipes. 

  3. Study user needs, goals, and pain points about cooking healthy recipes.

  4. Learn about users’ nutrition intake every day and how do they manage to keep themselves healthy in their busy schedules.

Research Summary

Next, I did secondary research to gain insight into the people who like to eat healthily. My goal was to better understand Users’ expectations, wants, needs, and pain points when cooking quick and healthy recipes

I also researched the Dos and Dont’s. According to the CDS, National Centre for Health published a report of people eat unhealthy, fast food and preservative intake.

Fast Food Consumption Everyday In the USA
 

Competitive Landscape

Following research, I worked on my competitive landscape with three top-rated recipe apps. I dug deep into my observations of the top features of the apps.

 

Competitive Analysis

After the competitive landscape, I also worked on my competitive analysis in Miro, to understand the competitor’s strength to design a successful cooking healthy recipe app.

 

User Interview

Next, I conducted a user interview with three participants from different backgrounds to understand the user’s needs, goals, and pain points.

 

Design Decisions

  • Design a user-friendly app to find healthy recipes 

  • Design a pantry feature for the users to find pantry ready recipes

  • Design a feature for users to find quick and easy recipes 

  • Design a superfood gallery section for the users to find information about superfoods

  • Design a ‘How to’ Instructions for the superfood gallery

  • Design a Diet section for the users to set their diet preference

  • Design an Attractive, user-friendly UI for users to browse through quick recipes

  • Add a category section for Cuisines, Popular recipes, Quick Meal Recipes

Persona Development

For most of the users, likes to cook healthy recipes and quick meal, so I started making persona development and empathy map to understand the user’s pain points and goals.

Persona 1

My primary persona is Gabriella, who is a teacher who likes to cook healthy food at home. She prefers homemade food and likes to have a healthy lifestyle in her busy schedule.

 

Empathy Mapping

After persona development, I mapped Gabe’s thinking, feeling, doing, seeing, hearing, goals, gains, and pain points.

 

Persona 2

My secondary persona is Dave, who is a student who likes to stay healthy and cook healthy recipes. . He prefers to have a healthy lifestyle and cook quickly healthy food.

 

Empathy Mapping

After persona development, I mapped Dave’s thinking, feeling, doing, seeing, hearing, goals, gains and painpoints

 

Information Architecture

Using Optimal Workshop Card Sorting, I conducted Open Card sorting and Closed Card Sorting with 10 participants to understand the user’s expectations, needs, and goals.

Open Card Sorting & Closed Card Sorting

 

Card Sorting Summary

It is interesting to see how participants categorized the cards with open card sorting as it helped me to get more ideas for my app with open and closed card sorting.

70% agreed to group Healthy Recipes In Health category

90% agreed to group Different kinds of cuisines  in Cuisines Category

85 - 90% agreed to group Superfood in  Healthy Food & Superfood category

50% agreed to group Easy Recipes into Quick Meal  Category 

85% agreed to group Diet Based recipes into the Diets category

70% agreed to group Grocery Items into Pantry Ready Recipes category 

50% agreed to group Superfood into Healthy Food Category  

80% agreed to group Vegan recipes  into Healthy and Diet Category 

Brainstorming Ideas

Based on the learning from card sorting, I brainstormed few ideas and top features for the Nourish app using Miro.

 

Site Map

I have come up with some new ideas and top features for cooking healthy recipes and created a sitemap on Miro.

 

Interaction Design

Task Flow

Next, I created a task flow for users to search for the recipes and categories. This is a simple task for the users to search for categories and superfoods.

 

User Flow

Using Whimsical, I created a task flow for the main functions the website should have. 

Task: Users search for the categories, Superfood section, Quick meal section, and return back to the main page.

 

Wireframe

Next, I sketched out a few pages for the recipes, nutrition value, pantry-ready recipes, and for the categories page.

 

UI Design

Logo Design

The Nourish logo design process began with sketching, and then I made vector logos of a select few and paired these with various wordmarks to see which combinations best fit the brand identity I was going for.

 
Nourish - Logo Ideas.png

Black & White Logos

Logo Design Ideas

 
 

UI Kit

After finalizing the logo design, I made a UI kit with all UI components and styles currently in use, for the more streamlined design and development of The Nourish app pages!

Nourish UI Kit.png

UI Kit

Logo design, Branding Design & Typography

 

UI Mobile Design

I began preparing for the UI kit after branding design. I referred to my sitemap and task flows to guide me on which screens to design.

 

Testing And Iteration

 

Prototype

With the UI design ready to go, the next step was to test my assumptions. I worked directly in the Figma file to create a click-through prototype with basic interactions/animations and make necessary revisions.

 

Usability Testing

Next, Using Maze I conducted usability testing with 5 participants to test and observe how users test the feature of my app.

Screenshot Capture - 2021-07-02 - 22-35-51.png

Total Testers - 5

The mission is to search for superfood

Screenshot Capture - 2021-07-02 - 22-37-05.png

MIssion’s Path

Analyzing the results for the mission’s path

Screenshot Capture - 2021-07-02 - 22-37-44.png

Success Matrics

To Understand success and Drop-off rate

Screenshot Capture - 2021-07-02 - 22-38-01.png

Usability Breakdown

Analyzing the performance of each screen

I added Opnion Scale for the users to measure how easy was the flow

Screenshot Capture - 2021-07-02 - 22-50-28.png

Opinion Scale

Opinion scale to test how easy was the flow

I also added Yes or No score card for the users to rate the app feature.

Screenshot Capture - 2021-07-02 - 22-50-47.png

Yes or No

Yes or No score for the users to rate the app feature

After conducting usability testing, Using Miro I created an affinity map to understand users needs, pain points, and suggestions

 

Affinity Mapping

I created an Affinity Map on Miro by looking over my transcripts, and arranging them into sticky notes organized by Wins, Pain Points, and Patterns and Suggestions, and color-coding the notes by which task they refer to. This exercise helped me organize my notes and transcript, and identify any patterns in successes and more importantly, concerns.

 

Iterations

Overall, the user testing sessions were a success. Every participant was able to complete the tasks easily. I took few pointers on the next step to improve the Nourish app.

  • Add interaction with the"‘Add to my meal’ button

  • Add interactions with the ‘Pantry Ready Recipes’ section

  • Prototype the "'‘Quick Meal’ Section

  • Add more pantry items

  • Prototype benefits of superfood

  • Add more interaction with the explore button

 

Thank You!