Humble Bundle

B2C E-commerce Redesign

Product & Design strategy • user research & Synthesis •
UX, UI, & interaction design • Prototyping & user testing
About Humble Bundle

A website that sells video games, books, and software. Their core offerings are individual items, bundled items, and a video game subscription. A portion of sales go to charity.

Company Problem

Low conversion/revenue.

Results

Increased conversion, increased GMV per session, increased average user spend, and increased company revenue per session. Decreased time to purchase.

01 - problem identification

Why is conversion low?

I conducted research with new users to understand common pain points.

Page Layout

One very long page requiring a lot of scrolling; relevant information is not near each other.

Tiers

  • Confusion about what came with each tier.
  • Confusion around price.

Payment

  • Payment section difficult to find at bottom of page.
  • No way to know what price would get which items.
  • Lack of common patterns causing confusion.

Donation Customization

  • Charity information not near donation adjustment.
  • Option to change donation amount was overwhelming.
02 - Developing the solution

Moving Forward

Project Goals

(How Might We) Increase Engagement

  • Increase understanding of product
  • Make it intuitive to purchase
  • Simplify experience
  • Increase user trust

Collaboration

Building Alignment

  • Align on problems (what, why)
  • Take everyone on the journey
  • Let everyone contribute
  • Develop relationships
  • Tie work back to goals & metrics

Brainstorming & Wireframes

Developing wireframes happened in three main steps.

  • Define Requirements
    Working with Engineering, Product, and other teams.
  • Build Wireframes
  • Team Feedback

With leadership and stakeholder approval, I moved forward with prototyping.

User Testing

I tested various prototype iterations in user testing.
In the example here, I tested mobile variations of location and display of items on the page.

  • Horizontal item scroll above price
  • Vertical item scroll above price
  • Horizontal item scroll below price
03 - the end result

Re-imagined B2C E-commerce Experience

Reduce Tier Confusion:  All items shown collectively in each tier.

Reduce Purchase Friction: All tier prices are easily selectable.

Automatically Adjust

As tiers are selected, price adapts and vice versa.

4 Decisions to 1

Users can now checkout the most commonly selected tier with a single click.

Simplify Selection: "Extra to Charity" is a simple radio button.

Use Common Patterns: Checkout design makes it easy to understand how to pay and review.

Additional Improvements

Adding item links, creating responsive mobile design, and using common patterns.

  • Improved conversion.
  • Reduce checkout time.

Additional Interactions

It's easy to view details between items

User Journey Overview

Relieving the main pain points on the user journey led to positive experiences.

Edge Cases

Many other use cases and additional functionality needed to be supported.

  • Charity-only bundles
  • ”Bonus” content
  • Partner support
  • Multiple content type support
  • Other tiny odds & ends

Overview

These improvements led to:

  • Reduced purchase friction
  • Reduced confusion
  • Reduced cognitive load
04 - Results

A Win for Users and the Business

Accomplishments

  • Created a design system
  • Simplified complex product, particularly for new users
  • Showed value of research and design to leadership

Outcomes

  • Increased conversion
  • Increased amount sold per session
  • Increased revenue per session
  • Increase average user spend
  • Decreased time to purchase
  • Equalling to a $2.1 million increase in annual incremental revenue (10% of revenue).

View Other Case Studies

Le Tote
Onboarding UX redesign for iOS and web
Udacity
Learner retention strategy for B2B users

Send a message to get in touch.

Or reach out to me on LinkedIn.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.