Humble Bundle

Humble Bundle is a digital storefront for video games, which grew out of its original offering of Humble Bundles (previously known as Humble Indie Bundles), collections of games sold at a price determined by the purchaser and with a portion of the price going towards charity and the rest split between the game developers.

Objective

Redesign the Humble Bundle homepage to be responsive and modern.  Design template would be used across all Humble Bundle services, including store and main site.

Designer - Bryce

Role - Freelance UX Designer / Visual Designer

Observation

The page had a cluttered design and did not scale well across different resolutions.  Inconsistent template used between main site and store.

Design Pitch

 
 

Process

IMPROVEMENTS

  •  Place Blog next to Social Media Links
  •  Make STORE it’s own page
  •  STORE should retain site identity - currently completely different style
  •  ABOUT section should fit a single window height
  •  Add Charity Tally on top of page to promote sites efforts and success
  •  Responsive Webpage - remove box style at set width
  •  MAIN PAGE should fit a single window height
  •  Site will FIT 3 windows tall for the 3 categories DEALS, ABOUT, PAYMENT
  •  Remove hover to greyscale of charts - gimmicky feature
  •  Clean clear Charts - artistic styling/color retains site style
  •  Show page navigation bullets
  •  Remove Tabs for the different pages; instead use scrolling banner
  •  Defined category colors for ABOUT, PAYMENT, and DEALS
  •  Categorize Payment Tiers - stack the categories and add visual divider
  •  Arrows and Page Titles for the scrolling banner
  •  Consider switching to VIMEO not YOUTUBE for cleaner embedding
  •  Friendly Category Titles.  Talk to the user in your messages/paragraphs
  •  BUILD BRAND IDENTITY (example) GitHub and Foundation characters.  
  •  IDEA - HUMBLE NINJA, VIKING, ROBOT, and MONSTER

WHAT WORKS

  • Keep: Call to Action: PURCHASE and TIME LEFT

  • Keep: Expanded Info Styling - clicking slides the page down to make room for details

  • Keep: PAYMENT section should fit a single window height

  • Keep: simple PAYMENT section as is

 


Wireframes and Sketches

 

Solution