HoMee

0. Project Overview

1. Research

Research Goal

To identify the demographics of the users

To understand the current and future grocery shopping trends

To identify goals, needs, frustrations, and motivations of the users

To understand competitors practices including strengths and weaknesses

Methodologies

Secondary Research

a. Market Research

Revised Nutritional Label

The process of revising the nutritional label reflected the way of how customers consume the content. For example:

• Enlarged and bolded letters for 'Calories' because this is what customers look for first
• Limited the numbers of column down to two for readability
• Made the portion clear 'servings per container' to not mislead the customers

Change in Grocery Industry based on Consumer Trend during COVID

• Last year in the United States, nearly 6% of all food sold was certified organic, OTA noted. Fresh produce led the way, with organic fruit and vegetable sales up 11% to $18.2 million in 2020, according to Nutrition Business Journal.

Meal Prepping and Cooking Behavior

• Consumers are eating more at home – increase in consumer sentiment toward healthy/clean eating with produce and healthier eating
• People are returning to work and are looking for quick meal solutions to be able to cook full recipes during COVID.
• Customers looking for a wider range of complex meals that are simple for them to execute at home; People want tasty, convenient meals that aren't totally bad for your health.

Who are the consumers?

b. Provisional Personas

c. Competitive Analysis

Primary Research

a. User Interview

After learning more about the current trend in the grocery industry, it was more clearer to me of who are the right people to dive deep into the topic with. For that, I invited 6 participants to join my user interview sessions so that I can look for a more qualitative data as my primary research.

b. Research Synthesis

Affinity Map

I created an affinity map to synthesize the transcripts of the user interview. The patterns were found across the participants to help me uncover users needs and insights for later strategy and design phases.

User Insights

• Users would keep their cooking habit as it is even after the pandemic.
• Users would swap out ingredients on recipe to cater to their dietary needs.
• Users do not know if they already have ingredients at home.

User Persona

The findings from the empathy map was collected and summarized in the user persona, Kelly. It assists the design process by presenting our target user group with the essence of their goals, needs, motivation and pains.

2. Strategy

Problem Definition

a. How Might We?

To define what problems I get to solve for our users, I framed point of view (POV) statements from our persona, Tiffany's perspectives. Each statement was derived from the user's insights listed above, and each statement helped me redirect user's point of view into How Might We (HMW) statements to see what problem I should solve for the users.

b. Explore Possibilities

This individual exercise is initiated based on the three HMW questions concluded from the user interview. Mindmap helped bring thoughts and ideas on different topics from something general to specific and synthetically relevant.

Our Focus

a. Product Goals

Having set the goal at the beginning of the project, it is important to see in what ways the product meet the user goals, and also what are the technical consideration behind the scene. It also gives a long term vision for the application to grow.

Overall users would like to have tasty meals with varieties and be aware of eating healthy, and at the same time the application is to provide enough information to inspire what users can cook, and to have them reviewed their meals of the day.

b. Product Roadmap

These roadmap allows me to prioritize the features I come up with during brainstorming sessions, from P1 (Must have) to P4 (Can come later). Based on the difficulties and confidence level (%) of how much the feature will allow users to achieve user goals, and as an MVP (Minimal Variable Product), I chose to work on the features on P1 section to first meet the user needs in a shorter period of time.

Scroll to right or click on the image for viewing complete app map:

3. Design

Information Architecture

a. App Map

The app map is done by visualizing the main features on the navigation menu for an iOS mobile application. With the P1 features listed on the roadmap, the users would be able to start with meal planning, grocery shopping, cooking, and reviewing nutrition consumption all-in-one. The features points to the following user tasks:

1. Grocery list:
   ‍To export the ingredients from the recipe for shopping later, and to start an inventory log for the ingredients user have on hand
2. Account:
   ‍To start a personalized taste profile to view saved recipes
3. Daily nutrition intake summary:
   ‍To view the nutrition intake of the meals user ate all combined per day.
4. Recipe:
   To view recipe for inspiration and assign dishes on certain dates.

Interaction Design

a. Task Flows & User Flow

Task flows were created to further solidify the steps that the users take to complete their tasks based on the structure shown in app map.
‍
Task 1: As a user, I would like to schedule a date for the recipes I am going to use for both of my lunch and dinner.
Task 2: As a user, I would like to swap some ingredients in a saved recipe to substitute for my dietary requirements or taste profile.
Task 3: As a user, I hope to export the ingredients I need from the recipe to my dedicated shopping list.
Task 4: As a user, I would like to view the daily nutrition intake summary based on the meals I schedule on the days.

The task flows were developed into user flow. The user flow represents other possible scenarios that other users may have on their mind while completing their tasks. It is why there are decision making trees including in the user flow. See user flow.

b. UI Requirement

The app map, task flow and user flow provide enough structure and content for me to further work on the design of each mobile screen. A UI requirement document was made to list out the required elements on the screens for user to see and interact in order to complete their tasks.
See UI requirement.

c. Wireframes

Low Fidelity Wireframes (Sketches)

Using user flow and UI requirements as the guide, the elements are come together and sketched on paper as shown below, which set a start for me to digitalize the design.

Mid-fidelity Wireframes

In order to perform usability testing to validate the design, the sketches and more screens involved in the user flow were further thought through to develop into mid-fidelity wireframe and prototype.

4. Prototype & Testing

Usability Testing

a. Planning

Objectives

• To check the usability and usefulness
• To understand users’ thought process while navigating the application
• To identify pains and frustration while navigating the application
• To determine if the user tasks can be done

Participants

• 5 participants
• Age 25-36
• Who did their own grocery and cooking
• Concern for what they are eating

b. Methodology

• Think-Aloud Method
• Remote moderated test over (Zoom) to have participants shared screen when interacting with Figma prototype
• Observe interaction, tone, and facial expression
• Record session and note taking

Findings

a. Task Completion and Errors

Error-free Rate (97%)‍

• The percentage of tasks the user completed: 99% (Slips: x2; Mistakes: x1)
• Users misunderstood the color representation of active vs inactive on tabs
• One user attempted to schedule a dish by clicking on the calendar icon (for reviewing daily intake) on the navigation bar.

b. Affinity Map

User insights were noted through grouping the notes gathered from usability test sessions.

c. Insights

Recommendations & Priority Matrix

Recommendations were then decided to improve each user insight for later reiteration before making it into high fidelity wireframes and prototype.

• Users think the saved recipes should be found in recipe screen.
  Recommendation: Saved recipes can be found as an icon on the top right corner of recipe page.
• Users find the time filter can be further broken down into 15 minute interval.
  Recommendation: 15 minute interval for cooking time 0 to 60 minutes will be introduced.
• Users expect to find suggestions for ingredient substitutes.
  Recommendation: Add ingredient suggestions to guide users in what will pair with the recipe well.
• Users think that the ingredient list is not as important because it can be easily closed out.
  Recommendation: Keep ingredient list on a new screen instead of an overlap modal.
• Users needs to see the suggested daily value vs. what they have intake.
  Recommendation: Add maximum intake value for each macronutrient.

Reiteration

Here are some highlights of the changes I have made on the wireframes based on the recommendations.

1. Change navigation icon from a calendar into a statistic showing icon to prevent users from scheduling meal through this tab.

2. Add '15 min' interval to the filter;
Moved Saved recipe within recipe screen.

3. Add available alternative for some ingredients on a recipe.

4. Provide the suggested maximum amount of macronutrients as a comparison for users.

UI Design

a. Brand and Styling

To start making the wireframes into high fidelity version, I started with listing out the brand attributes expressed by the organization and participants in the interview, and made a moodboard and to define the visual direction for the brand and design. From there, I developed a UI Kit specifically for guiding me while I was making the hi-fi wireframes. UI kit consists of reusable elements which helps the pages stay consistent, and facilitate collaboration work in the future.

Brand attribute:

b. High Fidelity Wireframe & Prototype

The style guide and UI kit provided me a clear direction of the look and feel of the application. At the same time, the design is going to be consistent throughout the application and it is going to be efficient when it grows.

5. Final Thought & Next Steps

a. Final Thought

• Designing a mobile application with giving the users just enough was not an easy job, especially where the competitors are features all developed and polished (e.g. Share with friend feature, link to native Health App, connect to grocery online shopping, etc).
  
• I wish to be able to communicate the relationship of the items on the navigation menu more. The all-in-one process is not very obvious when all the tasks seem to be separated in their own spot.

b. Next Steps

This project is only enough to filfill users needs and goals. There are still so many areas to improve on:

• Conduct usability test on the revision prototype if time allows to look for more feedback
• Start looking into the implementation of P2 – P4 features on the product roadmap
• If this were made into a real project, more research on the usage of the application will have to be done, and communication between the software engineer(s) should be started early to make sure the technical input is involved in the design and development.