Yoyochimp Homepage

Context

  • Yoyochimp.com (Fremont, CA)
  • Brought on as UI/UX Designer
Yoyochimp website

Case

Problem: Homepage needed to improve its value proposition to users and demonstrate the content of the website at a glance.

homepage

This is a screenshot of the yoyochimp homepage. (Some of the middle categories are not shown).

Visit website

Process:

  • Conducted heuristic evaluation/competitive review of website according to usability, information architecture, communication design, and visual design standards.

View Report

  • Brainstormed and organized priorities for home page features working with CEO.

  • Sketched 3 versions of home page modifying features included, layout and spacing, home page state, and organization of features.

  • Created wireframe in iterative process between CEO and PM using Inkscape (Illustrator equivalent).

  • Transformed wireframe into Flash prototype to answer questions about interaction of site.

homepage_version3_top homepage_version3_bottom

These were the final sketches before wireframing a design.

Solution: Final web page includes simplified, benefit-centric, and welcoming text on home page, 960 grid system layout, explanation of locations served, browsing system for activities, promotional video, blog feed, newsletter signup, and additional social media links asked for by the CEO. Branding elements, originally added added to fit with a conversational system of interacting with the website, were removed for a larger branding discussion. More functionality was proposed in prototype including adding number of search results for each term in search autocomplete suggestions and providing notification indicators (how many notifications are there since last checked).

homepage_logged_in

Wireframe of homepage for someone logged into website.

homepage_not_logged_in

Wireframe of homepage for someone not logged into website (e.g., users first view of the website).

prototype_home

Interactive prototype of homepage based on wireframes includes animations and interactivity built in.

Click here to try it
(Recommended: Try it in full screen mode)

Outcomes: Yoyochimp is in the process of developing the web design.

Details

Dates of Project: May 2014-July 2014

UX Methods Used: Heuristic Evaluation, Competitor Analysis, Prioritization, Personas, Sketching, Wireframing, Prototyping

My Roles: Design, Research