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.
2 weeks (Design only)
12 weeks (Kickoff to Launch)
Senior Product Designer
Sketch, Principle, Flinto, Abstract, Invision
Maria Delaney and Maggie Smith, Research
Camille van Horne, Product Manager
Maksim Golivkin, Technical Lead Manager
William Parish, Android Developer
Ben Knight, Data Science
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:
Surface only the most important information first to reduce cognitive load.
Make the 3-screen, 3-tap, 3-second experience instantaneous.
Consolidate 5 years of one-off design experiments into a design systems framework.
Put all actions within thumbs reach for one-handed operation.
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.
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.
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.
Design system components
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.
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.
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