Product Design and User Experience

Designing consumer features and internal tools while resetting a unique brand.

A comprehensive product audit was performed as part of this challenge and set the foundation for the design of current and new features.

Multi-product Homepage

One of the primary recommendations was to implement a homepage with the capacity to display many different products at a time. "Humble Home" is a mixed content grid for customers to browse through. A "Hero" tile composed of an animating grid of games sits at the very top of the page. Immediately below it are tiles for other active bundles and games found in the Humble Store.

Check it out

Product Dropdown Menu

The first link in the new Humble navigation bar lists "X Bundles". When clicked, a drawer containing all active bundles animates into position.

Mobile Browsing & Navigation

On mobile, the navigation bar was moved to the bottom for a more app like experience. The homepage scaled to show a single column of tiles and performant CSS animations meant that the "Hero" tile's grid of games still animated seamlessly on mobile devices. 



HTML banners created within an admin portal could be injected between product clusters to break up the visual display of the grid and remind customers of promotions as they scroll down the page. Read more about the banner system and complimentary features in a project case study.

View Study

Monthly Marketing Page

Our team took on the task of redesigning the monthly marketing page with goals to feature it as a premium service and explain its key values to customers. A custom character and narrative were developed to illustrate the service through a series of lightly animated scenes. This video is a prototype developed in Principle and was used as a proof of concept to demo for the engineering team.

Scene composite diagram

Scene composite diagram

A strong visual can help explain a complex subject. This composite was created to show coworkers and engineers an approach for scene animations and were later shared with the company as part of a larger presentation.