Overview
‘Tomayto Tomahto’ an app that helps users in choosing healthy groceries and thus have a balanced nutrition intake. This app works based on the grocery shopping history of the user for better suggestions. And concentrates on helping users make appropriate grocery choices to reach daily required values of nutrients.
Duration
Fourteen Weeks
24 Jan 19 - 01 May 19
Team
Individual
Expertise
Formative design research
Generative design research
UX Design
Deliverables
App Prototype
Presentation
Project Report
Executive Summary
Introduction
Every grocery product is available through multiple brands, who generally promote the product by using various attributes that the product possesses. These attributes can include but are limited to cost, nutrition information, quality, place of production, method of production, packaging aesthetics, brand value, discounts, and offers. Busy people need assistance in buying or searching for healthy food. Then, there can be the time and learned skills to prepare and cook nutritious meals that cause some to opt for easy recipes. Due to a busy lifestyle, choosing every grocery product based on nutrition and dietary information seems futile.
Research Process
This project was within the domain of grocery shopping and I explored the design of an app that helps users in choosing healthy groceries and thus have a balanced nutrition intake. To understand the user better, research methods I used include surveys, contextual inquiries, and interviews. After the research phase, the data was analyzed using an affinity diagram. The key insights found in the affinity diagramming led in creating a persona and journey map of a potential app user. Finally, the product requirements of the app were laid out.
Design Process
For ideation of app design, visioning diagrams of possible systems were made. They were evaluated on the pros and cons of the ideas and a final idea was selected. Next, storyboards of the selected idea were created, and also a User environment diagram of that addresses the functions in storyboards were made. Later, a low-fidelity prototype of the app was made. The prototype was used for user testing and the users were asked to perform three tasks. Later the feedback from the user testing was documented for future work.
Final Design
Objective
Research on the application domain of menu planning and/or grocery shopping for a residential household.
Although it is clear that there are already many apps that exist in this domain, the goal of my research is to identify opportunities to design functionality for such an app that supports my participant’s meal planning and/or shopping activities in a new, innovative way that provides an improved user experience.
1
Primary Research Phase
Formative methods used:
Survey
Interviews
Observations
Contextual Interviews
This phase builds upon the basics of human-computer interaction (HCI), user experience (UX), and design techniques to help develop expertise in formative design research methods and generative design research methods.
Formative research methods are focused on collection and analysis of data to understand and frame a problem space.
Generative design methods are focused on creating potential design solutions that can be evaluated to determine how well they address the problem space.
The project will emphasize the use of research methods to provide justification of design effectiveness.
Background scenario
My organization wants to design an innovative, interactive application that will meaningfully support the activities of people in the application domain of meal planning and/or grocery shopping. The delivery channel(s) for the application can be desktop, web, kiosk, mobile, other channel relevant to HCI, or a combination of channels.
Survey
48 participants
*displaying results of some of the questions
Contextual Interviews
Participant 1:
Student
Part-Time Employee
Single
Cooks Often
Participant 2:
Student
Part-Time Employee
Single
Cooks Sometimes
Contextual Interview at Participant’s house
This contextual interview is conducted before the participant goes to grocery shopping at the participant’s house. This part of the CI involves getting insights on any preparations that participant may make before going to the store or ordering groceries online. This helps in understanding how the participant decides on what to buy and how future meal plans affect the groceries list.
Contextual Interview at the Grocery Store
For the second part of contextual Interview, plan is to accompany with the participants on one of their grocery shopping trip and get to know about their experience of grocery shopping while whey are shopping in the store.
Contextual Interview while using Grocery app (only if the participant is not going to store)
If the participant prefers on buying groceries through an app then this CI concentrates on the preferred features on the app and understand any features that are missing or not productive. If there is any issues that participant has with using an app for groceries this CI is to investigate on it.
INSIGHTS
-
Finding the right product consumes a lot of time and resources.
-
Pen & paper, sticky notes are still the only choices for making grocery lists.
-
Owning a vehicle leads to more grocery shopping trips.
-
Product choices depend on the ingredients, nutrition facts.
( click to enlarge images )
Traditional Interviews
Meal Preparation Questions :
-
Who in your household does most of the cooking?
-
If the participant does
-
What is frequency of you cooking?
-
What are your preferences between fresh and frozen foods?
-
Do you enjoy preparing meals at home?
-
Do you plan meals ahead of shopping triptime?
-
-
If the participant doesn't
-
Could you tell me by what frequency meals are prepared in your home?
-
How often does your household rely on homemade meals?
-
-
Grocery Shopping Questions:
-
What is your role in shopping for groceries?
-
If the participant has any experience
-
How often do you or anyone in your household go for grocery shopping?
-
Where do you go for grocery shopping? (store/online)
-
Do you stick with same brands or do you consider other options when you shop?
-
Do you try new grocery products when they first come out?
-
How does the cost of the brands affect your choice?
-
-
Do you buy all the groceries at one store or do you go to multiple stores?
-
Could you explain why?
-
-
Do you buy fewer convenience foods to cut back on grocery spending?
-
Do you use coupons for grocery shopping?
-
Do you buy ready to eat meals (for example, frozen cooked meals)
-
-
-
Do you keep track on any grocery purchases you make?
-
If yes, how effective is your plan and what improvements do you wish for
-
Do you know if your household has a budget limitation on groceries?
-
Have you used coupons for groceries? (anytime)
-
If yes, what is the frequency of you using the coupons?
-
How do you generally look for any coupons and discounts for your groceries?
-
-
-
-
Is there anything else I should know to help me understand your meal planning and grocery shopping activities?
Participants:
Same as the contextual interview
INSIGHTS:
-
Customers create written shopping lists for grocery shopping visits.
-
Stores tend to use structured formats, e.g., product-category hierarchies, that contain formal language, whereas customers tend to use a more free form natural language to describe items. As an example, a typical handwritten grocery list can contain everything from generic item descriptions (e.g., milk, juice) to very specific items (e.g., a specific package of washing powder).
Analysis phase process:
-
Generated a list of notes from the research data.
-
Produced one “bottom-up” affinity diagram to organize and structure the notes from my research data.
-
Created work/activity model that is appropriate for the research data.
-
Generate a set of requirements for the proposed interactive system that are based on my affinity diagram and work/activity model.
-
Listed the key points from the diagram and model that need to be considered in design of the proposed interactive application.
2
Analysis Phase
Synthesis /Analysis
Techniques Used:
Affinity Diagram
User Persona
User Journey
Although it is clear that there are already many apps that exist in this domain, the goal of my research is to identify opportunities to design functionality for such an app that supports the participant's meal
planning and/or shopping activities in a new, innovative way that provides an improved user experience.
Affinity Diagram
INSIGHTS from Affinity Diagram
-
Perishability: Foods that are perishable cannot be trusted when bought online. Users experienced getting near expiry products. Users preferred selecting fresh foods themselves.
-
Quality is preferred in fresh foods and Cost-effectiveness is preferred on all groceries. Cost is not the major concern in fresh foods (fruits, vegetables, milk). Cost is the major concern in general groceries (except fruits, vegetables)
-
See it all: Users like to check out all the available groceries even the ones not on their list.
-
Delivery: For heavy items and non-fresh produce.
-
List it out: Users like to keep a list before going shopping.
-
Frequency: Going grocery shopping was considered tiring task as users didn't have a vehicle.
User Persona
Analyzing the Data: Started by extracting common threads from the information I have collected. What do the people have in common? Are there problems that seem to crop up frequently? Are there shared aspirations?
Prioritizing Attributes and Patterns: From the data, I found a number of patterns that could turn into personas.
Defining the Personas: Once I’ve decided which attributes to include and how each attribute varies across the user population, it was time to draw upon the personal details and anecdotes I observed in my research to synthesize realistic people from the clusters of attributes.
( click to enlarge the image )
Journey Map
Analyzing how the user feels and what are the various tasks involved in the process and what are the key points in each task. This exercise helps in the drawbacks and pain points in current process and will help in better understanding on what should be done in the next steps.
( click to enlarge the image )
Key findings
The users who care about the quality of foods and decide the quality only by themselves generally prefer to shop in-store.
Most of the users prefer heavy products to be delivered.
Users prefer frozen foods if they are lacking time in preparing with fresh foods or if the fresh foods are not available easily.
A major issue in a grocery app is getting good quality products.
Users try to pick healthy foods and less of convenience foods.
Not all users are excited about grocery shopping online because they think it's expensive.
Requirements
Requirements based on affinity diagram and work/activity model:
PRODUCT SELECTION
-
Nutrition Information:
User must be able to look up the amount of calories, fat, protein, vitamins, minerals and more contained in foods.
-
Comparison:
Users should be able to compare similar groceries.
-
Healthy Diet:
Help users choose healthy foods most of the time and limit the amount of unhealthy foods users eat. Shows practical resources to help the user and their family have a healthy diet.
WHERE, WHAT, WHEN
-
Store Locator:
The product shall help the user to choose the store that has the required groceries.
-
Availability:
The application shall have the database for available groceries in a particular store.
-
Discounts and Coupons:
The application shall provide information on available discounts and coupons.
RECOMMENDATIONS AND LISTS
-
Suggestions:
If the user is not sure what to choose; or Want to change their current diet; or need nutritional guidelines for a specific condition, diet, or lifestyle. The product shall provide information accordingly.
-
Lists:
User should be able to create a list of groceries required and should be able to see alternative suggestions for every item on the list.
3
Design Phase
Generative Design Research Methods used:
Visioning
Storyboarding
Conceptual modeling
Low-fidelity prototyping
The primary goal is to put into practice key methodological steps of conceptual design, prototyping, and collection of user feedback. This stage involves creating a conceptual design for a new interactive system, creating a limited prototype to support a subset of the functionality of the new interactive system, and collecting user feedback on the prototype.
A vision, storyboards and conceptual design diagram of the application are created based on the data, affinity diagram, work/activity model and requirements from the research.
Visioning
After evaluation of the features and pros and cons,
visioning 1 had options that are new to the user and concentrated on a particular problem space instead of merging a lot of problems. So exploring the first option would result in a new concept exploration.
The selected vision consists of the following key features:
-
Main functions:
-
Grocery Suggestions
-
Make a list of groceries
-
Track Nutrition Intake Values
-
-
Can scan a written list and convert it into a digital list of groceries.
-
Check the in-store availability of a product.
-
Check the nutrition information of a product.
-
Get grocery suggestions based on dietary/health requirements.
-
Search for a grocery product.
-
Track the grocery shopping history.
-
Can scan the barcode of the receipt or the receipt itself, and upload it to history.
-
Option to compare similar products.
-
Can check the upcoming and current discounts available on the selected product.
( click to enlarge the image )
Storyboarding
Storyboard 1: Scan and Analyse
Storyboard 2: Healthy Grocery Shopping Suggestions
If the user uses a handwritten note to keep a track on thing to buy during the next grocery shopping, this app helps in making the list digital. And check the availability and offers on the same.
Everyone tries to eat healthily. Since the nutrition information is available for each product, it's hard to know if a person is taking all the nutrients required. This feature helps the users in knowing about the nutrients they are getting from the groceries they are buying.
User Environment Design Diagram
Low Fidelity Prototype
User Testing
Based on the feedback I would consider making the following changes in the design:
-
Better represent the data in the home screen.
-
Add store choosing option.
-
Add compare option which was missing in the product page.
-
Introducing a discounts page link from home page.
-
Add more filters in search.
-
Add view list button after add to list.
.png)
.png)
App Title &
Personal preferences
Search & Sort by
Nutritional - Subcategories
Dietary Reference
Intake and limits
Tab Bar (Home Selected)
Overview
The home page shows the total of dietary nutrients based on the groceries purchased and maps against the weekly values required as per the personal preferences.
High Fidelity Prototype
.png)
Scan
The home page shows the total of dietary nutrients based on the groceries purchased and maps against the weekly values required as per the personal preferences.
.png)
.png)
Recommendations for next Grocery trip
The home page shows the total of dietary nutrients based on the groceries purchased and maps against the weekly values required as per the personal preferences.