PROJECT OVERVIEW
The Product.
KNOW THE GROCERIES
Grocery shopping, a seemingly simple task, can often turn into a time-consuming and stressful ordeal. Whether you're juggling a busy schedule, meal planning for a family, or simply trying to avoid the crowds, the traditional grocery shopping experience can leave you feeling overwhelmed.
Know the Groceries, is a mobile app designed to revolutionize the way you shop. Our innovative platform offers a range of features that make grocery shopping more efficient, enjoyable, and stress-free. With Know the Groceries, you can:
-
Create personalized shopping lists: Easily add items to your list, organize them by category, and even check them off as you shop.
-
Explore virtual aisles: Our AR feature allows you to visualize products in real-time, helping you find exactly what you need without getting lost.
-
Scan ingredients for inspiration: Simply scan ingredients in your pantry or fridge, and our app will suggest recipes and meal ideas.
By combining technology with convenience, Know the Groceries aims to transform the grocery shopping experience into a seamless and enjoyable process. Our app is designed to save you time, reduce stress, and help you make healthier choices.
Duration of Project
March 2024 - June 2024
Role
UX/UI Design
Team
Me'shelle Watson
Tools
Figma
User Research
Wire-framing
Prototyping
Usability testing
The problem:
The amount of time users spend at the grocery store is excessive. This can be due to a lack of planning, the need for special assistance, food allergies, or a desire for a more engaging shopping experience.
The goal:
Based on the information provided, it seems like the app might benefit from improving its accessibility options and providing more detailed information about its products to accommodate users with allergies or specific needs. By doing so, the store can create a more inclusive and welcoming environment for all customers.
USER RESEARCH
IDEATE PHASE
Malak Badr
Age: 43
Occupation: Entrepreneur
Hometown: Missouri
Family: Single
"I enjoy finding new ways to enhance my shopping experience. There are so many more options than it used to be to gain independence with assist with my specific situation.
ABOUT:
Malak Badr, a 43-year-old online entrepreneur and cultural education advocate, devotes significant time to her work while balancing household responsibilities.
Despite using a wheelchair due to her disability, Malak remains fiercely independent and regularly shops at local grocery stores.
However, she faces difficulties in stores with narrow aisles and inaccessible layouts, which complicates her shopping experience and extends her travel time.
Although Malak appreciates delivery services, she values the autonomy of shopping in-person.
GOAL:
Malak aims to become familiar with grocery store layouts beforehand to make her shopping trips more efficient, her wheelchair use. Additionally, she is looking for ways to expedite the process of finding items, especially those placed on higher shelves, which can be difficult to reach due to her disabilities, to further enhance her shopping experience.
PAIN POINTS:
1.
Malak has a disability and has trouble with narrow aisles at the grocery store.
2.
She has trouble finding stores with a layout that is compatible for her.
3.
Malak is empowered by her independence however she spends too much time at the grocery store.
4.
Malak is facing difficulty in accessing certain items in the store due to the shelves being too high.
Alyn Watts
Age: 44
Occupation: Therapy
Hometown: Kansas City
Family: Wife
"I love spending time with my family, and when it's my turn to do the shopping and cook I want to do my best to make sure we enjoy our quality time that is very important to me."
ABOUT:
Alyn is a 44-year-old family man and Therapy major who has a busy schedule. He often finds it challenging to plan his meals due to his various food allergies.
Although he prefers online grocery shopping, he sometimes has to visit physical stores to ensure the accuracy of product ingredients or when specific items are unavailable online.
In addition to his existing challenges, Alyn tends to select stores with disorganized layouts, which further complicates his shopping experience.
GOAL:
Alyn wants to improve his shopping experience by saving time, pre-planning, and having access to ingredient information and allergy warnings. He also wants to save his shopping list and recipes and possibly use VR technology. All while making it home in time to cook and spend time with his family.
PAIN POINTS:
1.
Alyn has several food allergies. He usually has trouble getting all of the information he needs about a product.
2.
Alyn has a very busy schedule and he spends a lot of time at the grocery store. Mostly verifying products. He tries to plan ahead.
3.
Alyn loves being with his family and cooking for them, but struggles with planning.
4.
He makes impulsive purchases because he is unorganized, rushing or overlooks allergens, resulting in products that go to waste.
USER RESEARCH: SUMMARY
After analyzing a sample of interviews, it's clear that Malak Badr would benefit from additional reader technology options and store layouts for wheelchair access. On the other hand, Alyn Watsn requires a more efficient solution for getting information about ingredients. Both personas desire a more effective grocery shopping experience that provides more information about products, better accessibility, a creative experience that uses AI technology to help locate products, and a better way to save time while shopping
USER JOURNEYS
To start, we aimed to grasp users' needs, ease their pain points, and empathize with their experience.
PAPER WIRE-FRAMES
Our objective was to create a user flow that effectively highlighted the significant features of the application.
STORYBOARDS -CLOSE UP AND BIG PICTURE.
To brainstorm ideas, I utilized a storyboard that presented the app's features in a clear, step-by-step manner. The storyboard followed the journey of a user named Alyn, who wanted to plan meals, shop for ingredients, and cook for his family. This helped me to generate ideas and establish a direction for the project.
LOW-FIDELITY PROTOTYPE
In order to conduct an unmoderated study during the concept testing phase, I created a low-fidelity prototype.
AFFINITY MAP
Following the usability studies, I created an Affinity Map to categorize the qualitative data collected from users. This included patterns, suggestions, issues, and concerns that emerged during testing of the low fidelity prototype.
USABILITY STUDY : FINDINGS
I identified two primary user groups:
-
Accessibility-focused users: Individuals with disabilities or challenges navigating physical stores who sought an easier app experience for locating items.
-
Informed shoppers: Users who prioritized detailed ingredient information, precise product availability, and expedited checkout processes."
1.
Users are seeking more choices for comparing prices while scanning items.
2.
Users want a more refined layout
3.
Users are seeking an improved way to select a participating store prior to shopping.
4.
Users have expressed a desire for an improved process to review items/ingredients prior to completing their purchase.
5.
Users are looking for a more effective means to change their language preferences.
6.
Users are seeking more polished shapes and colors to distinguish between their choices.
7.
Users were having trouble with the navigation of the app and found it complex.
8.
An app with these types of enhancements was eagerly anticipated by users.
MOCKUPS (mobile)
I've improved the shopping experience by simplifying information and navigation, and creating a dedicated page to avoid confusion.
MOCKUPS
I simplified the scan page by separating the shopping settings, which were causing too many options to appear. This change provides a more experience for users.
HIGH-FIDELITY PROTOTYPE
This is a user flow that will provide the user with a simple way to navigate through the app.
ACCESSIBILITY CONSIDERATIONS:
- The app offers a feature that enables users to search for participating locations and preview the store layout prior to their visit.
- The platform offers a feature that provides users with a comprehensive breakdown of the product's ingredients to aid with allergies and health concerns. Additionally, shoppers can generate a QR code for a hassle-free checkout process.
- By utilizing the VR option, users can enhance their shopping experience with audio connectivity and augmented reality features that aid in navigation and more. This experience includes a shopping list, alerts on item locations both in and out of the store, and detailed visibility while shopping.
DESKTOP
HIGH -FIDELITY PROTOTYPE
This particular user flow presents a streamlined approach for users to conveniently access information regarding the mobile application on their desktop.
The app is solely for in-store use, while the website provides app information.
Mockups
 |
|---|
 |
 |
 |
 |
 |
Interactive
This is an interactive prototype designed in Figma. Use the left and right arrows to navigate through it.
Impact:
This design will empower shoppers with more information, enhance their grocery store experience, and make the process enjoyable.
What I learned:
People want a system that is intuitive, easy to navigate, time-saving, and improves the overall user experience.
