Interaction Design Capstone Project: ShopExpress

6 min readJun 23, 2018

Overview

A 10-week capstone project for the Interaction Design Specialisation from University of California, San Diego, on Coursera.

Design Brief

Mission: Design an interface that facilitates personal or social behavior change.

There have been many times that I have found myself aimlessly wandering around a grocery store looking for a specific item only to find that item in an aisle I didn’t even think to look at. Or worse, I didn’t find the item at all because it was out of stock. Out of frustration I thought “there has to be a better way to navigate a store and find the items I’m looking for.”

As a result I decided to choose the design brief for change. It is time for a change in the way in which we do grocery store shopping for the better. I wanted to understand the reasons why and the way in which people do their grocery shopping in hopes to make the in-store shopping experience faster and more efficient.

Need Finding

I interviewed and observed three participants throughout their grocery shopping experience, examining the way in which they typically shop. This consisted of two observations in the grocery store and one observation of online shopping. My hope was that by observing online grocery shopping, I might uncover opportunities to enhance the experience in the store. As a result of my interviews and observations I uncovered some major needs that are not currently being addressed:

Shoppers need a way to do their grocery shopping quickly and efficiently
Shoppers need a better way to find the products they are looking for
Shoppers need a way to navigate an unfamiliar store layout
Shoppers need a solution for wasting time standing in long check-out lines

Point of View

After my observations I came to the understanding that, people who grocery shop at a store go because they inherently want to go but they want to get in and out as quickly as possible. The barriers that prevent this from happening are ingrained in the total experience of finding products and paying for them. By providing a way to quickly and efficiently find products and pay for them at the store, one can greatly reduce the time it takes to do their grocery shopping.

Ideation

After uncovering some of the needs that shoppers have, now it was time to come up with ideas that could potentially address those needs. Things that were taken into consideration were how, when and why people go grocery shopping, pain points they experience along the way and things they need to help make the experience better.

Some solutions I came up to address these are:

A dynamic shopping list that lets you add specific products from the store that you choose.
Real-time directions to find what you want in the quickest route possible.
Shopping cart and mobile payment. Check-out at a mobile check-out line.

Inspiration

These are the words I focused on that relate to my point of view. From here I searched for inspiration from the existing landscape of grocery shopping apps. While there are many apps out there, including apps by specific stores themselves, they all seemed to lack one common thing…a way to find products easily while shopping in the store. Sure, many grocery store apps say which aisle a product is located and even some show if a product is in stock or not. However, if you have never been to a particular store or if it is a super center type store, finding the right aisle can be just as cumbersome as finding that one product among hundreds of others. Even with all the app options available, the main issues of doing quick and efficient grocery shopping are simply not being addressed.

Storyboard & Prototype

With all my research and need-finding completed I then began to build out storyboards that show what problems my app interface solves and how it is used to accomplish tasks in a real usage scenario.

This storyboard shows how someone would use the app to create their shopping list and then use that shopping list to find the fastest and most efficient route to do their shopping.

Storyboard #1: Shopping list and in-store navigation

From my storyboards I then began to plan out the important features of my app and layout a user flow for the different pages. Paper prototypes were then created to form the early phases of the apps design and get usability feedback. These were then evaluated with Jakob Nielsen’s 10 general principles for interaction design. Two in-person evaluations and one online evaluation was conducted in order to find potential problems with usability. All noted issues identified were given a severity rating from 0 to 4 and were prioritized.

Paper prototype: Shopping list and in-store navigation

Wireframes

Based on the evaluations and changes that needed to be made as a result, I then began to create wireframes for my interactive prototype. This included a development plan that noted all the components of the prototype with deadlines and time estimations for producing a design-complete application for testing. After testing two people and noting breakdowns and design opportunities, I made appropriate changes that would help with the user experience.

User Testing

After some changes and improvements based on initial feedback, the prototype was ready for user testing utilizing UserTesting.com. Each participant was given a set of tasks to accomplish. I was able to examine each participants screen as they navigated through the app to understand how they used it and areas for potential improvements. They also used the think aloud method to help me understand what was going through their mind as they navigated the app. There were a couple of user experience issues to clean up for the final version, but of the four participants who tested tested the prototype, they all felt it was very easy to navigate, understand and most importantly something they would definitely use.

An A/B test was used on one screen with two different versions. I wanted to see if there was a difference in the user experience by repositioning the “create new shopping list” button. After the test it became clear that the alternate version with the button under the line and words on the button made it more clear to the user that they should type the list name first and then push the button to create the list.

Fit & Finish

With all of the need-finding, research and testing completed it was time to put the finishing touches on the app, work on branding and give it a name that encompasses the core function of the app.

ShopExpress: The quickest way to navigate your local grocery store.

Build: Build your shopping list. Easily search through all the products your store has to offer.

Shop: As you shop your list, get real-time directions to find what you want in the quickest route possible. Use your phone to scan items to add them to your mobile cart.