MOVING THE NEEDLE FOR A COSMETICS E-COMMERCE

Cover FX

Role: UI/UX, Digital Strategy    Year: 2017(Ongoing)    Agency: Huemor 

PROJECT SUMMARY

CoverFX is a North American cosmetics brand with the goal of creating inclusive make-up for a diverse audience. With a significant amount of Mobile traffic, they were looking to improve the shopping experience for their users and have a more refined, flexible e-commerce.

I lead the design and strategy implementation throughout the project. I collected data, created wireframes, high fidelity designs, prototypes and assisted in the QA process.

Project Goals

1. Increase conversions

2. Improve the mobile UX

3. Improve create new Home and Product pages

4. Design a flexible & reusable landing page template to be used for various promotions

Research & Planning

After collaborating with the CoverFX team to establish goals, I began research by analyzing data from Google Analytics and heatmaps & screen recordings from Hotjar. Additionally, I conducted 2 in-person user tests using a mobile device.

With this data I created an Action Doc outlining friction in the UX as well as solutions to reduce friction for each section. I began a mobile first design for the the Homepage and Product Detail Page.

With the homepage being their highest entrance page, it needs to provide clear messaging and direction. The main goal was to increase engagement and get customers into what they want, the Best Sellers, with less clicks. To do this, sections were removed, Best Sellers was moved higher on the page & taken out of the slider and now feature lifestyle images rather than isolated shots. Cluttered and confusing UI was simplifed with less interaction points and more clear CTAs.

Exposing the Best Sellers & positioning higher on the page lead to a combined 875% increase in click through across mobile devices.

Home-Page-design@2x-compressor (1)Home-Page-design@2x-compressor (1)

Product Page

One major issue on mobile was the container size. Large margins created a narrow container, which added scrolling to relevant product details. Content was prioritized and rearranged, tabbed content was positioned on the page rather than hidden. Social sharing and related products were moved down, details & ingredients higher.

Additionally, a persistent bottom bar on mobile anchors customers back to the Add to Cart button quickly.

With 65% of traffic coming from mobile devices, specifically iPhone 6, I designed mobile first for an optimized experience.

Promotional Landing Pages

CoverFX frequently runs campaigns for products and partnerships, but they had no where on site to tell that story. I designed a landing page that was simple enough to handle various campaigns but robust enough to tell a complete story. Leveraging a Shopify app, the team is able to delete & move sections and swap out content.

16%↑

In Add To Cart

 

9%↑

In Average Order Value

 

24%↑

In Total Sales

 

2%

Landing Page Conversion Rate

 

Data collected collected two weeks after implementation.