The product
Rewards within CaféWell web & mobile product
My role
Lead Product Designer on all Rewards features from 2020-present
The challenge
The solution
My approach
Discovery & Research
My goal during the discovery & research phase is to understand a few key questions:
- Learn how the users use the Rewards Dashboard. What kind of information are users consistently seeking and how are they accessing it?
- What are the main pain or points of confusion for the users?
- What information do users need to more clearly use and understand the Rewards Dashboard?
Asking & understanding these questions helped me gather data that could be synthesized to build a problem statement.
Define the problem
Users use the Rewards Dashboard to check their rewards status however with many configurable ways to earn and redeem rewards, users found the Rewards Dashboard hard to scan for the most important information.
To ensure that concerns and pain points of the users were met, I organized the collected information based on reward type & key questions: informational, current status, progress towards overall goal and history.
As a user, I want to know how much more time I have to continue earning
As a user, I want to know how much more I need to do within my rewards program
As a user, I want to know my current status
As a user, I want to know how much left I can spend or redeem
As a user, I want to know when I will get rewarded
As a user, I want to know the differences between rewards in the case that I am eligible for more than one reward type
Ideation
After sketching pencil to paper, I brought my sketches into Figma to continue to explore & test ways to clarify the complexities of rewards to users.
During my explorations, I explored 3 core UX questions grounded in user feedback:
"Why doesn't my current balance match my progress bar?"
UX exploration: What if the progress bar resets every time a threshold has been debited?
Showing the users a progress bar that has reset back to zero would give a visual indicator that a user's points have been redeemed and help explain a discrepancy between current balance and total balance. However, the login frequency of many CaféWell users is less than 1x / week, and having the user's progress bar be set back to zero while the user is offline could be equally confusing as not seeing any further details. Additionally, the post-reward phenomenon indicates that motivation tends to drop to the baseline after their goal has been reached, even with another reward potential opportunity. This risks consumer drop-off in both their rewards & healthy behavior activity.
"My rewards were automatically redeemed but I don't know when they will be added to my paycheck/FSA/HSA/premium reduction. I always get my gift card reward right away."
UX exploration: How can we display the various states that a user's reward could be in?
Depending on the type of reward(s) a user was eligible there were several types of states that the user's reward & redemption status could be. For non-threshold rewards like Gift Cards, users can redeem at any point during their program year.
For rewards with thresholds, users rewards could be "in progress", "debited but pending processing", "processed but not yet in user's statement" or "fully processed and paid out". Due to the nature of all these states and the fact that users could have more than one type of reward, it was crucial to explore a scalable rewards dashboard that could accommodate any rewards scenario.
"I want to see both my current balance [to understand how much I can redeem] and how much I've earned since I started the program in the same view"
UX exploration: How can we display to the user both their current progress & balance while keeping them in the context of the full year's potential?
It was important to be able to show user's progress in the context of the whole year but with incremental thresholds and a user's current balance not always the same value as their total progress throughout the year, I found it difficult to display both a micro and macro scale on one progress bar.
Testing & Feedback
I tested several iterations of my designs internally using in-person usability testing sessions scheduled with both users and stakeholders of the platform and using Maze.design prototypes. I also presented my designs to several current clients to gather feedback on if the designs would solve concerns they had heard from their own users of the Rewards Dashboard.
Gift Card (non threshold rewards)
Using one linear progress bar for gift card rewards allows users to see their progress in the context of the full year and quickly scan their current balance (and dollar amount to spend in the Marketplace) and decide what gift card they can redeem at a glance.
Paycheck Bonus (threshold reward)
For reward types with thresholds, I explored a donut progress bar to indicate at a glance that this reward type worked differently than rewards without thresholds. Each segment of the progress bar indicated a threshold that a user must meet in order to redeem their rewards. Users can quickly scan their current balance and how many more points they need to meet their next threshold.
Based on the feedback
👍 Here's what was working:
- Seeing the current balance is clear and does not conflict with any numerical value on the progress bar to avoid causing additional confusion
- Users can visualize their progress in relation to the whole program year for both currencies
🖐 Here's where we needed continued iteration:
- If users had more than one currency, collected feedback voiced concern that seeing two completely different UI progress indicators would be confusing
- Dynamically presenting relevant copy to the user at every point throughout their rewards experience would be a large UX-writing and development lift that would fall out of scope
- States for current balance, pending rewards & previously redeemed rewards were still left unclear
Final designs
After continued iteration, I revised my designs to address key concerns and ensure user's needs were being met. To address the feedback and ensure greater clarity between the different rewards types & states I worked on a UI pattern for each of the 3 main rewards states to use on the progress bar. These 3 states scale to all reward types including gift cards, paycheck bonus, premium reduction, HSA/FSA, paid time off, or sweepstakes entries.
Using these 3 states to depict previous, current and future state for all Rewards scaled to over 8 common reward configurations.
Outcomes
🔨 This feature is currently on the roadmap for development in Q2! Here's what we expect to see:
↑ Increase in number of Activities completed
↑ Increase in Consumer NPS feedback and score
↓ Decrease in support tickets regarding rewards
💭 This case study primarily covered the Rewards Dashboard however I was also the lead designer of several other rewards related features including:
- Creating a new library of currency icons to accurately depict each currency type
- Transactional rewards history page that includes earned, spent, and pending rewards
- A Rewards Dashboard that can scale to include multiple family members
- A redesign of the entire Marketplace user experience
- A UI & UX refresh of Activity complex business rules that allow users to earn rewards
Let's connect and chat about it!
Say hello!
Have questions or want to talk UX? Feel free to connect with me!