IC Hero R2.jpg

 

Redesigning the most popular page on Instacart fulfillment


Peaking at 178 million visits per day, Item.Detail and Scan.Item are by far the two most visited pages on Instacart’s shopper platform. Together, these screens are the first step in a workflow that Instacart’s shoppers are required to complete for every grocery item they pick.

In May 2019, I worked with the in-store logistics team to ship a redesign of this workflow - prioritizing speed, clarity, ergonomics, and scalability.


Timeline

2 weeks (Design only)

12 weeks (Kickoff to Launch)

Role

Senior Product Designer

Tools

Sketch, Principle, Flinto, Abstract, Invision

Team

Maria Delaney and Maggie Smith, Research

Camille van Horne, Product Manager

Maksim Golivkin, Technical Lead Manager

William Parish, Android Developer

Ben Knight, Data Science

 

 
 
iStock-1142485405.jpg
 
 
 

Problem and Goals

For Instacart shoppers, picking and scanning items was a relatively straightforward process. But repeating this process dozens of times per day was time-consuming, and cost Instacart millions of dollars per year in labor.

In hopes of earning back lost time, shoppers compensated by scanning all items just before checkout - creating downstream negative impacts to customer experience and NPS.

Drafting a business case in partnership with Data Science and Research, I proposed we revisit this flow and improve upon 4 key tenants:


Clarity

Surface only the most important information first to reduce cognitive load.

Speed

Make the 3-screen, 3-tap, 3-second experience instantaneous.


Scalability

Consolidate 5 years of one-off design experiments into a design systems framework.

Ergonomics

Put all actions within thumbs reach for one-handed operation.

 
 
Existing IC R3@2x.png
 
 
 

Concept Design

UX iterations focused on editing the flow into the least number of steps. Using design systems components I had prepped for another project, I quickly generated low-fidelity wireframes in Sketch and presented them to the working team and design org for technical feasibility and critique.

 
 
 
Diagramming A@2x.jpg
 
 
 

Research

Partnering with Research, I surveyed the leading concepts with 47 shoppers representing a broad range of personas to gage interest and test usability. This helped our team strategize what should be included in the MVP, and what micro-interaction adjustments were needed to make the interface truly intuitive.


Glyph/Chat Created with Sketch.

Interviews

Journey mapping Created with Sketch.

Journey mapping

Prototyping Created with Sketch.

Prototyping

Information architecture Created with Sketch.

Information architecture

 
 
 
Prototypes Test 2.gif
 
 
 

Design development

Feedback from research inspired further development into high-fidelity artwork for each of Instacart’s use cases.

By assembling the interface entirely from newly-minted system components, the resulting framework unlocked a scalable way to showcase multiple streams of data, and enabled lightning-fast engineering development.


5

Design system components

2

New components

 
 
 
IMG_8801 R5.jpg
 
Scanner B.jpg
 
 
 
 
 
Quick Scan DemoR7.gif
 
 
 

Solution

Quick Scan makes it fast and simple to pick and scan groceries with a one-tap, one-handed interface. Critical information is surfaced immediately, and more content is just a swipe away.

 
 

 
 

One-Step Scanning

Pick items faster with a single-screen workflow that is optimized for thumb ergonomics.

 
 
 

Important features front and center

The stackable framework organizes item details based on data - enabling smarter experimentation, and fewer opportunities for error.

Modules@2x.png
 
 
 

Adaptable to every grocery item

The scalable table structure is especially designed to support over half a million SKUs, UPCs and PLUs - from organic avocado to white zinfandel.

 
 
 

Design systems ready

Designed and developed in record time, this project is an example of the gains possible using the Trail Mix design system.

 
 

 
 

“Quick scan is not only quick, it feels instant.”

Shopper post on Reddit

Quick Scan was shipped in August 2019 and is currently piloted to select shoppers in the US. Early data shows a significant reduction in picking time, and shopper feedback on social channels is incredibly positive.


Take away: A few seconds can make a big impact
Shaving a few seconds and taps from a workflow can seem insignificant, but multiplied over 100K shoppers and millions of items per day, these fine details can add up to substantial savings.

Favorite part: Anchoring great design in collaboration
Given the significance of this experiment, the team was especially receptive to collaborating with Data Science, Research, and Operations to inform the design strategy, and it shows in the final product.

Next time: Even faster UX
Quick Scan was a great first step in improving efficiency. Moving forward, I’m continuing to explore emerging hardware and software technologies that can make the picking and scanning experience even faster and more connected to the rest of the app.