IA and Home Page eCommerce Project

In the spring of 2018, we worked with ScrubzBody.com, who sells their own line of body scrubs and beauty products. Having trouble with conversion and other aspects of their site, we started with one of our UX optimization reports. We also used HotJar to see where people dropped off and to watch recordings of users on the site.

After identifying the main weaknesses on the site, we did a large IA project to redo the sitemap, hierarchy, and navigation. Homepage redesign was part of this project. We also brainstormed some new business policies and products.

Since then, Roberta of ScrubzBody has been interviewed twice giving stats like a 22% increase in sales, which she partially attributes to our work. She’s also still experimenting with some of our business ideas.

Some of the Process and Deliverables

UX Optimization Report

This report is an audit of the current site. We take a lot of screen shots and describe the problems, potential problems, and some possible solutions.

Here was where we were looking at the home page and IA (nav menu, hierarchy) problems. This led to the client hiring us to redo the homepage and IA.

IA Card Sort

We did a card sort through OptimalWorkshop.com. This and other visualizations of results led us to create a new hierarchy and structure for the client’s 30 website pages and sections.

Proposed Mega Menus

Based on the results from the card sort, this was (part of) our proposed new website IA and mega menus. These are medium-fidelity wireframes.

Tree Test

We then ran a tree test using optimal workshop. This aims at validating or finding flaws in the proposed sitemap and menus. Users did well with most tasks but we did find a few flaws to fix and get some insights on where users expected to find certain pieces of information.

Homepage Wireframe

This is my medium-fidelity wireframe for a new homepage.

This image shows the single, long wireframe split across two screens so you can see the full concept. The right screen is the continuation of the left screen.

Visually Designed Homepage

This was completed by one of our staff artists, and shows how wireframes come to life in the hands of a great artist.

The client is a creative and smart woman who is way too good with WordPress. We have no idea what the site will look like on any day; she likes to constantly experiment.

Mobile Responsive Site

This is a mobile responsive WordPress site running WooCommerce. Everything we did had to work for all devices.

Our internal PHP/CSS guy made sure that the UX layouts were carried through to responsive versions.

This image shows the homepage spread across three screens.