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.
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.
PROMOTIONAL BANNER SYSTEM
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.
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
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.