Shipt Checkout Flow Redesign
Shipt is a membership-based grocery marketplace, providing same-day grocery shopping and delivery services. I redesigned the Shipt app checkout flow for a seamless checkout experience.
MY ROLE
Product Design Intern
PROJECT TYPE
Individual Concept Project
TIMELINE
3 Weeks
Design a seamless, fast mobile checkout experience
THE USERS
Who are our potential users?
Livia
Marketer, 38
“I am a working mom. I want to order my usual groceries quickly at work and have them be delivered as soon as I get home.”
  • Uses Shipt 1-2 times a week
  • Receives deliveries at her house
Ted
Engineer, 27
“I don’t cook much but sometimes order groceries online. I just want the ordering process to be easy and clear.”
  • Uses Shipt once every 2-3 weeks
  • Sometimes cooks at his girlfriend’s place
PAIN POINTS
What are the pain points of existing checkout page?
In order to design features and to solve users' needs, I tried to discover their pain points. To do so, I ran some user research, including cafe studies, usability tests, and my own heuristic evaluation of the checkout experience. I also audited all the screens within the Checkout flow to understand the overall structure.
Shipt’s Current Design Pain Points
I identified the top 8 pain points and consolidated them into 3 major themes.
Help the user get to their goal quickly
Guide & inform the user on next steps
Enable the user to achieve their goal
  • Total price is hidden at bottom of a long scrolling page
  • Two separate editing actions (note, address) that require multiple steps to edit
  • Long scrolling page of delivery times
  • Multiple visual treatments of section headers lead to confusion about importance
  • Lacks transparency regarding delivery fees and taxes
  • Does not inform how much money the user saved
  • Missing ability to edit or delete existing address or credit card
  • Missing ability to select substitution preferences per item
COMPETITIVE ANALYSIS
How competitors are trying to solve these pain points?
In order to solve 3 core problems, I conducted competitive analysis of 3 major apps and learned how they have previously tried to solve these pain points.
RESEARCH TAKEAWAYS
My Design Solutions
I identified solutions for the each 3 major pain points of Shipt's current checkout flow.
  • Make sure price is easily visible
  • Summarize information that is unlikely to change
  • Consolidate similar editing actions
  • Design consistent visual hierarchy
  • Provide more price information to users
  • Provide editing functionality for user information
  • Provide ability to set substitution preferences per item
INFORMATION ARCHITECTURE
Two possible versions: Conservative & Adventurous
I divided Shipt’s current main checkout page into each section, numbered them and explored two possible versions: conservative & adventurous.
WIREFRAMES
Visualizing Ideas
In order to visualize all my ideas into rough designs, I built wireframes for the main & secondary checkout pages of both versions. I identified advantages and disadvantages of each direction, and finally decided to further explore the adventurous version.
USER FLOW WIREFRAMES
Do these wireframes make sense?
In order to demonstrate a common user journey in the new design, I made two user flows. I set the specific situation and tasks for each persona and wireframed screens based on each user flow.
USER TESTINGS & ITERATIONS
Does it really solve users’ needs?
I conducted user testing and made various iterations based on the feedbacks.
FINAL DESIGNS
Main Checkout Page
Delivery Window
Date selector allows users to select delivery date
Items & Substitution
Substitution feature enables users to choose substitution preferences for each item
Deliver to
Profile enables users to see all the profiles they saved, switch between them
USER FLOWS
Livia's User Flow
“I only drink specific brand of orange juice. I want to change the substitution preference for my ‘orange juice’ to ‘Don’t substitute’ before placing an order.”
Choose delivery time
Tap the ‘Items’ section
Select ‘Substitution’
Select ‘Don’t Substitute’
Tap ‘Continue Checkout’
Tap ‘Place Order’
Ted's User Flow
“I want to cook pasta tonight at my girlfriend’s place. Since she recently moved, I need to update her address in my Shipt app before ordering groceries to her new home.”
Choose delivery time
Tap the ‘Deliver to’ section
Tap the ‘Address’ section under ‘Yeji Lee’
Tap the ‘New Address’ bar
Input new address
Tap the ‘Save’ button
Select ‘Yeji Lee’s profile
Tap ‘Place Order’
Would you like to check other projects?
Moon Buddy
Moon Buddy
Shipt App Store Screens Redesign
Shipt App Store Screens Redesign
Audi Fast Track 2040
Audi Fast Track 2040