Case Study 1: Sprigs Mobile App

Case Study

Project Overview

The product:  An app for a fictional local grocery store called “Sprigs Grocery” that helps shoppers locate products as they shop in person

Project duration: January - March 2025

Role: UX Designer, Researcher

Responsibilities:

  • Define problems, user personas, user journeys, empathy maps, user flows
  • Conduct user research
  • Design paper and digital wireframes, mockups, low and high-fidelity prototyping and user testing
  • Design for end user and accessibility
View Case Study Slide Deck

The Challenge

  • The Problem

    Shopping in person in grocery stores can be frustrating and time-consuming because it can be difficult to find items and not knowing the layout of a store can be annoying.

  • The Goal

    Help users grocery shop with ease, saving time and money

User Research Summary

To begin to understand the users, I interviewed users who grocery shop in person at least once a week.

Assumptions: Grocery shopping in person can be frustrating and time-consuming. 

Findings: Some people prefer in-store grocery shopping and some enjoy grocery shopping.

User Research: Pain Points

  • Pain Point 1

    Not being able to find an item in the grocery store

  • Pain Point 2

    An item on your grocery list is out of stock when you get to grocery store

  • Pain Point 3

    Being unfamiliar with the organization of items in grocery store

Understanding The User

Persona: Becky

Problem statement:

Becky is a busy mom who needs to grocery shop in-store efficiently because she has limited free time.

Goals:

To grocery ship quickly, stay on budget, feed her family mostly home-cooked meals that are easy and healthy. Stick to a pre-planned grocery list.

Frustrations:

Shopping in-store can be time-consuming. Not being able to find an item or it being out of stock when getting to the store.

User Journey Map

Starting the Design

After completing steps to understand the user, I started with paper wireframes to sketch out multiple ideas for the layout of the main elements of the home screen

Starting the Design

Paper Wireframes

I wanted search to be front and center as it is one of the main features of the app, and also wanted nav bar icons/text at the bottom for easy navigation and accessibility.

The main features I wanted to highlight were Search, Store Map and Lists

Digital Wireframes

After finalizing the paper wireframe, I created digital wireframes in Figma

Search Results Screen

  • Search bar near top - so it is easy to see/use
  • Search results below with item image and text

Search Result Item Detail Screen

Next in the user flow would be clicking on an individual search result, to the item detail screen.

  • Clearly show item details and store map below - shows location of item in the store to help users locate item efficiently

List Screen

Another main feature of the app is "lists". Viewing a grocery list while shopping in store to see items on the store map

starting the design

Low-Fidelity Prototype

After creating all of the mockup screens, it was time to add interactivity and text to create a low-fidelity prototype. I focused on two main user flows:

  • Search
  • Shop my list
View Prototype

Usability Studies

After creating the prototype, I completed two rounds of usability studies. The first study tested the low-fidelity prototype and the second tested the high-fidelity prototype.

I found that users liked the search and shop my list features and found them to be helpful.

There were a couple of small things that could improve overall usability of the app as well as the features.

Research PlanResearch Presentation

Round 1 Findings

  • 1

    Users appreciate the shop my list feature and search

  • 2

    Users need Search bar easily accessible from more than home screen

  • 3

    Users need shop my list flow to be more efficient and clear

Round 2 Findings

  • 1

    Users appreciate the shop my list feature and search and find them easy to use 

  • 2

    Users found search and map could be more clear/straightforward

  • 3

    Users would like lists to have added functionality

Refining the design

Before/After - Home

  • Removed the search icon on top nav because it was confusing having two access points
  • Leaving main search bar because it was the first place ⅘ users click.
  • Updating content callouts

Refining the design

Before/After - Search

Improved Search design and functionality from Search Icon in top nav bar

  • Full Screen
  • Moved content up
  • Added suggested results - previous and most searched
  • Added change store location

Improvements

Search User Flow

Improved search user flow:

  • Search icon on all screens except home for easy access from any point in app
  • Full size search modal to account for keyboard taking up space on bottom of screen
  • Suggested search results

Ease of use

Adding back arrows

Shop My List User Flow

  • Made the "shop my list" user flow more efficient by adding a "shop my list" button on the "my lists" page - reducing one step in the flow.
  • Enhanced organization of list items by categorizing list items

Map

To make the map more clear to read:

  • added color coding to sections of the store and map markers
  • labeled the aisle gray boxes with text for added context/clarity

Accessibility Considerations

  • Alt text

    Appropriate Alt text for all images for users who are blind and/or use screen readers, so that they can hear the alt text read out. Or for users who have turned off images to save bandwidth.

  • Color/Contrast

    Using high contrast colors and using icons along with text

Takeaways

Impact:

“The "Shop My List" feature is genius because it takes me to a map with the exact items I need and where they are located. Great job.”

“The search feature is very helpful when I’m grocery shopping! Saving me time and frustration when I can’t find an item.”

What I learned:

  • How to plan and conduct UX research studies, test early concepts, organize and analyze results
  • How to build wireframes, mockups, lo-fi and hi-fi prototypes in Figma