GrubMarket is to local produce what Etsy is to handmade crafts. The online retailer allows consumers to shop direct from farmers and independent producers—from the convenience of their phones.
After noticing abandonment in their shopping cart, they asked Viget to redesign the flow for greater efficiency.
As the UX lead, I simplified the checkout experience by rethinking the page architecture and reducing the amount of decisions and input needed.
Funnel review, interviews and qualitative research, and heuristic evaluation.
UI Design & Testing
Sketching, interaction design, prototyping, and guerilla usability testing.
Research & insight
I kicked off the project with an experience audit. This helped me get acquainted to their unique the checkout experience.
The existing checkout was divided into four screens:
- Billing Address
- Shipping Information
- Order Review
The second screen—shipping information—was the biggest offender with two major issues: information duplication and unnecessary friction.
The second screen—shipping information—was the biggest offender. Items in the user's cart were grouped by vendor, then by shipping method. When users buy from multiple vendors—a common case—the content and complication on this page multiplies.
While users may care about vendors when they are shopping, during checkout they care more about when they're going to get it and how much will it cost.
Removing vendor as a grouping criteria dramatically shortened the page and drew attention to what mattered.
Users were asked to make many decisions in checkout—such as delivery options and time. Analytics confirmed that users tended to choose the same options: free shipping, anytime delivery, and credit card payment. What's more, Grubmarket wanted to promote it's free shipping option as a distinguishing feature.
Introducing smart defaults and progressive disclosure reduced the number of actions needed.
With the shipping screen shortened, I found that it served the same purpose as the Order Review screen. Combining these only required accounting for gift cards and incentive codes, which was simple to add.
Billing information, previously housed in a Stripe modal, could be integrated into the page.
The streamlined checkout condenses four long pages into one. Returning users need only.
- UX Design
- Todd Moy
- Visual Design
- Tom Osborne
- Project Management
- Amanda Ruehlen