August 2025
Project Overview:
This is a mobile app that will assist users swiftly locate products within a physical grocery store by providing them with current aisle information, directions and a map to guide them to the specific item successfully.
As a part of the Google UX Design Certificate this project was completed over the course of 4 weeks. Gradually moving through each phase; research, ideation, wireframes, usability testing and the high-fidelity design/mockup. With a centered focus on making an intuitive app that helps users quickly locate specific grocery items in a nearby store.
Problem:
Many people waste so much time trying to locate items in a grocery store, especially when there aren’t any available staff nearby to ask for help.
Commonly these customers will grow frustrated and simply accept defeat and leave without what they came in for.
Goal:
The goal of this app is to provide assistance to customers who are unable to locate their listed goods within a store.
The app will provide maps for each store layout, listed items mapped out with live location information and search functionalities.
My Role:
My role was running an individual project as a part of my studies as a beginner UX Designer.
My responsibilities included every step in the UX Design process including user research, defining the problem, ideating solutions, deigning wireframes, completing usability testing and completing mockups.
Understanding the User:
My User Research helped me discover who my target audience was (regular shoppers who face difficulties locating desired products) and what frustrations they may face, based off of common challenges observed in other apps of similar designs and goals. An extremely common frustration for users being the inability to see the livestock count of products in-store and also the overly cluttered screens making it difficult to navigate smoothly.
Pain Points:
No Accessibility Features:
Users with visual impairments or motor limitations are not accounted for enough in similar app designs and have trouble navigating without voice support or large icons.
Unclear Product Information:
Users often mention with these designs that they need clearer details on product size, ingredients and availability.
Cluttered Navigation:
Users find existing grocery apps to be cluttered making it difficult to navigate, especially when in a rush, consuming more time than is worth.
Persona’s:
Marley’s Problem Statement:
Marely is a mum of 3 who needs her shopping trips to be planned and concise to avoid having her kids ask for unnecessary junk food items they stumble across during their struggle to find items in the store.
Becca’s Problem Statement:
Becca is a student with a celiac allergen and she struggles to find safe foods without having to ask for staff assistance in which causes her anxiety.
Chen’s Problem Statement:
Chen is a retired chef from overseas and he finds it difficult to locate international ingredients in-store, especially with the language barrier causing him to feel the trip is futile.
User Journey Map:
This user journey map was created based off of Chen’s persona, a shopper who faces difficulties locating international ingredients in-store. It shows how the app can help him manage to language barrier when requesting in-store staff assistance, with the built-in translator.
Starting The Design:
Sitemap:
My goal was to produce an app that can assist customers with locating specific items within a grocery store. Adding help services such as the chat-bot is designed to aid those who may have specific questions or are nervous about communicating with in-store staff, possibly facing a language barrier. This app will include simple functions shoppers can use regularly such as the shopping list and favorites specified for swifter navigation.
Paper Wireframes:
The goal here was to come up with a variety of designs that displayed all the functions required for the app, focusing on a compact android screen; picking and choosing what functions worked best. Ultimately the preferred features of each was added into the chosen design, keeping it minimalist with the important features (map and list) located clearly at the bottom of the screen for fast access without taking up space on the screen to avoid making a cluttered design.
Digital Wireframes:
The intended goal here was to transfer the wireframe from paper to digital screen, focusing on navigation and the designs overall visual appeal. Ensuring the prioritization of key features; search bar, product selection, shopping list and maps. Trying to make the design consistent and flow throughout the screen with a focused hierarchy that clearly displayed what areas should be interacted with. The moderated usability test was now ready to be implemented so considering what questions and areas we wanted to focus on, the test was designed to bring to light – e.g., easy navigation, etc.
Low-Fidelity Prototype:
: Case Study: Grocery Locator
The user flow begins on the homepage and could go one of a few different ways, but for our planned usability test the intended method is to begin with the search bar, typing in the desired product. Scrolling through to find the exact item (image, price, name) once selected the ‘product page’ will be displayed. From here the user should press the ‘add’ button to automatically save to their shopping list, with a confirmation screen appearing as recognition. A user can then view this by selecting the list button at the base of the screen (rectangle) and then select the map in the top corner to view it in-store. After completing the usability test, changes were made to the prototype based on user feedback. Changing the location of features, wording, adding screens and changing user pathways.
Usability Study Parameters:
- Study Type – Moderated Usability Study
- Location – Perth, WA
- Participants – 3 people
- Length – 10-20mins
Usability Study Findings:
During the usability study it was discovered that users faced challenges with the map and location descriptions.
In-store map lacks clarity:
- Users want the map icon on the list to be relocated to avoid confusion
- Users want the map to better labeled
Confusing location description:
- Users want descriptions to be rephrased into simpler language
- Users could benefit from having visual cues and indicators on product location
Can’t view yourself on the map:
- Users want to be able to view themselves on the in-store map for better self-orientation and real-time guidance
Refining The Design:
Mockups:
Due to the time constraints and lack of available participants, a second usability test was not conducted although I do acknowledge that in the real-world this wouldn’t be the best practice.
The goal of the mockups was to produce a coloured version of the wireframes with icons, typography and establishing the brands overall base look (colours, etc.), producing something clear and consistent that flowed with ease.
The changes in the mockup were very minor and therefore quite difficult to show as much of it was more consistency alterations such as adjusting colours, sizes and spacing to match on every screen.
A screen was added to show an image of the product as some users may face difficulty spotting specific products on a shelf, especially if they’ve never purchased it before so this would help them find it faster.
Other changes were also made for better functionality, so some pages can scroll both horizontally and vertically now for a more realistic feel.
High-Fidelity Prototype:
Going off of the first usability test in the beginning stages of the mobile app, frustrations were present at the initial pathway the screen took once a user put in their stores location. I initially took a user to add to their shopping list, but users said that they’d prefer that it took them straight the to navigation map so this alteration was made.
A brief explanation of this user flow is first tapping the map icon at the bottom of the screen. This will take the user to a search screen where they can locate their store on a global map. Once the location has been selected, it will open the navigation in-store map right away with all the users listed items located. Pressing the arrow in the top, left-hand corner will take the user to their list where they can add, make changes and tick items off as they please.
Accessibility Considerations:
Chat-bot:
The implementation of a chat-bot was designed to offer a conversation like feel for users who have specific questions (allergens, etc.) and those who may face a language barrier with an in-built translator
Instructions:
Written instructions that direct users to a location was implemented for those who may have trouble navigating with a map and require a more direct approach
Audio:
For those who may have visual impairments an audio option was implemented so directions and products could be read aloud to them
Going Forwards:
Takeaways:
Impact:
The impact this design had was mostly positive with participants finding the design clever and something that they would possibly use. Overall they found the design to be ‘cool’, with a simple navigation.
Learnings:
Throughout this project, I learned so much; including every step of the UX Design process. I learned how important it is not to skip any steps as they are all vital to obtaining the best outcome and that rushing doesn’t make for the best most efficient design.
Next Steps:
Second Usability Test:
Seeing as I was unable to conduct a second usability test, I would definitely do this going forwards to make sure the design doesn’t have any major hindrances.
Participants Diversity:
Due to limited access most participants were of a similar age during the initial usability test, but I think it could really benefit from a more diverse range of ages to see how good the navigation is to those who may be less tech-savvy.
Advice:
Seeing as I didn’t have anyone in the field to share my design with to get to get constructive criticism from, it’d be great to get another UX Designer to look at it for their opinion and advice.
Expand Screens:
I believe the design and my skills could also really benefit from creating the designs on different screen sizes to see how adaptable it is to different phones.
