sHOP-sMART
Grocery app that helps streamline
users shopping experience
shopping list creation, in-store navigation, and suggestions for alternative products.
Project Overview
The challenge
Nearly half of the UK do their food shopping mostly in store (48%, Statista.com). Inefficiency in navigating the store and inability to locate certain ingredients can lead to a time consuming and frustrating experience for shoppers.
The goal
Provide shoppers with a simple, customised and intuitive way to navigate stores, create shopping lists and instantly answer any frequent questions they have about a stores inventory.
Responsibilities
Conduct user research
Define the problem and provide insights to inform the ideation phase
Define personas, user journeys, empathy maps, and user flows
Visual design of low-fi and high-fi wireframe, prototype and user testing
Understanding the user
User research
Interviews
Conducted interviews with a diverse range of users from different backgrounds and age groups. The goal was to understand their typical food shopping experiences and decision-making processes.
-
Do you ever create shopping lists in advance of your grocery trips?
-
How frustrating is it to arrive at the store and find out an item on your list is unavailable?
-
What benefits do you see in a grocery shopping app that could automatically generate a shopping list based on your chosen recipes?
-
How likely are you to use alternative products like store brands?
-
What are your biggest pain points when it comes to grocery shopping?
User trips
Observed older users navigating the grocery store first-hand. These users:
-
Used pre-written shopping lists.
-
Got recipes from cookbooks.
-
Often did not know if the store stocked certain ingredients, leading to prolonged searches for unique items.
-
Found staff to be unhelpful at times, as they were either unsure about the availability of certain items or unaware of what the products were, and couldn't suggest alternatives.
Key Insights
The research revealed several key insights:
-
Users would benefit from having their shopping list pre-checked and made aware of what items were available in store and what alternatives could be offered for unavailable items
-
Recipe books provide a list of ingredients however products in store are often advertised by their brand name making it harder to identify correct ingredients or alternative
-
Lack of staff walking the aisle meant when a user had a question about store inventory it could be difficult to find an employee able to help.
Pain Points
User Persona
User Journey
The Design
Wire frames
Some initial paper wireframes outlining the user flow through the app. These iterations of each screen ensured elements that were used in the digital wireframes were best suited to tackle paint points and provide ease of use
Digital wireframes
To translate my initial paper wireframes into a digital format, I adopted the Material 3 design system. Google's design system provided a library of mobile-ready and fully accessible UI components, which significantly streamlined the design iteration process.
I maintained a consistent green colour scheme throughout the wireframes, aligning with the app's branding while also strategically using it to highlight key call-to-action elements. This intentional use of colour effectively guides users through the app's functionalities.
Low-fidelity prototype
I created a low-fidelity prototype from the user flow diagram and wireframes to test functionality before incorporating it into the final design and to ensure accessibility for end-users. These would be used for the first round of usability testing
Usability study: findings
The usability study provided insights into user behaviour, participants demonstrated a clear understanding of the intended user flow, with positive feedback on the prominent call-to-action buttons and color-coded navigation elements. However, the study also highlighted a need for additional features to enhance user engagement and encourage continued app usage.
Refining the design
Usability study: Actions
Based on the usability study, design modifications were implemented. These included the integration of a carousel system to offer multiple product alternatives and a redesign of the navigation bar to enhance visual hierarchy and user experience.
Smaller changes were made based on usability testing to improve functionality. Text now indicates how many items remain to be bought, the highlighting square on the aisle will now flash to act as a more prominent indicator and the skip item button has been replaced as users questioned when they would actually need this feature and would instead rather have a fast method to review their shopping list.
High-fidelity prototype
After finalising the low-fidelity wireframes, I worked on creating the final designs with the goal of making them simple and intuitive. The main colour theme I used was green to evoke an image of health and calmness
View Prototype
Accessibility considerations
Going forward
Impact
-
The design effectively fulfills its purpose of streamlining the food shopping experience through an intuitive interface and visually appealing aesthetics. Positive feedback, such as 'This would make my shopping so much easier,' validates the design's success in meeting user needs.
What I learned
-
This project emphasises the critical role of user-centered design in creating effective digital experiences. By prioritising user needs and feedback throughout the design process, I was able to develop a solution that is both intuitive and visually appealing.
Next Steps
-
Obtain UX/UI feedback from designers with more experience in the field to improve design.
-
When I have documented all feedback that was provided, I will make the necessary design updates in order to improve the app’s overall experience.
-
Create a cross-platform responsive design. The goal is to build the same experience for all users, no matter what type of device they are using.