App design
Increasing user activation rates for an award-winning loyalty program
Redesigning the Winn-Dixie Rewards app to help increase user activation rates by 3.5%.
Timeline
4 months
Role
UX/UI designer
Stakeholders
2 product managers, 1 loyalty strategy manager, 5 engineers
Background
Winn-Dixie Rewards is a loyalty program that allows customers to earn points on qualifying purchases for free groceries. Within the program, there is a percent back offer feature that allows you to maximize your savings by earning even more points.
The award-winning loyalty program went through a brand refresh to better communicate the benefits. Since we had the opportunity to improve the look and feel of the app, we wanted to take it a step further and solve an app engagement issue.
The goal of this project was to increase user engagement and activation rates for the percent back offer feature.
Impact
3.5% increase in user activation rates
App users weren’t using a valuable money-saving feature
The problem
With inflation driving up grocery prices, saving money is top of mind for the majority of shoppers. This creates an opportunity for the Winn-Dixie Rewards program to shine.
Winn-Dixie Rewards is a loyalty program where members receive a variety of money-saving benefits, including earning points on every purchase that can be used towards free groceries. Members can also earn even more points with percent back offers through the app.
However, we found that only 7.4% of users were interacting with percent back offers. Given that saving money is a top concern, why weren’t more users taking advantage of this valuable feature?
In addition to percent back offers being beneficial to our customers' wallets, they deliver the highest ROI for the rewards program and business. By increasing user activation rates for this feature, we have the potential to positively impact sales.
Improving the look and feel of the app with branding updates
Auditing the Winn-Dixie app to implement branding updates
Winn-Dixie Rewards went through a branding refresh in effort to simplify the program, make it more cohesive with Winn-Dixie’s overall brand, and better communicate its benefits.
For the first part of this project, we were tasked with auditing the app and making UI updates to reflect this change. The majority of these branding updates included changes to:
Colors
Icons
Imagery
Below are some examples of the previous UI versus the updated version.
While our team was tasked with making these updates, we saw an opportunity to tackle the percent back offer engagement problem.
Taking the opportunity to solve the percent back offer engagement issue
Evaluating the current experience through user testing
To better understand the problem, we wanted to put ourselves in the user’s shoes. We needed to evaluate the current experience and see if the placement of percent back offers was clear and easy to navigate to.
To accomplish this, we ran a user test to evaluate the current design of the home tab.
Using first click test as a testing method
A first click test measures how easy it is to complete a task on a website, app, or design by asking users where they would click first.
Testing goal
Assess the current design of the home screen, focusing on percent back offer engagement. The goal is to determine if the current location of percent back offers is clear and easy to navigate and to see where they would click first to accomplish this task.
Benefit
Seeing exactly where people are clicking gives great insight into the current design. Clicks that occur in unexpected places can highlight confusing parts of the interface and are useful for informing future design choices.
Participant demographics: Meet Mallory
Mallory was a persona created based on data from the Winn-Dixie Rewards program. For this study, we recruited 10 participants with the following attributes:
Age: 35-54
Sex: Female
Household size: 2+
Household income: $30k-$100k
Location: Florida, Georgia, Alabama, Louisiana, Mississippi
Testing prompt
Imagine you wanted to activate a percent back offer as a part of a Rewards program to earn points back on your next grocery shop.
Where would you click to find the offer?
Results
70% of participants clicked on the rewards tab on the bottom navigation.
30% of participants clicked the Winn-Dixie wallet.
When asked how confident they were that they completed the task successfully, only 20% of participants said they were extremely confident.
Making it as quick and easy as possible to activate percent back offers
The solution
After evaluating our users’ needs through user testing, we landed on a clear solution to solve our problem. We need to make percent back offers quicker and easier to find by increasing the number of places where these offers are available.
We wanted to accomplish this by:
Home screen placement
Adding percent back offers to the home screen to increase their visibility
Rewards screen hierarchy
We had a hypothesis that users were scrolling right past these offers on the rewards tab
Exploring design solutions to increase the percent back offer footprint
Design problem #1: Updating percent back offer component
In the previous design of this component, we discovered that users weren’t clear if the offer was activated or not.
Solution
Since we had a set color scheme to choose from, we needed to incorporate the new branding for the percent back offer components. We ran a preference test with users to gain feedback on which style they liked and why.
70% of users preferred using a green activation color. They associated this color with "success."
Design problem #2: Percent back offer placement
In the current design, percent back offers were only available on the rewards screen of the app.
Solution
We wanted these offers to be one of the first things a user sees when opening the app. This led us to adding the offers to the home screen, right under the rewards balance.
Design problem #3: Make percent back offers above the fold
In order to accomplish this, we explored design solutions for the slider. The purpose of the slider is to promote marketing messages across the business. The current design was clunky and took up too much real estate.
Solution
Updated the slider design with a shortened height and a more modern look.
Design problem #4: Updating the visual hierarchy of percent back offers on the rewards screen
We had a hypothesis that users were scrolling right past these offers on the rewards screen,
Solution
We swapped the clipped savings and product scan features to be at the top of the screen instead of percent back offers. This makes the offers feel more cohesive with the coupon gallery, putting more emphasis of it being a money-saving feature.
Final designs
Developer handoff & continued support
Preparing the designs for a seamless handoff
During this stage, I supported the app product manager in writing requirements and collaborated closely with the lead developer.
For the file handoff, I ensured that all assets were easily accessible for the developers and provided them with design specs and an annotated Figma file.
Results & final thoughts
Results
This project was shipped January 2025. Since then, we monitored percent back activation rates and saw a 3.5% increase compared to the previous year.
3.5%
increase
in activation rates
8+
screens
redesigned
We believe that the largest driver of this increase was adding the percent back offers to the home screen of the Winn-Dixie Rewards app.
Final thoughts
It was so rewarding to see that we accomplished our goal! By increasing the number of places where percent back offers were available, we were able to see more app users use the money-saving feature.
It was eye opening to see that a seemingly simple design solution was impactful. Sometimes the most obvious solutions can be right under your nose (or in this case, on the home screen!).
Although the results of this project were positive, there were still some challenges we faced along the way. These included:
Limitations on creative assets
This project involved numerous departments in the business. Since the branding updates were already finalized, I had to fit some predetermined design decisions into my workflow.
Removed 5 color styles from the app
This was a challenge because we were working with a limited color palette. The brand colors are already a little “loud” to begin with, so I wanted to be conscious of the placement of elements and incorporate white space where I could.
There wasn’t an “official” marketing announcement of the brand refresh to current customers
We didn’t want customers to feel like we were taking away any benefits of the program. This was taken into consideration when we reskinned the app by trying to not make it feel too unfamiliar to our customer base.
