Observation

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


 

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

 

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
 

Wireframes and Sketches

 

Solution