Class Project

Date Released

May 2017


User Research

UX Design

UI Design

Team Members

Blake Royer

Gretchen Boley

ASAP Grocery App

The goal of this project was to utilize the entire ux process: from the discovery phase (research, auditing, and interviewing), to the planning phase (user journeys/use flows, app models, wireframes, storyboarding, user testing, etc.), to the prototyping phase (design, interactions, branding, etc.) The premise: design an online grocery shopping and delivery app, similar to Shipt and large-scale grocery chain pickup apps.

For this project, roles were shared: We each did research, brainstorming, planning, and designing. We shared and combined our work, and eventually condensed it through discussions and iterations.

The Problem

Online grocery shopping has been growing in popularity over the past few years, but it still doesn't make up a large chunk of the market. The market has lots of potential, as more and more people are realizing that online grocery shopping saves them time, and in the long run, money. The question is this: How do we get more people to participate in online grocery shopping, whether they're the ones doing the buying, or the runner doing the physical shopping?


Competitive research was done on existing grocery shopping apps, like Shipt, Instacart, and Grubhub. After getting a good idea of what best practices were and what these apps could improve on, I then proceeded to conducting user interviews.

Potential shoppers (or for this project, "runners" doing the shopping for someone else) were interviewed in order to gain more insight into what all should go in the app. It was concluded that runners needed an incentive to shop for someone else, as well as alleviations of common shopping journey pain points like slow checkout times, forgetting to put an item on a shopping list, wanting a quick way to navigate a store, etc.

User Interviews

Qualitative Findings
  • Give Me A Reason: Most people would shop for someone if given an incentive
  • I'll Do It Later: Shopping time, travel time, and cost of groceries deter people from shopping
  • A Necessary Chore: People tend to go on larger trips less frequently, unless they forget an important item
Quantitative Findings
  • Room For Growth: Online grocery shopping has been increasing the past few years, but has still only made up about 2% of grocery shopping
  • Rising In Popularity: About 1 in 4 people have tried online grocery shopping
  • Not As Widely Used With Older Folks: Only 16% of Americans over 50 have ordered groceries online to be delivered

The Solution

An easy-to-use grocery shopping app with a familiar looking interface that aims to alleviate as many shopping pain points a mobile app can. Quickly find items at the store, save time you'd usually spend at the check out counter by instead using a mobile scanner, and more. Planning out the app and showing how it would be used in real life is shown below including use flows, app models, and a storyboard.

User Testing

Once the ideation phase was complete, it was then time to test out the proposed solution. InVision prototypes were created to perform user testing. The prototypes were less about design, and more about the user experience: Is it easy for the user to complete their task? Can the user intuitively figure out where things are? Can the user quickly learn how to begin using the app?


A few small things came about in user testing, like CTA button contrast and hierarchy issues causing users to skip over important information. Titles for the dashboard tiles were re-iterated as well, so users would know exactly where to go once they got to the home screen. Overall, the user experience was only a little bumpy, and was eventually smoothed out.


After working out the UX issues, designs were then executed. Grocery shopping is associated with things being fresh and healthy, so green was chosen as the primary color, with subtle, warm colors as the secondary and accent colors. A lightning bolt motif was used in the logo and on the nav bar to be associated with how quick online grocery shopping can be.

Below are a few of the main app screens like the dashboard, shopper search, item scanner, user profile, instant messaging, and grocery list.

Touch points were also designed for user delight and brand promotion, like a canvas bag to carry groceries, and a car sticker to signify that someone is an ASAP delivery driver. Both of these could potentially get someone interested in using the ASAP grocery app, become a runner, or become a delivery driver.