Rewards experience within CaféWell web app & mobile product.
With 7 acquisitions by Welltok between 2010 and 2018 clients using Welltok's products don't have a cohesive design experience. Additionally, there were few core components built for reuse for either designers or developers to rely on as a source of truth, losing both time and consistency.
Create a scalable Rewards Dashboard interface where users can clearly see what progress they’ve made, understand what they have to do, and understand how their points will be redeemed to continue to incentivize them to complete actions on CaféWell.
My goal during the discovery & research phase is to understand a few key questions:
Asking & understanding these questions helped me gather data that could be synthesized to build a problem statement.
Users use the Rewards Dashboard to check their rewards status however with many configurable ways to earn and redeem rewards set up by clients, 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.
I created several user stories to continue to help guide my future exploration.
As a user, I want to know how much more time I have to continue earning so that I can redeem my rewards on the appropriate cadence.
As a user, I want to know my current status and how much more I need to do within my rewards program so that I know when I can redeem my rewards.
As a user, I want to know how much left I can spend or redeem so that I can maximize my rewards benefit.
As a user, I want to know when I will get rewarded so that I know I can trust the system with my hard earned rewards.
As a user, I want to know the differences between rewards in the case that I am eligible for more than one reward type so that I can maximize my reward benefits
Early hypothesis: with two main types of ways to earn:
We can visually differentiate the progress bar in the UI to help users understand the differences in the redemption process.
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 to the user both their current progress & balance while keeping them in the context of the full year's potential?
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 the various states that a user's reward could be in?
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.
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.
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.
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:
🖐 Here's where we needed continued iteration:
Design pivot: to address feedback, I explored a way to use one UI progress indicator to scale to all currencies, states, and complex scenarios without relying on dynamic UX writing or catering to edge use cases that would be phased out over time.
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.
↑ 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:
Let's connect and chat about it!
