Humble Bundle Front Page Redesign

Summary

During my time at Humble Bundle, a variety of questions and complaints have come up from both customers and clients about how our pay style works and the disconnect from how the web site displays this. The redesign process took about 2.5 months of research and iterations around the middle of Q1 2016 before being approved for engineering. The redesign launched around the end of Q4 of 2016.

Role

I was the product designer for his project, working through some of the user experience wireframes, all of the user interface components, and all of the visual designs.


Problems with the Previous Design

Before I started doing any sketching or wireframing, I took the time to go through problem points that customers and clients have had with the website. By reaching out to multiple teams across the company, I was able to collect a variety of paint points and confusing sections of Humble Bundle's home page. Some of the biggest issues centered around the website not properly communicating the Pay What You Want checkout model. The old design used hover text to convey how the business model worked and what kind of content was provided, however there were little to no affordance to imply that the text was interactive. The colored headers were also meant to be a means of explaining how users received more content, but feedback from customers and clients suggested that the language lacked explicit clarity as to how they received that payment tier.

One other key complaint revolved around the checkout section. While the checkout was a sensitive subject to redesign, we understood that the checkout flow had potential to better upsell customers to a higher tier. The design had the same issues as the rest of the page in that it didnt properly communicate what kind of content customers would be getting per payment tier. Other minor concerns revolved around the lack of affordance that various parts of the page has, for example the icons were clickable to reveal more information but there was no indication of its interactivity, and the lack of clarity in platform support.

After gathering notes and working on 3-4 primary sketches, I sat down with various team leads that would be involved in the upkeep and execution of the bundles and resolved any major issues that weren't accounted for.

Solutions

View Full Redesign

I focused primarily on information clarity and transparency for the redesign, with visuals and game box art being the main driving factor in delivering this information. The header includes box art organized into colored tiers to help users understand that paying more would add more games to their core purchase. We also added in secondary call to actions for users to learn more about specific games or tiers. There were initial concerns that it would push the main content further down the page past the fold, but it was agreed that the summary provided a stronger vessel for communicating the value of each tier and upsell.

The design in the header was also repeated in the checkout flow, where users are able to choose which specific tier they wanted to pay (which autofilled the input to the correct payment amount) and visually see tiers highlighted. I used checkmarks as an additional layer of visual communication to let users know which games they would be getting.

Additional changes include addressing other minor issues in clarity and affordance throughout the page. Tiers also became separated into their own colored sections with a large prominent header on top, which was to help avoid any confusion around which games were in specific tiers. I included more prominent visual badge callouts for various products such as special editions, DLCs, and stacked products. There was also a design for hover effects as well as showing off all supported platforms for each specific game.