Product Finder

Where

Amsterdam, The Netherlands

What

Mobile App

Why

Google UX Design Course, Portfolio Project

Role

Designer, Researcher

When

Nov. 2025 - Jan. 2026

QUICK OVERVIEW

01. The Problem

Supermarket shoppers waste time searching for products and leave the store frustrated without having found everything.

02. The Solution

An in-app product finder that provides visitors with a route past all the products they need.

03. The Design of the Most important screens

A. Homepage

  • The search bar is deliberately placed at the top as a primary action: users enter the app with a purpose.

  • Browse, Favorites and Shopping list shortcuts provide direct access to the most used functions without searching.

B. Store map

  • Each department has its own color for quick visual orientation; no need to read text to understand the layout.

  • The layout mirrors the actual floor plan, minimizing mental mapping for the user.

C. Shopping list

  • The progress bar gives users an immediate sense of control over how many products they've found.

  • Checked-off products remain visible instead of disappearing, so users can keep overseeing their full list.

D. Shopping route

  • When a user creates a shopping list, the app automatically generates an optimal walking route through the store.

  • Pins with product images make it instantly clear where each product is located, without reading product names.

Want to go in deep?

Full case study

00. Before we start

This project originated from the Google UX Design course on Coursera, where designing a product finder app for supermarket shoppers was one of the suggested prompts. Because the project brief was predefined, no prior user research was conducted. The painpoints and personas in this case study are therefore assumption-based proto-personas rather than research-validated. However, both rounds of usability testing were conducted with real participants, grounding the design iterations in genuine user feedback.

01. Overview

The project

This project is a grocery store product finder app designed to help shoppers quickly locate items in a physical supermarket. Users can search for products, add them to a shopping list, and generate an efficient in-store route. The app aims to reduce frustration and save time, especially when shopping in unfamiliar stores.

02. Problem statement

The Problem

Customers often struggle to find products in physical supermarkets. This can lead to frustration, longer shopping hours, and a less pleasant shopping experience.

The Goal

The goal of this project is to create a digital solution that allows customers to easily find products in a physical supermarket, resulting in a faster and more enjoyable shopping experience.

03. Painpoints & user personas

01. Time pressure makes grocery shopping stressful

Shoppers with busy schedules experience grocery shopping as a stressful chore rather than a routine task. When they cannot quickly locate products, small inefficiencies add up and turn a 20-minute errand into a frustrating hour-long ordeal.

02. Unfamiliar store layouts cause confusion and wasted time

Supermarket layouts vary between locations and chains, and products are regularly moved or reorganized. Shoppers who visit a store infrequently or for the first time struggle to orient themselves, often walking through the entire store multiple times to find what they need.

03. Managing a shopping list while navigating a store is mentally taxing

Shoppers rely on mental lists, notes apps, or paper lists that are disconnected from the physical store. Switching between a list and the store environment causes them to lose track of items, forget products, or backtrack through aisles they have already visited.

04. No clear way to find specific or unfamiliar products

When shoppers are looking for a specific brand, a less common product, or an item they have never bought before, there is no reliable in-store system to help them. Asking store staff is seen as a last resort, and aisle signs are often too broad to be useful.


Maya Patel

Age: 22

Education: Bachelor's student in Communication

Hometown: Utrecht, the Netherlands

Family: Lives alone, originally from a British-Indian family

Occupation: Part-time barista (24 hours/week) alongside her studies

"I just want to grab what I need and get out. Every minute I spend wandering around is a minute I don't have."

Goals

  • Complete her grocery shopping as quickly and efficiently as possible

  • Plan her meals for the week without spending too much time or money in the store

  • Find specific products without having to ask for help

Frustrations

  • Wastes time walking back and forth through the store because she cannot find products quickly

  • Her go-to supermarket regularly rearranges its layout, making even familiar shopping trips feel confusing

  • Juggling a grocery list on her phone while trying to navigate the store feels disorganized and causes her to forget items

Story

Maya has a packed schedule between lectures, café shifts, and maintaining a social life. She does her groceries once a week, usually on Wednesday evenings, and tries to get in and out quickly. Shopping under time pressure makes the experience stressful, especially when she has to constantly check her list while navigating the store. She often loses track of items, forgets things, or backtracks through aisles, turning what should be a quick trip into a frustrating task.


Bernard Osei

Age: 47

Education: Vocational degree in logistics management

Hometown: Amsterdam, the Netherlands (originally from Ghana)

Family: Married, two children aged 12 and 15

Occupation: Warehouse team lead at a distribution company

"I want to enjoy shopping for my family, but when I cannot find what I need I just feel lost and give up."

Goals

  • Do the weekly family shop efficiently so he can spend his free time with his family

  • Find products that match his family's dietary preferences, including specific international or cultural products

  • Feel confident navigating any supermarket, even one he does not visit regularly

Frustrations

  • When he visits a different supermarket branch or a new store, he struggles to find his way around and often leaves without everything on his list

  • Broad aisle signs like "International" or "World cuisine" are not specific enough to help him find what he actually needs

  • He feels uncomfortable asking staff for help and would prefer an independent way to locate products

Story

Bernard works long shifts and values his weekends with family. He usually does the weekly grocery run on Saturday mornings. While he typically shops at his local supermarket, he sometimes visits a larger branch for specific Ghanaian ingredients. These trips are frustrating because the layout is unfamiliar and signage is unclear, causing him to search the entire store or leave without items. He wishes he could simply search for a product and know exactly where to go.

04. How might we

How might we 01

How might we help time-pressured shoppers complete their grocery run in the most efficient route possible?

Based on painpoint 01: Time pressure makes grocery shopping stressful

How might we 02

How might we make navigating an unfamiliar supermarket feel as easy as shopping in a store you visit every week?

Based on painpoint 02: Unfamiliar store layouts cause confusion and wasted time

How might we 03

How might we reduce the mental effort of managing a shopping list while physically moving through a store?

Based on painpoint 03: Managing a shopping list while navigating a store is mentally taxing

How might we 04

How might we help shoppers locate a specific product quickly, without needing to ask store staff or read every aisle sign?

Based on painpoint 04: No clear way to find specific or unfamiliar products

05. User story & journey

User story

“As a busy student with limited time, I want to quickly find products and create an efficient shopping route, so that I can complete my grocery shopping without wasting time searching through the store.”


User story

“As a parent doing weekly family groceries in different supermarkets, I want to search for specific products and see exactly where they are located, so that I can shop confidently and avoid walking through the entire store.”

06. Paper Wireframes

Method

For each screen I sketched five variations and combined the strongest elements into a single wireframe. Shown below are 2 examples of this method for the shopping list and map pages.

Shopping list page


Map page

07. Lo-fi prototype

Method

The paper wireframes were transformed into digital wireframes using Figma.

Homepage & Product search page

Products list page & Product info page

Shopping list page & map page

08. Lo-fi usability study & improvements

Low-fidelity usability study

Method: Moderated usability study

Participants: 3 (2 male, 1 female, ages 25-63)

Session duration: 5-15 minutes

Research questions:

  1. What can we learn from the user flow, or the steps that users take to create an in-store shopping route?

  2. Are there parts of the user flow where users get stuck? 

  3. Are there more features that users would like to see included in the app?

  4. Do users think the app is easy or difficult to use?

Affinity diagram

Observations from the recorded sessions were organized into an affinity diagram to identify patterns across participants.


Actionable insights & Improvements

Insight 01: Users get stuck when trying to create or find an in-store route

Users struggle to understand how to generate a shopping route, especially for the entire shopping list, because the “View route” action is not clearly visible or self-explanatory.

  • Action: Users need a clear and visible way to create an in-store route for their entire shopping list.

Improvements

The original “View route” button was small and easy to miss. It was redesigned into a larger sticky “Generate shopping route” button to improve visibility, emphasize the primary action, and better communicate what the feature does.


Insight 02: Key actions are missed when clickable elements are not clearly indicated

Users are unsure what they can interact with in the interface, such as whether the logo is clickable or where to tap to continue.

  • Action: Users need clearer visual cues to understand which elements are clickable and how to move through the app.

Improvements

Because this is a low-fidelity prototype, it can be difficult to distinguish which elements are clickable, as the design currently uses only grayscale visuals. Therefore, this insight was primarily addressed in the high-fidelity prototype, where clearer visual cues were introduced. Additionally, the logo in the top navigation bar was made clickable in the low-fidelity prototype to improve usability and align with existing app conventions and industry standards.


Insight 03: Important information is overlooked when it requires scrolling

Users often miss essential information when it is placed lower on the screen because they do not naturally scroll, especially on product pages.

  • Action: Users need essential product and navigation information to appear at the top of the screen without requiring scrolling.

Improvements

Product information is more important than similar products on the product page. Therefore, the product information section was moved higher on the page so it sits closer to the core product details. The similar products section was moved further down, as it is less directly related to the product itself. This change reduces the need for users to scroll and makes key product information easier to access.


Insight 04: Users want guidance when using the app for the first time

Users expressed a need for in-app guidance, such as an information button or explanation of how the app works, particularly for understanding unique features like in-store routing.

  • Action: Users need simple in-app guidance to understand how the app works, especially for unique features like in-store navigation.

Insight 05: Language options are essential for accessibility and confidence

Users want the ability to change the app language, as language barriers reduce confidence and clarity.

  • Action: Users need the ability to change the app language to feel confident and comfortable using the app in-store.

Improvements

An account page was introduced, accessible by tapping the profile picture. On this page, users can manage their profile details and adjust app preferences. To address insights 4 and 5, a Language page and a Support & Info page were added. These allow users to change their language preferences and access information about how the app works, making the app more accessible for users.

09. Hi-fi prototype

Based on the lo-fi usability study insights, the designs were refined into a high-fidelity prototype. Color, typography, and real product imagery were introduced to create a realistic representation of the final product.

Design system

To maintain consistency and speed up the design process, a design system was created as the foundation for the high-fidelity prototype. The system covers, among other things, typography, colors, icons, and buttons, ensuring every screen follows the same visual language.


The high-fidelity mockups below illustrate the main user flow, from opening the app on the home screen to generating an optimized in-store shopping route. Each screen reflects the design decisions and improvements made following the lo-fi usability study.

Homepage

Product categories page

Product list page

Product info page

Shopping list page

Shopping list route page

10. hi-fi usability study & improvements

High-fidelity usability study

Method: Unmoderated usability study (survey)

Participants: 4

Session duration: 5-15 minutes

Research questions:

  1. What can we learn from the user flow, or the steps that users take to create an in-store shopping route?

  2. Are there parts of the user flow where users get stuck? 

  3. Are there more features that users would like to see included in the app?

  4. Do users think the app is easy or difficult to use?

Affinity diagram


Actionable insights & Improvements

Insight 01: The map lacks visual clarity, making it difficult to locate products in-store

Users struggle to understand where their products are on the map because there is no color coding per department, no "you are here" indicator, and no full screen view to properly orient themselves.

  • Action: Users need a clearer, more informative map with department color coding, a current location indicator, and a full screen view option.

Improvements

The map now includes labeled aisles, and each section is color-coded to match the product categories (e.g., green for fruits, vegetables, and salads; light blue for frozen items; and yellow for pasta and rice). This helps users quickly understand the store layout at a glance.

Pins were also made more distinctive by adding small product images inside each pin. Items that have already been collected are outlined in green, while items still on the list are outlined in black. Additionally, an expand button was added to the bottom-right corner of the map, allowing users to enlarge the view and see the full store layout and route at once.


Insight 02: Users are confused about why they need to select items again in the shopping list

After adding products to their shopping list, users do not understand why they need to select items again before generating a route, as this step feels redundant and unexplained.

  • Action: Users need clearer guidance or visual feedback that explains the purpose of selecting items before generating a shopping route.

Improvements

To make it clearer which products have already been collected, the product image and description are displayed in light gray once an item is checked off. This makes it easier and faster to distinguish between collected and remaining items. Additionally, the green indicator dot was replaced with a checkmark to provide a clearer visual confirmation that a product has been collected.


Insight 03: The "more information" section is not clearly interactive

Users expect the "more information" text on the product page to be fully tappable, but only the arrow on the right side responds to interaction, creating confusion about what is clickable.

  • Action: Users need the entire "more information" row to be interactive, not just the arrow icon.

Insight 04: The ‘+ add’ button does not clearly communicate its action

The ‘+ add’ icon alone is not engaging or descriptive enough for users to immediately understand that tapping it adds the product to their shopping list.

  • Action: Users need a clearly labeled button that communicates the action of adding a product to the shopping list.

Improvements

The original “+ Add” button was replaced with a “+ Add to list” button to more clearly indicate where the product will be added. Additionally, the separate “More information” and arrow-down buttons were combined into one full-width button. This change makes it clearer and easier for users to access additional product information.

11. Learnings

What went well?

Looking back on this project, I am proud of what I was able to create as my first UX design project. Starting from scratch, with no prior experience in UX, and working through the full design process from research and ideation to a tested, high-fidelity prototype felt like a significant achievement.

One thing I am particularly proud of is the iterative process I followed. Rather than jumping straight to a final design, I took the time to test my lo-fi prototype with real participants, synthesize the findings into actionable insights, and carry those improvements into the high-fidelity design. Running two complete usability studies and actually using the results to inform design decisions, gave the final product a foundation that goes beyond personal preference.

The final design reflects not just my own vision, but the feedback of real users who interacted with the prototype at two different stages of the process.

What would i do differently?

There are a few things I would approach differently if I were to do this project again. The most significant is the absence of real user research at the start of the process. Because this project originated from a predefined course brief rather than a real-world problem, conducting prior user research was not a natural starting point. However, in a professional context, I would always begin by speaking to real users before defining pain points or creating personas, rather than relying on assumption-based proto-personas as I did here.

I would also aim to include more participants in each round of usability testing. With three participants in the lo-fi study and four in the hi-fi study, the sample sizes fell below the commonly recommended minimum of five participants per round. While the studies still surfaced valuable insights, a larger group would have provided more reliable and representative findings.

Finally, if this had been a real project for an actual supermarket chain, I would have ensured that the usability study participants were existing customers of that specific supermarket. Testing with users who are already familiar with the supermarket would have produced more relevant and actionable feedback than testing with general supermarket shoppers.

Next steps

If this project were to continue, the most important next step would be to validate the assumptions that currently underlie the personas and pain points. This would mean conducting real user interviews with supermarket shoppers to confirm whether the identified pain points accurately reflect their experiences, and refining the personas based on actual data rather than assumptions.

A natural follow-up would also be to test the final high-fidelity prototype with a larger and more targeted group of participants, specifically regular shoppers of the supermarket the app would be designed for. This would help surface any remaining usability issues that the current studies may have missed due to the limited sample sizes.

Finally, if the app were to move towards development, designing for additional screen sizes such as tablet would be a logical next step, ensuring the experience remains consistent across devices.

Want to explore the prototype yourself?