In 2016 it was predicted that one third of online shoppers would buy their groceries online. This growing trend offers potential opportunities in the local online grocery shopping industry, grounded in research to identify potential customers and understand what drives them to shop online.

UX / Product design case study

The challenge

Instashop, a U.S.-based grocery chain store, has had a yearly 8% decrease in market shares over the past four years. The store is looking to expand their market by researching, designing, and implementing an online grocery shopping service in order to expand their market share and continue to meet customer needs.

The goal of this project was to design a web application for an online grocery service that was easy, quick, and convenient, and helped the client stand out from other grocery delivery services. I was the sole designer on this project.

The solution

My role


Secondary research report
Competitive analysis
User interviews
Card sorting
Remote & in-person usability testing

Experience Design

Empathy map
User flow
Business & consumer goal alignment

Wireframes & IXD

Feature matrix
Site map
User flow

Visual Design & Brand

Competitive advantage
Logo design
UI visual design
Responsive design

My process


Research Plan
User Interviews

The first step in the design thinking process for Instashop was discovering the target audience, and determining their needs, goals, behaviors, and motivations.

Research Plan Overview

Research Objectives

To better understand the current online grocery market industry and competition, to identify consumers (who they are and what they care about), and to explore what features or services an online grocery business could provide that would improve consumer lifestyles.

Research Questions
  1. Who are potential customers? (demographics)
  2. What are users’ biggest shopping frustrations, & what makes a positive experience?
  3. What online shopping features are valued and should be prioritized?
  4. What other companies offer this service, and what features do they offer?


Empathy Map

Defining customer’s POV, motivations, and needs is key to keeping the user at the center of the design process, and building an application that satisfies both business and consumer goals.

Primary persona & empathy map



Site map
User flows

In this phase, a content strategy was created and design ideas brainstormed based on collected market research data, competitor reviews, and feature analysis.

Site map

User flow



Prototyping with InVision

Iterated wireframes were exported into prototyping applications to build digital mock ups (prototypes) that can be tested on users.

Wireframes were imported into InVision to create an interactive web flow from landing page through check out page. I wrote and executed a usability testing plan, to determine the objectives of testing, process, and testing script.


In-Person Usability Testing
Remote User Testing
Affinity Map

The iterated wireframes and prototype were tested with users in-person and through online, remote user testing platforms (Verify and UsabilityHub), and included Click Tests and Preference Tests.

Based on quantitative and qualitative data from in-person and remote usability testing, the following design iterations were implemented and re-tested:

Design iterations (and re-testing)
• Implement new Department design into prototype
• Original Check Out Summary page is preferred and does not need to change
• Add a notification icon (number) on product image when the product has been added to cart
• Switch the home page carousel image to a sales flyer
• Cart / reciept page analysis and further discussion
• Confirmation page: include a confirmation code

Feature opportunities to discuss in the future
• Customer reviews on product page
• Organic item filter
• Ability to compare multiple items (by price, reviews, etc.)

UI Kit & Interface Design

Leveraging the client's brand attributes and modern design inspiration from Dribbble, Behance, and Pinterest, I created a brand mood board and moved pencil-on-paper logo sketches to high-fidelity mock ups in Illustrator. After testing multiple style tiles (style guides), I chose a color palette, typography, and imagery that was modern and helped the Instashop brand stand out from competitors.

Next steps

A design is fluid, in a constant cycle of testing and iteration. Based on quantitative and qualitative data from in-person and remote usability testing, the following design iterations will be implemented and re-tested:

Design iterations (and re-testing)
Feature opportunities to discuss in the future