Humble Bundle Product Design

Summary

Throughout my time at Humble Bundle, the main bundle product has gone through many design changes that span large overhauls to smaller feature additions. Most design iterations took place over a a period of 3-4 weeks, with a few outliers that took more or less time to work through.

Role

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


Humble Library

Prior to the current redesign, users had one central library that would generate all of their keys immediately on page load. This proved to have a technical as well as a user experience problem, since many users had at least a couple bundles and the load times for all of the games and builds would take at least a couple seconds to properly load. This also caused browsers to lag due to the huge pages, and many users couldn't find the section for a full list of bundles they've purchased due to the lengthy library page.

An early prototype was created by a previous engineer on how to address the games and builds being loaded all at once, but needed a visual design makeover to properly adhere to our branding and style guide. I worked on the visual design for the main library interface, focusing on not overcluttering the UI with too many colors or callouts, since many of the games came with colorful thumbnail art.

My next task was figuring out how to split apart the different features on the page so that users could easily navigate and find specific features of their user library. A list of a user's purchased products and their unredeemed keys previously resided at the bottom of the lengthy one-page library, which I immediately took out and made into their own pages with completely redesigned visuals. After creating the mockups, I worked closely with engineering to ensure that the designs were implemented to spec. There were little to no engineering hiccups, so it was an easy process to implement the designs.

The redesigns were considered successful in two ways: site performance improved drastically by redistributing all of the features that were previously on one page design and were presented all at once, and users were able to more easily access items they have previously purchased through Humble and access their unredeemed steam keys.


Humble Developer Self-Service Platforms

The Humble Widget is a part of the developer-centric self-service platform that helps small indies sell their games through embedding an iFrame widget code snippet on their website. This is particularly valuable to devs whose games are decidedly not included or not accepted through a major distribution platform like Steam. This becomes more valuable in early stages of game development for developers, when users can include tips to help fund the development of the game, or pre-order games during the later stages of development.

Previous to this self-service redesign, devs used to email the Humble Operations team who had to use their own internal tool to create these widgets, which was rigidly designed to have the same look and feel every time. There were many complaints from devs who had trouble integrating such a static widget onto their site when the dimensions or color theme may not fit their design. The process of setting up sales and establishing widgets through the operations team was also a major setback to achieving the best possible user experience for this product.

Our solution to this was to create a self-service WYSIWYG widget creator that developers could use to create their own semi-custom widget. A redesigned widget was already established by a previous designer, but didn't account for different sizes that developers could want to fit onto their site. I designed multiple break point and sizes for the new widget design, and also created different color variations that developers could choose from.

I also created the platforms in which developers would create the widget and scheduled sales. I began by researching ways other WYSIWYG editors and wireframing a similar structure, in which all of the main components are listed on the left hand side and the right section had a live preview. The sales scheduler followed a similar design pattern in order to stay consistent with each other, and featured a sales schedule interface on the left hand side while the calendar live-updated to reflect what dates their sales would be scheduled.

After iterating over the design and creating the visual mockups, I worked with the developer platform engineering team to implement the designs. We ran into issues with how designs should look and work when browser viewports changed, but ultimately the redesign were considered successful, as more developers were creating widgets and our operations team spent less time servicing developers and more time maintaining our other products.