redesigning a highly configurable rewards dashboard

Project type
UI/UX Web • UI/UX Native Mobile (iOS/Android)
2020 - 2021
Lead Product Designer

The product

Rewards experience within CaféWell web app & mobile product.

The challenge

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.

The goal

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.

Discovery and research

My goal during the discovery & research phase is to understand a few key questions:

  1. What are the main pain or points of confusion for the users?
  2. What kind of information are users consistently seeking and how are they accessing it?
  3. 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 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:

  • With thresholds (time based increments that reward points are automatically redeemed set by a user's sponsor)
  • Without thresholds (user can manually redeem at any time)

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.

Testing and 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 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

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.

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.


↑ Increase
in number of Activities completed

↑ Increase in Consumer NPS feedback and score

↓ Decrease in support tickets regarding rewards

Additional contributions to 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!