placeit (8).png

Client: Instashop (UX Academy Capstone)

Role: User Experience Designer 

Objective: Research grocery shopping habits and needs of users. From research, design a web application where users can do their grocery shopping completely online and have their order delivered directly to their home.

Project Background

Instashop investors have determined a large untapped market for online grocery shopping.

They want to create a web application where users can do their grocery shopping completely online and have their order delivered directly to their home.

Design process.png



Building empathy with the user and uncovering their needs through in-person interviews and secondary research

Research Goals

  • Learn how people shop for groceries 
  • Learn what frustrates people with their current grocery shopping experience
  • Define target demographic
  • Learn why people currently do or do not shop online for groceries 


  • User interviews: Interview 5-10 strangers. Use thoughtful questions to guide the interview while also allowing the conversion to flow naturally so participants share their stories and personal experiences 
  • Secondary research: Conduct online research to learn more about online grocery shopping apps 

Empathy Mapping

Research notes were then divided into categories: Doing, Thinking + Feeling, Seeing, Hearing, Pains, and Gains. This method, called empathy mapping, is a way to organize research findings reveal the problems and mindset of the users. Empathy mapping takes all the different pieces of data and creates a cohesive vision that is human-centered. It also makes it easier to find patterns across the data. 

DesignLab - Empathy Map.png


A persona was developed to present data found from research in a way that is easy to relate to and understand on a human level. It keeps the user and their needs at the center of the design process and helps eliminate designer assumptions as the design process moves forward.

DesignLab - Persona Development.png



Using research to define needs, ideate solutions and test preliminary designs


Defining where user goals and business goals intersect 

I created a Venn diagram of Instashop's business goals compared to the goals of Instashop users. This shows how the needs of the user and business relate to each other so that going forward the design isn't overly focused on one side's needs.

Instashop Business goals.png

Card Sorting

Participants organized grocery items into groups that made sense to them in order to help define appropriate groups and the website's information architecture. 


Sitemap & User Flow

The sitemap shows the websites architecture or structure and shows pages relationship to one another. It also helps show what pages will need to be designed and developed. 

It outlines the user's journey through the website and provides the basis for what pages need to be developed. It provides an opportunity to make sure the experience is in line with the user's needs & doesn't leave out any steps in what they're trying to accomplish. It's easier to edit the flow during this phase instead of later on in the process.

User flow.jpg


User Interface Design

Using testing findings to develop high fidelity wireframes and UI kit

Mid-Fidelity Wireframes

Mid-Fidelity wireframes were then made in Sketch to be used of a prototype made in inVision. This prototype was then used for initial user testing to reveal any pain points with the structure of the site. Testing with grayscale wireframes helps the user not be biased towards images/colors they may favor and focuses the attention on the underlying structure.

High-Fidelity Comps

placeit (1).jpg
placeit (2).jpg

UI Kit