BernardoDesigns
Product Design and User Experience

Case Study: Humble Bundle

Redesigning Humble Bundle

Background  

Humble Bundle's beginnings were rooted in featuring a single bundle of goods for a set duration of time. The company's previous homepage and navigation would default to showing the most recently launched bundle. This limited UX evolved from only having a single bundle live a time and it was only later as the business grew that tabs were introduced to show multiple concurrent bundles.

The company had also recently launched a subscription service and regularly ran promotions for it and store sales on it's bundle pages.

Without a multi product homepage, the company could only feature one bundle at a time. This was a disadvantage to it's other products.

 

Site Navigation

Diagnosis

The site navigation needed to be more elegant in both its utility and it’s ability to display multiple products. The solution called on optimizing for greater content discovery with less clicks. To create a consistent UX, the company needed to simplify and standardize the navigation as it appeared and behaved throughout the site. 

The company was relying too much on the tabs to feature different bundles and needed to explore ways to allow users to browse through multiple bundles and surface up more content across the different verticals.

Screen Shot 2017-12-09 at 12.48.02 PM.png

Solution

Introduce a dropdown menu featuring all available bundles across the different media types. A visual stamp system was created to distinguish the media type using custom iconography. At a glance a user was informed on what the contents of the bundle were such as books, comics, or games and how much time was left before the bundle expired.

Dropdown.png
 

Cross Promotions

Diagnosis

The execution and placements of promotions throughout the site where image based and set within the body of other product pages. User-testing observations suggested this was confusing customers because the banner was competing with the contents of the product page. 

Screen Shot 2017-12-09 at 12.48.18 PM.png

Furthermore, because the banners were image based, marketing experiments and the company's ability to share a time sensitive deal were heavily constrained and dependent on the design department's ability to make edits and multiple versions of the banners.

Solution 

Set specific and distinct locations for banners to be placed throughout the site. Create a scalable system of HTML elements that was admin-able, allowing the marketing department and company unlimited range to conduct experiments. Make each banner a predetermined size and style relative to it's contents.

Banner designs were determined relative to it's contents.

 

Multi Product Homepage

Diagnosis

Only being able to feature a single product on the homepage limited the exposure of the company's other products. 

Solution

A scroll friendly homepage that relied on a grid system composed of different sized tiles allowed for multiple configurations and the display of many different products.

Bundle Tiles

Store Tiles

HUMBLEHOME-COMP.png
 

Conclusion

The implementation of these three solutions together greatly improved the efficacy of the company's ability to display it's products across multiple business lines. Words can only show so much, visit the live site here or watch a screen cast below.

Watch a screen cast of all three features working together.

 

BernardoDesigns