Lou & Grey

Checkout | Testing and Optimization

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.

A private label for Ann Taylor; Lou & Grey was elevated to a stand-alone brand in 2017. However, Acena Retail Group struggled to pinpoint a successful web presence for the millennial-focused brand.

Problem

A year after launch, LouandGrey.com held a steady .9% conversion rate.

Goal

Utilizing a rigorous Testing and Optimization process, our team used experimentation to iterate, optimize, and validate the Lou & Grey redesign.

Our Process

Utilizing twice weekly syncs, our teams worked in a highly collaborative manner and launched upwards of 5 tests each sprint.

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

Our process allowed us to make quick optimizations to tests when we saw lift, but not enough to prove a hypothesis.

E-commerce Funnel

The ‘e-commerce conversion funnel’ was the foundation for our experimentation breakdown.

Check-out was the highest priority from a business perspective, making that our starting point.

Buckets Breakdown

HomePage

Navigation
Search
Above the fold
Return visit

Category Page

Filters
Category navigation
Product per line
Quickview

Product Page

Product image
Product details
Call to action
Product description

Check-out

Language
Cart (Tote)
Check-out (steps)

Cart | Control Experience

Where we started

- 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
- 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 Overview | Cart

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 the Cart (Tote) redesign and what we tracked to measure impact.

Side by side | Old vs New

Cart | Redesign

Where we ended

- 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
- Estimated total is clear
- 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

Additional Screens | Cart Tests

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?

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