A & F Promotion Experience Design

An information system that provides the right promo info to the customer



project


Background & Goal of the project

When I worked in Abercrombie & Fitch UX team, AF was working on redesigning and rebuilding the shopping bag. I was tasked to redesign the promotion experience inside the shopping bag. It's a really important feature for our price sensitive customers. We had two main goals for this design project: Having Confidence and Purchasing More.


image promo

Have Confidence

Give the customer all the promotion information they need, so that they have confidence to go check out.

image shopping cart

Purchase More

Subtly let the customers know there are more promotions going on and that might lead them to shop more.

Research Insights & Users' Needs

We all do lots of shopping online, but we might not be paying attention to the promotion experience. So I did patterning and comparative analysis with many popular e-commerce sites and find out some key insights for the promotion design. The promotion experience needs to be consistent, visible and matching the real world shopping experience.

project

After I summarized the factors for a good promotion experience, I evaluated our website with these four factors: style consistency, content clarity, contrast, and proximity & saliency. I found out that some of our pages carry less promo information, such as the product details page, shopping bag, and checkout page.

project


People came to our site from many different sources and they landed on very different pages. If they landed on a page with less promo info, they didn't get to see the promo content until they got to the shopping bag. So, we had to make sure the shopping bag had a very clear overview of our promo to encourage them to checkout.


image promo


23%

of the user traffic that landed on the low promo pages may not have the opportunity to see our promotion content before they got to the shopping bag.

Top Use Cases That Needed to be Solved

We held meetings with the research team, marketing team, PMs and designers in order to rank the priority of the use cases we needed to solve.

project


image promo


Use case 1: Item doesn't qualify for promotion

Usually, there are exclusions for a promo code. While in the shopping bag, some items will not be discounted by the promo code. Will the user figure out why their item is not qualified?


Use case 2: Buy one, get one 50% off or free

Customers lose track of the BOGO items and did not understand how the price after discount was calculated.

image promo

The Solution - A Promo Information System

To solve the problems in these use cases, we came up with many small design solutions. These solutions were: item level badging, proactive promo messaging, promotion detail modeling, a "view all offers" link, showing an error message.

image promo image promo
image promo
image promo image promo


How will these solutions work together in the shopping bag to solve the problems, while also keeping it simple and clean? I developed this chart to map out how these solutions would solve the different problems.

project


After we got the design solutions, our user research team helped us to use these prototypes to do user testing. We used method such as heat maps, click through rate and various other tools.

image promo
image promo

I also converted these designs to deliverable documents for our engineer team. We were also planning to do AB testing to see if it was a successful design.

project project