Project overview
Course
Google UX Design Professional Certificate
Duration
July 2024 to November 2024
My role
UX researcher and UX designer
The problem
Users struggle to find products in a (fictional) local grocery store.
The goal
Design an app for a local grocery store that helps shoppers locate products as they shop in person.
User research and audit
I conducted semi-structured interviews to 11 people through zoom. My findings suggested that some users greatly enjoyed their time at the grocery store, others actively disliked it, there were those who felt more or less neutral about it, and others were mostly worried about time constraints while shopping.
Furthermore, I analyzed similar applications in a competitive audit.
Starting the design
I designed a mobile application based on the findings from the user study and competitive audit.
Big picture storyboard
Close-up storyboard
Paper wireframes
Early designs of the application.
Homepage
In the home screen I chose elements that would help users quickly access items of interest (featured, previously purchased, and savings). Also, they can clearly see the search bar, and language options which they are likely to need. Later a lower menu was added too.
Search results
In the search results screen I decided to add information about each item as well as its location inside the store so users can quickly find it. Additionally, users can filter and/or sort their search and the list of search results.
Store map
Users can visually find their desired item inside the store and easily make their way towards it. The users can use hand gestures to zoom in and out of the map. There is a small floating window with information of the item for reference.
Scanner
Once they have found their item, users can then scan the barcode to add it to their cart. There are clear instructions for the users on top as well as a link in case they can’t scan the barcode. In the link they can input the item’s inventory number manually.
Shopping cart
In the shopping cart screen I added the standard features that users would need while trying to preserve a minimalist and pleasant appearance. A lower menu was added later.
Payment
Users can pay for their items in the app, see a summary of their purchase, and finally a confirmation screen. This sequence should be familiar and reassuring for the users.
Receipt
Users can see a receipt with information about their purchase. They can show the QR code to a staff member to provide proof and clarification of their purchase. The receipt stays saved in the app for later reference.
Digital wireframes
Homepage.
Product search, store map, and scanner.
Shopping cart, payment method, order summary, confirmation, and receipt.
Usability study
1
Research questions
-
How long does it take to shop for items using the app vs without it?
-
How long does it take to pay for items using the app vs without it?
-
What is the user experience while finding items using the app vs without it?
-
What is the user experience during checkout using the app vs without it?
-
What is the overall user experience while using the app?
2
Participants
-
5 participants
-
5 female, all aged 18 - 58 years old
-
2 participants reported not being familiar with technology and/or apps
3
Methodology
-
1 hour
-
Location: Ensenada, Mexico, at a local supermarket
-
Moderated usability study
-
Participants searched and paid for a product with and without the prototype.
Mockups Spanish Version
Mockups English Version
High-fi prototype
An app that facilitates in-store shopping
Through the application users can search for a product at the supermarket, visually find it in the store map, scan the product to add it to their shopping cart, pay for it, and view their receipt. It's available in two languages and more can be added.