Grubmarket Checkout

cover image

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.

Experience Audit

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:

  1. Billing Address
  2. Shipping Information
  3. Order Review
  4. Payment

The second screen—shipping information—was the biggest offender with two major issues: information duplication and unnecessary friction.

prior shipping screen

Limiting duplication

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.

new shipping screen

Reducing friction

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.

checkout dropdown states

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.

Boom. Done.

Final result

The streamlined checkout condenses four long pages into one. Returning users need only Place Order.

Comparison of old and new checkout designs

Credits

Agency
Viget
UX Design
Todd Moy
Visual Design
Tom Osborne
Project Management
Amanda Ruehlen