Goal
Grocery shopping can be a daunting task for wheelchair users, presenting unique challenges that able-bodied individuals may not encounter. Finding an accessible store, navigating crowded aisles, and reaching items on high shelves can be frustrating and time-consuming. The simple act of acquiring groceries, a fundamental human need, can transform into a tedious and demoralizing experience.
While technology has revolutionized grocery shopping, offering convenient home delivery options, there's an undeniable value in venturing out and engaging with the community. Shopping for your own groceries not only fosters independence but also provides opportunities for social interaction and a sense of normalcy.
GroceryPal, an innovative AR (Augmented Reality) grocery shopping app, aims to transform this often arduous task into an enjoyable and empowering experience.
About the project
GroceryPal, an innovative AR (Augmented Reality) grocery shopping app, revolutionizes the shopping experience by seamlessly integrating list-making, meal planning, and in-store navigation. With AR guidance, users can effortlessly locate items, compare products, and receive real-time support, transforming grocery shopping into an engaging and interactive adventure.
Grocerypal
Project process
"Millions of people around the world are physically disabled, which deserve better attention and awareness"
by Sarah Harvard
Research
I set up a google survey, and received 11 responses.
A significant portion of the population, approximately 50%, experiences disabilities or limited access to products, making grocery shopping a challenge.
On average, individuals spend less than an hour in a store per shopping trip, with most visits occurring once a week. While in-store shopping remains the preferred method, individuals with disabilities often require more time to navigate and complete their purchases.
However, shopping for your groceries increases your independence. It also allows you to socialize.
Google survey
Research
After conducting the screener survey, I identified 5 participants for the interviews. Their responses have been arranged on the right, starting from individuals with more significant disabilities to those with less significant disabilities. It was intriguing to discover that even individuals without disabilities encountered some of the same challenges as those with disabilities.
Empathize
User interview
Following the user interviews, I constructed three empathy maps to visually represent the attitudes and behaviors of users with varying levels of disability.
1. Sensory Immersion: What would the user encounter visually, audibly, and tactilely while shopping for groceries?
2. Verbal and Behavioral Cues: What verbal and non-verbal cues might the user exhibit while navigating the grocery store?
3. Pain Points and Fears: What obstacles or apprehensions does the user face when grocery shopping?
4. Anticipated Gains: What benefits or positive outcomes might the user experience when shopping for groceries?
Empathy mapping
By synthesizing the insights from the three empathy maps, I have developed three user personas representing individuals with varying levels of disability: Amy, representing the high-level disability user group, Joanna, representing the mid-level disability user group, and Kelly, representing the low-level disability user group. Each persona embodies unique challenges encountered during grocery shopping,
Amy, Joanna and Kelly
Persona
Journey map
"To visualize the grocery shopping experience for individuals with disabilities, I have created a journey map centered on Amy, a representative persona. This journey map encompasses four key stages: awareness, product search and selection, checkout,
Individuals with disabilities often require more time to complete grocery shopping, which may lead to a reduced frequency of shopping trips.
User interview conclusion
User flow 3: AR shopping tour
Scenario 1: A user decides to make changes to their shopping list, removing or adding items as needed.
Scenario 2: Standing in the grocery aisle, a user wants to compare similar products to make an informed decision.
Scenario 3: To stay informed about product availability and promotions while shopping, a user activates the in-store product alerts feature.
Scenario 1: A user decides to add items to their shopping list, seamlessly navigating product categories and browsing through a wide selection of items.
Scenario 2: Intrigued by the recommended recipes provided by the designated supermarket, a user decides to integrate these recipe suggestions into their shopping list.
Scenario 3: Having overlooked the location setup during the onboarding process, a user now seeks to designate a preferred supermarket.
User flow 2: Shopping list
Scenario 1: A first-time user discovers the app and embarks on a seamless registration process, creating an account and providing essential information.
Scenario 2: An existing user, having unintentionally deleted the app, attempts to log in upon reinstalling.
Scenario 3: A user seeking immediate access to the app's shopping features chooses to proceed as a guest.
User flow 1: Account
Define
Informed by the comprehensive data gathered, I embarked on a process of iterative hand-drawn sketches, refining my ideas and solidifying the concept before diving into wireframing and prototyping. The act of sketching allowed me to visualize and explore the design without getting bogged down in the minutiae of visual details.
Drop down the ideas
Sketch
After finalizing the hand-drawn sketches, I transitioned to crafting high-fidelity wireframes using Sketch App and InVision Studio for further prototype testing. The Sketch wireframe kit facilitated rapid prototyping, enabling me to swiftly develop and test the user interface elements.
The wireframe is divided into two main sections: the primary shopping area where users can browse, select, and add items to their lists, and the AR shopping tour section that provides real-time in-store guidance, optimizing route planning, time management, and product information accessibility.
Wireframe to Design
Ideate
Style guide
Following the completion of the mood board, I delved into the creation of tokens to establish comprehensive design guidelines. In crafting an AR color palette, it was crucial to carefully consider color combinations that would ensure the colors stand out prominently against the background.
Tokens
With the wireframes and workflows finalized, I embarked on the mood board creation process to gather design inspiration. I utilized Milanote to effectively organize and visualize my design inspiration.
Moodboard
Product demo
The Onboarding and Build Shopping List micro-interactions serve as the primary pages and steps before transitioning into the AR Shopping Tour.
The in-store AR assistant extends its assistance to all users, regardless of their abilities. It seamlessly guides users through the store, providing directions, product comparisons, assistance calls, item delivery to the counter, and access to personalized product and store information.
Enhancing the Customer Journey: From Pre-Shopping to In-Store Satisfaction
Evaluation
I conducted moderated remote and in-person user testing sessions with five participants to evaluate the features.
During the testing, I asked users to complete six tasks and encouraged them to think aloud, verbalizing their thoughts and experiences throughout the process.
Based on my observations and findings, five iterations were identified for further refinement.
Usability testing
Trial and error
Improve the AR support
2 participants initially struggled to locate the support button during testing. Once I guided them to its position and explained its placement for easy thumb access, they all found it to be quite convenient. To further enhance its visibility, I will increase the color contrast and add the word 'Support' below the icon.
Improve the AR Alert and provide more customizations
During user testing, 2 participants encountered difficulties locating the alert button. One suggested having the alert pre-enabled from the start, while the other expressed confusion regarding the icon's design.
Additionally, some participants proposed customizing AR alerts to allow users to select the specific information they wish to receive.
Improve the AR Compare interaction
While only 1 participant encountered difficulty in selecting items during the testing, I recognize that in a real-world setting, users will not have the benefit of guided assistance.
To address this, I will implement clearer instructions that explicitly inform users of the double-tap action required to select items for comparison.
Fun fact
The inspiration for GroceryPal ignited during my fascination with the Netflix series Queer Eye. In particular, one episode in season 4 resonated deeply with me. It featured a man who, after becoming paralyzed, had to navigate life from a wheelchair. Suddenly, even the most mundane tasks, like reaching for groceries on store shelves, became insurmountable challenges. This stark realization – that something as ordinary as grocery shopping could become an obstacle – sparked my desire to create a solution.