Grocery Go Go
An App that enhances your grocery shopping experience.
UX & UI Design
January 2025
Summary:
I created a dedicated mobile app called Grocery Go Go. It’s an app that assists with in-person grocery shopping, with special emphasis on users with food allergies and limited free time. I empathized, defined user needs, ideated solutions, created prototypes, and tested my designs. The result is an intuitive, incredibly useful app that is beneficial for all grocery shoppers.
Timeline:
January, 2025
Role:
Lead UX/UI Designer
Skills:
UX Research
Lo-Fi Prototyping
Hi-Fi Prototyping
Design Systems
Tools:
Figma
Design Challenge:
Design an app for a local grocery store that helps shoppers locate products as they shop in person.
My goal:
Help people with food allergies, preferences, diets, and limited time efficiently locate groceries.
My Role
Lead UX Designer
I lead, managed, researched, and designed this entire project. With the help of usability study participants, I created a useful app for grocery shoppers everywhere.
Responsibilities
User Research: storyboards, user personas, journeys and flows. Additionally, I completed a competitor audit and two usability studies.
I also created wireframes, mockups, and lo- and hi-fi prototypes.
Paper Wireframes
I created five drafts of wireframes for the app, including “must-haves” and iterating on different ideas for navigation with user ease as my main priority.
Grocery Go
Grocery Go
Design Solution:
Meet Grocery Go Go, an app that locates and leads you to each item on your grocery list!
Wireframes
Paper Wireframes: Desktop
Paper Wireframes: Mobile
Paper Wireframes: Tablet
Digital Wireframes: Desktop
These digital desktop wireframes include a view above and below the fold and crucial user journey screens for checking off items within a grocery list.
Digital Wireframes: All Screens
I created digital wireframes for a desktop, a tablet, and a mobile device utilizing Gestalt Principles such as similarity, proximity, and common region. I also utilized columns and gutter width on Figma to accurately resize the dimensions of assets for each screen size.
Desktop Mockup
Responsive Webb App Mockup
I utilized a navigation bar on the home screen and a hamburger menu on the following pages to save space and give the user room to explore the web app’s functions.
Hi-Fi Prototype
Style Guide
IA
Accessibility Considerations
Initial Focus
Concision was key as I utilized space and color to enhance clarity on user actions and product functions.
Headings
I used bold, large headings for the titles of the pages, sections, and the logo. This enhances and provides a clear understanding of information architecture.
Navigation Bar
With a navigation bar on the desktop and a hamburger menu on the responsive web app, I thoughtfully utilized each screen size and had more room to accentuate the product focal points.
What I Learned
Information Architecture
Planning responsive websites is an important way to enhance the ux and create an intricate product structure based on an understanding of its purpose and organization.
Hierarchical Model
It’s important to organize information by importance so users feel comfortable navigating the product on their own. This will make users want to explore and continue using a product they understand.
Design Systems
Creating a design system saves so much time and creates consistency within the design. I learned lots of Figma shortcuts and incorporated components to increase efficiency.
Next Steps:
1. Usability Study
Conduct a usability study with my hi- prototype, obtaining feedback from at least 5 participants from varyingbackgrounds.
2. Insights
Utilize the usability study feedback to develop insights on areas of improvement. Evaluate the priority of each, thenimplementthemasneededtore nethedesigns.
Responsive Website & Web App
