Designing the online experience for a new Rewards Program at Saks OFF 5TH

Problem Statement

Retention is a problem for Saks OFF 5TH. 60 to 70% of their customers are new each year, and the average trip per customer is 1.7. SaksFirst, their existing rewards program shared with Saks Fifth Avenue, did not appeal to OFF 5TH customers. Research suggested that: applying for a credit card was perceived as a a barrier for sign up, and fewer than 2% of customers qualified for a SaksFirst reward based on their OFF 5TH spend alone.

The Challenge

Saks OFF 5TH wanted to create a stand alone tender neutral loyalty program, independent from Saks. The team's mission was to ensure that rewards and tiers were attainable and frequent enough to facilitate engagement and loyalty. The business goal was to deliver incremental sales by increasing loyalty enrollment rate by 40% and trip frequency by 10%.

My Role

Product Design Lead

Aug 2021 - May 2022

I was tasked to design the end-to-end experience across all digital channels at Saks OFF 5TH. This included the website, the iOS app, the Android app, and the tablet experience in-store used to enroll customers.
‍
My responsibilities included:

Conducting UX research and competitive analysis.
Gathering business requirements with the product team.
Creating wireframes, mockups and prototypes to communicate interaction and visual design.
Leading design review sessions to get alignment across multiple stakeholders.
Validating designs through user testing.
Conducting visual QA during development.
Prioritizing UI defects for launch.

Enrollment

User Research

I worked with a researcher to send out a survey to 113 existing customers and learn what were the most important loyalty features for our audience. We learned that getting extra savings/discounts was the most enticing benefit, and thus decided to highlight the 10% Welcome Reward as the top benefit for joining the program.

I conducted an unmoderated comparative test using competitors websites to learn more about shoppers attitudes and behavior when being presented with a loyalty program. I gather additional insights about what type of messaging was more successful at enticing people to sign up for a loyalty program. I learned that knowing that a program was FREE was critical to sign up.

User Testing Testimonials

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem.

It is a loyalty program that does not require the customer to sign up for a credit card. I also like that it lets me know some of the benefits I will get by being a member, such as free shipping.

Profile name

Madewell

It’s unclear if it’s a paid loyalty program and there was no learn more button.

Author Name

Madewell

The icon was easy to spot, and the pop up was simple to understand and sign up for.

Profile name

Madewell

“It seems like I have to spend a lot to earn points to get a small credit; unsure of the point structure.”

Author Name

Saks

"I was not sure if it’s free to join and it was not clear at first that it’s a loyalty program."

Author Name

Saks

I probably would not (join) cause other than a discount not sure what else is in the program.

Profile name

H&M

Competitive Analysis

I conducted benchmarking and competitive analysis with direct competitors and best-in class loyalty programs. I found different approaches to enrollment and facilitated a workshop session with the SVP of Marketing, the DVP of Loyalty and Product Leadership Team to discuss:

One step vs multi-step approach
Auto-enrolled vs separate opt-in approach

We decided that an auto-enrolled, one-step approach to enroll because it would be the path to less resistance. It would also simplify the enrollment flow and the messaging across the site for the customer, and make it easier for the business to track registered accounts (rather than having separate groups of loyalty accounts and registered-not enrolled accounts) moving forward. I encouraged stakeholders to keep the form short and only request information that is absolutely necessary.

One Step Approach

Opt-in is manually selected as a checkbox. This approach allows customers to opt-out of loyalty when creating an account. Seen on Saks, Macys and Revolve.

Multi-Step Approach

Splits create account flow from loyalty enrollment flow. This approach introduces the program and its benefits before asking customers to opt-in. Seen on Nordstrom, Target.

Auto-Enrolled Approach

Customer is auto-enrolled when creating an online account. No ability to opt-out. Seen on Sephora, H&M, Madewell, Jcrew.

Separate Opt-In Approach

Loyalty enrollment is handle separately in Loyalty Marketing Page or Account Dashboard. Not part of regular Create Online account flow. Seen on Bloomingdales and Urban Outfitters.

Wireframing

I created medium fidelity wireframes and user flows to capture high level requirements, communicate structure and gain alignment with the team. These were then used as reference to collaborate with other team members and collect detail requirements such as final copy and graphic assets.

Prototype Testing & Design Iteration

I created a prototype and conducted an unmoderated usability study to test the enrollment flow. The goal of this test was to see if I could find any usability issues with the enrollment flow, as well as validate if people will show reluctance to complete enrollment when they see the Account Verification prompt.

The results showed that people were willing and more likely to verify their account right away after creation, rather than leaving it for later. The reasons were: (1) this step has become very common and expected in today's digital landscape, (2) they want to make sure they can use their welcome reward and would rather do it now than later because they may forget.
‍
‍The study also revealed that the error messaging and enrollment flow for people that already had an online account needed to improve.

Once a user entered an email associated with an existing online account, an error message appears prompting users to sign up using a different form. This message and flow proved to be confusing for people during user testing. It was not clear why they still needed to enroll if they already had an account. Some people also thought they were signing in instead of signing up when prompted to provide their email, password and mobile number.

Once a user entered an email associated with an existing online account, the form fields below become disabled to prevent people from continue filling up the form and pay attention to the error message. The message prompts users to sign in first to continue enrollment. Once the user is logged in, they are asked to enter their mobile number to complete enrollment.

Visual Design

The team also commissioned an external branding agency to create the branding for the Loyalty program. After they delivered a style guide, I was able to design the new UI, applying the new branding guidelines. The final copy was also incorporated in these high fidelity mockups.

Key Digital Touchpoints

I identified key touchpoints to promote the Loyalty program and entice people to sign up.

Custom Prompt: to bring awareness for people entering the website or opening the app for the first time. Previous A/B test showed that this type of prompt significantly increases sign up.

Product Detail Page: to bring awareness in our most visited page. After deploying this feature, we saw most enrollments happening on this page.

Sign In / Account Page: to remind people that creating an account equals joining the Loyalty program.

Order Confirmation Page: to encourage people that checkout as a guest to sign up by offering points for their recent transaction as an incentive. Since deploying this feature, we saw a 10% increase in our average daily online enrollments.

Earn and Burn

At checkout, I added a line item in the Order Summary showing any Rewards Applied as well as the Points to Be Earned. I anticipated that some customers may get confused if they don't see their points reflected in their account right away after making a purchase. That is why I decided to include a message explaining that the points will be updated in their account once the order ships in the Order Confirmation screen.

My goal was to make it easy and quick to apply and remove a reward in the cart and checkout experience. Instead of requiring customers to look for a promo code in their account or email and having to enter it manually every time they want to use a reward, I decided to directly display the customer's rewards in the cart and checkout screens so they can apply and remove them with just one button. I also included the expiration date for each reward to create urgency, and remind customers that they reward expire.

Prototype Testing

I created medium fidelity wireframes to prototype the desired user flow and get early user feedback. I conducted unmoderated user testing with 8 participants and got very positive feedback. Participants loved how easy it was to apply rewards compared to other competitors.

The biggest learning from this test was that I needed to make the Points to Be Earned more noticeable. Some participants had some difficulty locating how many points they were earning with this transaction. Even though the final UI was not designed yet at this stage because I was awaiting the branding guidelines from our Marketing organization, this was valuable feedback that I took into consideration when designing the final UI.

Medium fidelity wireframes

Loyalty Dashboard

MY REWARDS: the rewards are listed and sorted by earliest expiration date to create urgency.

MY STATUS PROGRESS: next tier benefits are displayed to motivate customers to increase their spend.

MY POINTS BALANCE: displays current points and amount needed to earn the next cash reward.

MY ACTIVITY: list all point activity transactions including when points are earned, and when rewards are issued.

NEED HELP?: provides access to the program's FAQ and Terms and Conditions.

‍

The purpose of the Dashboard was to provide customers with a snapshot of their Loyalty account status and offer a convenient way to track their points and tier status. The Member ID is shown at the top for quick access and easier checkout in-store. Members can also recall their loyalty benefits based on their current tier.

Prototype Testing

I created medium fidelity prototype to test the features in the Dashboard in an unmoderated user test.

In general, the feedback was positive. The key takeaways after watching the recordings was that (1) I needed to make the Member ID QR button more clear and visible, and (2) add a tooltip next to the status expiration date for people that wanted information for how to keep their current status before it expires.

Results

6 months after launch, we have 1.5M enrolled members. 92% of them have verified their accounts online.

We are also seeing an 10% increase in our average daily online enrollment after Checkout after we implemented the ability to earn points from their purchase after a guest checkout on the order confirmation screen.

Lastly, we are seeing more registered checkouts as a results from implementing the loyalty program and combining online accounts with loyalty accounts. When comparing Registered checkouts from last year, we see an increase of +15% on Desktop, +14 on Mobile web, and +7 on Mobile app.

‍

Designing the online experience for a new Rewards Program at Saks OFF 5TH

User Testing Testimonials

Profile name

Author Name

Profile name

Author Name

Author Name

Profile name

One Step Approach

Multi-Step Approach

Auto-Enrolled Approach

Separate Opt-In Approach

Other Projects