Heuristics Evaluation

As a new member of the ecommerce team, I had to familiarize myself with where the site had been before, where it was currently and where it needed to go to meet brand and business goals. Upon my initial audit of the existing site and critical pages (pictured below) I found the following items to address immediately:

Contrast and legibility – While the brand's heavy color blocking and large sections of reversed type might work for print and packaging, it wasn't very effective for the web. The site was failing to abide by common accessibility guidelines for contrast, type size, and weight and colors. Additionally, one primary color was being used for all global elements, leaving little in the way of hierarchy or priority.

Consistency and styling – In jumping between pages, I quickly realized there was no consistency in the use of fonts sizes, positioning, and appropriate HTML tags for headers or body copy, which was also a must for reducing accessibility errors.
‍
Update to modern ecommerce UI elements – Although the site did have some existing UI elements like buttons, drop downs and quantity pickers, there were also confusing extras and inconsistencies that needed to be addressed, like the price selectors.

Building a Design System

During both my design audit and competitive analysis, I was keeping track of all the UI elements that would need to be standardized in a design system, while also making a list of new controls I'd need to anticipate, for features not yet live. Additionally, I was working to lessen the number of type styles throughout the site and ensure more consistency on every page.

Without overhauling the brand's identity, I needed UI solutions that could work with a new "white" page design, including easy-to-understand states of each control and text styles for any copy needs on the site. Accessibility was also a factor to consider, so I darkened the brand colors where needed, increased the size of some controls and labels, and set minimum type size requirements across the site. Here's the design system I came up with:

Low-Medium Fidelity

Since the best selling and most profitable product sold was the Queen V Essentials Kit, it was the first to get a design overhaul and UX strategy. Using a preloaded wireframe kit, I mocked up several low-medium fidelity wireframes of how the new Essentials Kit product page could be arranged and considered various designs, layouts, features and what priority level each of the kit's individual products might take.

Design Iterations

After assessing each option with my team of developers and analysts, I narrowed down the direction into two more focused ideas and proceeded to increase the level of fidelity, while also working out the layouts for responsive web and mobile. The first includes a fairly standard product description above the fold, with a card-style layout that would flip or slide to reveal individual product overviews. The least essential items have been removed for mobile, while things like a sticky nav bar with the purchase buttons have been incorporated in order to maintain an easy and pleasant user experience.

The second option cycled through the products and their description for desktop, while the user could slide through a collection of tiles to learn more about each product as desired.

Design Solution

Using a clickable prototype, I reviewed the two options with the internal brand team, and option one was considered more intuitive and was approved. My next step would be to finalize the high fidelity layouts, collect web-ready assets and make sure my files were in tip-top shape for the development team. I introduced a Sketch to Zeplin export process and the offshore development team, who had never worked with Zeplin before, were thrilled with such an easy design handoff. Once developed, I partnered with them directly to QA the site, testing on a variety of devices and browsers, using Browerstack, Blisk, inspect mode.

Once the new page was launched, we A/B tested it with the previous Essentials Kit page design for a week to ensure we were not seeing a reduction in traffic or conversions.

Within 24 hours of the new Essentials Kit page going live, we saw a 25% increase in conversions.

New Layout Options

The Shop Now page was the next to be addressed and followed a similar process to that of the Essentials Kit page. Starting with low-medium fidelity, I looked at layouts that incorporated tiles for each product with various amounts of information contained within each, category descriptions and headers, anchor buttons, and large blocks of colors or images. In the team review, option one was immediately deemed the winner.

Because there wasn't much to work out from low to hi-fi besides adding in product images, the site was quickly finalized and developed and QA'ed internally, launching within two weeks of being approved.

This fully-responsive ecommerce site features improved layouts and increased conversions, with a 12% decrease in bounce rate from the Shop Now page and an 8% decrease in abandoned carts.