Lou & Grey

Redesign | A/B Testing and Optimization

The Problem

A private label for Ann Taylor, Lou & Grey, was elevated to a stand-alone brand in 2017. A year after launch, LouandGrey.com held a steady .9% conversion rate.

The Solution

Utilize A/B Testing and Optimizations to validate the site redesign and increase conversion.

Leveraging the ‘e-commerce funnel,’ we broke the site out into various buckets.

These buckets were our guiding point for tests. Making sure a test not only met the larger category but fit into one of our more ‘narrow’ buckets was crucial for testing accuracy.

Using twice-weekly syncs, our teams worked in a highly collaborative manner and launched more than 5 tests per sprint.

Each experiment followed the same process: Hypothesis, Design, Development, QA, Launch, and Observe.

Below is a look at how we broke down the Check Out Redesign and what we tracked to measure impact.

Provide User Interface and Experience Design, working collaboratively with Lou & Grey Creative to iterate on concepts, bringing ideas to life. Building prototypes when necessary for concept communication.

Analyze data, iterate, and optimize accordingly. Deliver key milestones, with tangible success, increasing site-wide conversation rates from .9% to 3% between February and October 2018.

Launch web and mobile experiences as expected and on time. Taking a mobile-first approach.

Led end-to-end design efforts as principal designer on the project. Working cross-functionally with partners across Ascena and Lou & Grey.

Project Overview

Test: Cart Redesign

Version: Control Experience

Desktop

Page doesn’t take up more than 1080px

The estimated total isn’t easily distinguishable

Product tiles waste vertical and horizontal space

Banners, navigation, etc.. waste vertical space

Mobile

Banners, navigation, promo code drop-down, etc. waste vertical space
Product tiles take up too much vertical space, fonts are too small
Need to scroll to proceed to check out CTA

Test: Cart Redesign

Version: Final Experience

Desktop

Seamless experience from cart to checkout
Utilizes the entire screen (Reactive design)
Product tiles use space more efficiently
Matches the brand's look and feel
The estimated total is clear

Mobile

Banners, navigation, etc.. removed from the top of the screen
Experience matches desktop seamlessly
Product tiles efficiently utilize space
Proceed to checkout CTA easy to find with minimal to no scrolling

Proceed to checkout CTA moved above order summary

Items on page enlarged by 30%

Language: Bag vs Tote vs Cart

Duplicate proceed to checkout button to top of page

Control: Mini tote

Save for later open vs closed on entry

Final: mini tote

Secure checkout: Does adding a ‘secure icon’ (lock) before ‘Proceed to Checkout’ increase conversion rates?

Cart Redesign | Changes Overview

Checkout | Control Experience

Where we started

- “Accordion” style bounding boxes for each information section, must fill out first section to see next section
- Total and order summary too small
- The page refreshes with each section completion, making the checkout process slow
- Vertical space is lost to unnecessary banners, global navigation, and checkout navigation
- Feels like a completely separate experience from the previous cart page
- Checkout navigation is introduced, calling out ‘bag/cart’ but not included on the cart
- Input boxes are too small for standard click radius

Test Overview | Checkout

Breaking It Down

Understanding what will make a measurable impact is key to breaking a design into testable sections, resulting in a successful test (note: success does not equal a win). This model allows for a flexible phased approach and optimizations. Below is a look at how we broke down Checkout and what we tracked to measure impact.

Side by side | Old vs New

Checkout | Redesign

Where we ended

- Seamless transition from cart to checkout
- Clear organized sections with large inputs
- Product tiles utilize space efficiently
- All necessary information for checkout is visible on entry, there is no need for the page to refresh
- No space wasted at the top of the screen
- Large inputs for easy selection
- No new pages between sections utilize long scroll to place your order CTA
- Seamless transition from cart