Omaha Steaks Progress Tracker Enhancement
A critical and scalable project at Omaha Steaks involves the progress tracker enhancement. This feature improved their visual display, "gamified" the offer experience, and streamlined dynamic offers changes as decided by partners.
Role: UX Designer
Tools: Figma, UserZoomGO
Empathize
On Repeat
The difficulty of comprehending offers is a known issue. Throughout various tests, users are asked to identify what they've qualified for with their shopping journey. Often times, the results reveal a mixed bag of answers with a small portion of users answering correctly.
Define
Problem Statement
Omaha Steaks offers different promotions on a daily basis. However, complex offers make it difficult for customers to quickly comprehend each hurdle of an offer and what they have/have not qualified for.
Customers want to easily understand any given offer at a glance.
Ideate
Original Design
-
Relies heavily on copy to convey qualified/unqualified benefits
-
Orange progress bar
-
Free Gift displayed underneath progress bar
-
"Details" link further explains offer and terms and conditions
Let's Brainstorm
Version 1
-
What does the sentence mean?
-
How much do I need to spend to get Free Shipping?
-
Why is Free Shipping orange?
Version 2
-
What is the Free Gift?
-
What does the line mean?
-
Does this mean I need $29.01 total or $29.01 more?
Version 3
-
I can't see the black text.
-
how can we be more ADA compliant?
-
Does this mean I have to spend $159.99 more to get Free Shipping?
-
Do I get the Free Gift?
PROBLEM FRAMING
How might we?
How might we ______ ______________ ?
[verb]
[issue]
-
How might we accommodate the business' needs with different types of offers?
-
How might we clearly convey each offer throughout the experience to the user?
-
How might we indicate each hurdle within a given offer?
-
How might we exhibit whether a benefit has been achieved?
THINGS TO NOTE
Variant A
-
A brief sentence to describe the upcoming threshold of an offer and lists the remaining amount to spend to reach threshold
-
Carried over from the original design as desired by internal partners
-
-
When applicable, the Free Gift appeared beneath the tracker.
-
Opacity will change depending on their qualification (opaque when qualified, less opaque otherwise)
-
Base Design
The base design defines functionality of the progress tracker breaking down the dynamic changes as users shop. The variants below mainly play around with legibility and readability of messaging different hurdles.
Breakdown
1. When a hurdle has been reached, the label turns into the dark blue and the indicator includes a checkmark
2. The darkest blue circle signifies the user's progress
3. Unique to the last hurdle, it contains an outline in black to exhibit the end goal of the tracker. Any hurdles that have not been reached have a black text color.
THINGS TO NOTE
Variant B
-
Does not include a brief sentence (as shown in Variant A)
-
Shows the full dollar amount needed to qualify for a threshold
-
May confuse users as to whether it's the full amount of their cart or the remainder to spend
-
-
When applicable, the Free Gift appeared beneath the tracker.
-
Opacity will change depending on their qualification (opaque when qualified, less opaque otherwise)
-
THINGS TO NOTE
Variant C
-
Pointedly labels each threshold
-
Removes excess copy seen in the brief sentence
-
-
Shows the remaining amount to spend to reach each threshold
-
Implementation would add or subtract from each threshold as the user adds or removes products
-
-
When applicable, the Free Gift appeared beneath the tracker.
-
Opacity will change depending on their qualification (opaque when qualified, less opaque otherwise)
-
Test
Objective
The goal was to determine which progress tracker variant clearly communicates the offers' hurdles and benefits to users.
Unmoderated Usability Study
This test was namely to assess which of the variants resonated most with users. Three unmoderated usability studies were launched with each variant of the progress tracker. Participants were shown the tracker before any qualifications and after full qualification. At the end, all three variants were displayed of which they chose their preferred variant.
User Breakdown
-
38 Participants (~12 each study)
-
Existing Omaha Steaks customers
-
Mobile Shoppers
Study Stimulus
Results: Which variant won?
71% of participants preferred Variant C over Variants A & B
*Percentages determined out of all three tests, totaling 38 participants
When asked how easy it was to understand Variant C, 92% rated it at least Easy
**Percentage of participants from the "Version C" test with 12 participants
But, Why Variant C?
Participants' reasoning for choosing Variant C fell into three common themes:
*Percentages based on all test participants that chose “Variation C” across all 38 participants
**Determined out of all 38 participants
Other Variations
16%** of participants preferred Variant A
13%** of participants preferred Variant B
Implement
All the Scenarios
The progress tracker design is complex due to the nature of the offers and how they are applied. In any case, an offer could have 2 or 3 hurdles with a mix benefits such as a free gift, free shipping, and dollars off. The variety of offers coupled with a unique cart experience contribute to its intricacy.
To Developers, From UX
In order to realize a concept, hand off files were created to guide developers as they worked the ticket. Each hand off file describes design and functionality in ultra clarity. Of course, developers were free to reach out at any point in time with questions.
The example below shows a portion of the full hand off file which took 8 different scenarios into account.
Scalability
This enhancement was designed with the intention to gamify the shopping experience. To further encourage the 'game', the tracker will be implemented into other—more accessible—areas of the website. It will allow users to see their progress during the shopping journey. Currently, the progress tracker resides only on the cart page.
