Information Architecture & Navigation Redesign

Vitamix wanted to combine their Consumer product site with their Professional product site and redesign the navigation in the process.

Problem

Vitamix customers aren't aware of how similar their consumer-level products are to the machines that they make for professional kitchens.

Hypothesis

If we simplify the information architecture of both the consumer product and professional product sites, and merge the two sites into one single navigation, users will have easier access to all Vitamix products and will be less confused about the differences between the two.

Results

After multiple revisions of designs, prototypes and usability testing, we arrived at an elegant solution that still kept the two primary product pages in their own vertical while consolidating the common content from each. The designs employed dynamic mega-nav elements that created a clear and easy flow through the entire site.

While the client signed off on final designs and implementation strategy, the project was put on indefinite hold to allow for the prioritization of other changes to the site.

Original Site Map

The original site was fractured and contained too many top level navigation elements because of duplicated information across both the Consumer products and the Professional products.

Updated Site Map

Once consolidated, the site was much easier to navigate and content was concise and easy to consume. The client is able to keep their Consumer products distinguished from Professional while allowing for information to flow across the two.

Content Strategy

Taking inventory of the both sites' content, I was able to create a page structure that brought the best of both product lines into an elegant flow of information.

User Flow

With the improved navigation and content structure, the user has a much smoother path through the entire purchase cycle.

Once I had a few variations on a new site hierarchy, I began blocking out content for the new navigation. Playing around with menu alignment, image placement, and content priority, I arrived at some early options for the client.

By conducting several iterations of usability testing, I was able to refine the variations into a final direction for the new navigation and could begin visualizing how content would be placed into the design.

Visual Design

The final stage was to hone the UI Design and fine-tune the interaction and animation of all navigation elements. Final high-fidelity prototypes are created and again tested for usability.