NutreGo
Grocery shopping experience has remained similarly since the first self-service supermarket opened in 1916, except for quicker and quicker ways to checkout. With NutreGo, we looked into people’s changing needs during COVID 19 and designed a refined grocery shopping experience to fulfill their demands.
Team
Mengyu Wun, Hongda Li
Duration
4 Weeks
My Role
UX Designer
Primary and Secondary Research
Ideation, Paper prototyping, Hi-Fidelity Prototyping, Interactive Wireframing
My Contributions
Conducted contextual inquiries and observations in two grocery stores for three different time frames in a day to understand different shopper groups and their shopping habits.
Analyzed research findings with Laddering to pinpoint 5 common goals and 3 essential values from 26 shopping behaviors and habits.
Designed interactive wireframe and high-fidelity prototypes and conducted evaluations.
My learnings
During the secondary research, the wrong assumption we've made because the materials we've looked into were out-of-date made me rethink the thinking process in research. Since the project prompt that we got was saying about customers' shopping experience during the pandemic, I didn't consider enough which phase of the pandemic we should look into. The pandemic lasted for a long time, and nothing would stay the same. If it's for an actual product, the development process will take longer. How I can do more insightful and precise research and design strategically for a product that can be useful for users after time is something that I want to improve on. In addition, I also learned to quickly change project plan and apply appropriate research methods form this experience.
The Problem
Healthy eating habit is not an unprecedentedly new trend, but COVID 19 pandemic has accelerated it among the public. However, when people try to buy healthy food in store, they encounter two problems:
They don't have enough knowledge to select a nutritious and balanced cart of healthy food
They don’t have enough time to spend in-store looking for them by themselves.
Our Solution
User Desired Outcome: No extra “study time” about healthy food back home, quicker way to buy, healthier eating plate.
Our Approach: We attempted to construct this experience with a nutrition app installed on a touchscreen on the smart shopping cart with NFC sensor that gives real-time feedback on users’ shopping journey.
Tackling 3 pain points that slow down users’ decision making in-store:
How to estimate the amount of food?
What are the nutritions of the item?
Where to locate healthy food in-store?
Our Design
Estimation? We do the job
Set up a shopping plan for today and place items into the cart as usual. The real-time feedback on nutritions of food in cart shows how much is still needed based on your setting.
Speed up your healthy journey
Click on one nutrition type and see recommended products surrounding them.
No more lost in nutrition tags
Place the item near the screen and you can gain all information at one glance.
Info includes: main nutritions, health benefits, and shelf life of the product.
To reduce interruption in the shopping journey from interaction with the screen, the font size is scannable and the window will dismiss automatically after 10 seconds.
Know where you are, find what you need
Find your location and main categories of food’s locations in the store.
Suppled with a pie chart showing the recommended ratio of food based on your setting.
No more wait in line
Yes! Self-checkout on the shopping cart.
Research
Secondary Research
Literature Review
Approach
We looked into research, report, and survey to determine the changing needs. I facilitated the team discussions and organized all materials for later use in documentation.
Goal
To understand grocery customers' changing needs and shopping habits for in-store shopping during the pandemic.
To uncover insights that can inform next steps
Next step
We conducted contextual inquiries to validate our assumption and uncover insights into customers' behaviors and habits of shopping in-store.
Outcome
We found out that one of the most significant changes is the concern of getting infected by grocery storekeepers and other customers. Customers want to shop less frequently and more quickly.
Primary Research
Contextual Inquiries
Research Questions
How do customers navigate through the store to find what they want?
What kinds of interaction within the space increase their concerns about COVID-19?
What do they do to feel safer in a store?
What kinds of preparation do they have before going to shop?
Goal
To uncover the thought processes of what customers do in-store to shop more safely and their pain points when trying to achieve this goal.
Outcome
We made a wrong assumption!
Participants were concerned less about COVID-19 because many people had been vaccinated at that time.
Home-cooking habits from the pandemic increased their awareness of fresh food and healthy products.
COVID-19 has made people more health-conscious and want to change their lifestyles to stay well, which was reflected in how participants choose products in-store.
Reflection: We looked over research from 2020 to 2021 when we were doing this project around October 2021, but we didn't realize how fast things changed. I learned to be more precise when doing secondary research from this experience.
Approach
I created a semi-structured protocol, conducted 2 contextual inquiries, and my team had 4 in total. The 4 participants are between 21 and 39 years old and regularly go to grocery stores. All 4 shopping trips lasted between 30 to 70 minutes.
Observation & Short Interviews
Approach
As we had limited time left for this project and we couldn't find enough detailed research online, I proposed the idea of having all three teammates do observation in stores in two days and do a quick chat with customers who are willing to be interviewed. In this way, we didn't need to waste time scheduling with participants for interviews and we could collect data from more people.
We did observations in 3 different time at 3 stores and interviewed 8 customers.
Goal
To quickly get insights into customers' actual needs for in-store shopping in terms of health-consciousness.
Analysis
Fig. Laddering of research findings
We used laddering to analyze our findings, linking shoppers’ behaviors with their goals and values. After understanding their mental model, we found out what can be done to help them reach their goals more smoothly and precisely.
Key Findings
All participants tried to make a healthy choice.
They often checked nutrition tags and sometimes searched about the product on the phone, but these all slowed down their journey. They didn't want to spend a long time in-store, so most choices were still made based on their knowledge base even though they didn't know enough about healthy food.
They didn't want to spend extra time and effort learning about healthy food by themselves.
Explosive information online made it extra hard for them to identify and memorize.
They weren't always sure about how much food they needed.
Sometimes they found out they were short of or overstock some food. It's especially frustrating when it comes to fresh products.
Fig. Customers’ challenge
Research Conclusion
Based on the research and analysis, we determined our direction to refine the shopping experience by offering accurate healthy food information, visualizing the right amount of food needed, and reducing wasted time in-store.
Ideation
Chosen idea 1
Personalize users' eating preferences and measure the needed amount of food with real-time feedback on nutrition.
Why
Since users struggle with how much they need to buy, we found it helpful to reflect the needed amount during shopping to better choose each category of food evenly and efficiently without overbuying.
Chosen idea 2
Show nutrition tags with significant nutritions, health benefits, and freshness dates.
Why
Users want to consume healthy food but lack healthy food literacy and don't want to spend extra time learning about it. So the nutrition tag can help them make the desired choice and gradually gain related knowledge.
Chosen idea 3
Have a smart shopping cart equipped with a tablet installed with the features above.
Why
Users can scan through information on a large screen. It makes the shopping journey more efficient and causes less interruption from interaction with digital devices, especially when constantly checking on the phone.
Users usually shop with a shopping cart.
The NFC sensor technology is well-developed. When having all products' information in the system, it's possible to detect them with NFC tags and show information in the app.
Iteration
Conceptual Walkthrough
I made a paper prototype and had a conceptual walkthrough with four participants to refine the user flow and discover hidden issues.
Key Insights:
Using a food pyramid to reflect the total nutrition in the cart is confusing. We need to design a more direct visualization to show users about their nutrition progress.
Participants wanted more efficiency in the shopping journey.
Usability Testing
We applied the feedback on our design solution and made a low-fidelity prototype for concept testing. I created the testing protocol and our team conducted testing with 4 participants.
Major changes after testing:
Changing food pyramid to a straight-forward bar chart.
Adding a feature of recommending products in the desired category near the user.
Adding a map with user's location in-store to help them find their wanted items quicker.
Style Guide
The scannability of information in this project is excessively important, so the interface needs a high contrast between the text and background. Since I wanted to convey a welcoming and uplifting feeling in the grocery store, I chose a light pastel color palette with black text. The pastel green is the most repeated color in visual elements to express the sense of healthiness. The pastel red supports a complementary role in details, such as the nutrition progress chart.
The sans-serif typeface Avenir conveys a modern feeling, and the slight roundness gives a touch on liveliness and friendliness.
Next Step
Along with the project, I have struggled with the balance of user input, especially for the step of setting up the shopping plan. We simplified the setting as much as we could because we knew that users wanted to start shopping as soon as possible.
After we learned that most grocery shops have their websites for online shopping or information updating, and customers could register for an account on them, we came up with the idea of connecting their store accounts with NutreGo. So users can make more detailed shopping settings on their phones before entering the store. NutreGo can analyze users' shopping history to give more personalized recommendations of products in-store and use a chart to visualize their change in grocery shopping in terms of the healthiness of the products. It can show them the journey of building up healthy eating habits. This is also a win-win opportunity for grocery stores to attract more customers signing up on their websites.
Takeaways
It's useful to set up the type system in the early phase of UI design. It was my first time taking all responsibility for UI design, so I wasn't familiar with the workflow. I first made one screen with a high-fidelity prototype, but I found out that different visual elements may work better with a different set of font sizes when I started with the second screen. However, it caused too much variation in one application. Lacking consistency would result in confusion and less scanability. Thus, I started out again by figuring out one set of font sizes suitable for all screens and then continuing into other visual details.
Credit: Due to our limited time and tight schedule, we didn't have enough time to illustrate the icons for food for the nutrition progress page and nutrition tags. We were grateful to find Freepik.com, where it provided free icons with attribution.
Credit: <div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>