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.
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.
Cross Promotions
Diagnosis
The execution and placements of promotions throughout the site were 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.
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 customizable, allowing the company unlimited range to conduct promotional 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
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.
