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

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?

Participants

5 participants
5 female, all aged 18 - 58 years old
2 participants reported not being familiar with technology and/or apps

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.

Lo-fi prototype

This is the protoype that was tested during the usability study

See 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.

See prototype

My process

Click the button bellow to see my in-depth research and design process.

See Process