Rewards dashboard redesign
The Microsoft Rewards program has over 70 million members who earn points from interacting with Microsoft products and redeem them on nonprofit donations or prizes. The rewards program is going through a refresh and needed a dashboard to reflect those changes.
Role: UI/UX designer, researcher
Process: Competitive analysis, personas, user journey, card sorting, low-fi prototyping
Tools: Figma, UX labs
The problem
The Microsoft Rewards dashboard had not been updated since 2014. In that time, the program partnered with several Microsoft products and decided to merge Give with Bing, the donation segment of the Rewards program, with the rewards dashboard. In addition, Microsoft Web Services received a new style guide which was not reflected in the dashboard. I had to figure out how to organize earning opportunities, incorporate giving and reconcile the myriad of styles used.
Give with Bing falls under the rewards program but has slightly different rules and a different dashboard. Give users need to use both dashboards to access earning opportunities.
Heat map
Heat maps showed alarmingly high click-back rates and low engagement with Rewards activities. It also showed a steep drop in engagement the further a user scroller.
Initial research
To further understand where Rewards has been and where it could go, I poured through numerous Microsoft research studies, discovered older Rewards dashboard designs and analyzed competitors.
UX research
5+ years of studies on Microsoft Rewards, Give with Bing and human psychology as it relates to HCI.
Internal research
Multiple dashboards had been designed over the years by different teams but none were implemented
Inspiration research
Dashboards often use side menus and a lot of pertinent content above the fold personlized for the user.
Competitive research
I combed through some of the top-rated rewards programs to see how their dashboards engaged users.
Insights and opportunities
The research highlighted three key areas that needed to be rectified in the dashboard and which opportunities could address those issues.
Insights
Low Comprehension
Some participants were confused how the program worked and never received answers
- Low program comprehension meant users were unable to fully understand the benefit to themselves or their charity in using Give with Bing.
- There is limited access to rewards information (how to earn, redeem, special offers, etc)
Minimal Value
Participants perceive points to accumulate too slowly
- Participants report discrepancies between how important a rewards feature is and how satisfied they were with said feature
- Low visibility of rewards
- Users often don’t see value until they earn a reward which can take 9 months.
Diminishing Engagement
Few interactive elements mean users often set and forget the rewards program and have little incentive to visit the dashboard
- Content does not speak to many users
- The initial commitment you propose to the user has to be low-stakes and easy to make
- Users felt lost or overwhelmed by the dashboard content
Opportunities
Simplification
- Clarify ways to earn points
- Clear hierarchy of earning and rewards – not long scrolling list
- Adaptable for future new features
Personalization
- Highlight earning and reward opportunites user is actually interested in
- Show only information relevant to the specific user type
Celebration
- Shine a light on smaller accomplishments (badges, levels, streaks, etc)
- Track redemption goals and progress
Getting to know our users
With the Give with Bing becoming incorporated into the rewards dashboard, there were new users to consider. I discovered their motivations and frustrations so I could design a dashboard to address them.
User journey through the dashboard
I updated a previously created user journey with updated engagement and acquisition features. I also wanted to see how the dashboard would fit in with the new rewards hub that was focused on earning. The dashboard is the main location for users to redeem their points but how could we further distinguish it and get users to come back?
Initial navigation
Over the past year, the rewards program had become a prominent asset in a variety of Microsoft products since. I used the information architecture to sort how all these new features could fit together on the dashboard.
Mild to wild
I used those sketches to build wireframes and then black-and-white prototypes. I performed A/B/C testing on three distinct homepage layouts with over 150 users to see what tested well with our user base.
Cards
This “mild” design used cards similar to those on the original dashboard. Modules would be moveable based on users interests. Some users liked having all of the information on one page but many found it to be too complex, stiff and overwhelming. It was the least liked of the three models.
Focus
We knew from research that the more users scroll, the less they engage with the content. In this “wild” version, everything would be above the fold. Content would be simplified with users receiving three activities a day to complete. Users responded favorably calling it “clean and clear.”
Hybrid
The third version was a hybrid of focus and cards. It focused on tasks of the day while provide additional rewards and earning features. Users liked the history graphics and additional information. Results for hybrid and focus were very similar.
Card sort architecture
Users liked the focus model and I was challenged to push the idea further – really create a page that would have a single objective. I took a step back and asked 30 potential users to do a card sort on a list of homepage elements. I used the resulting dendrogram to organize different page structures based on users knowledge and my own insight.
Page layout
I chose the fourth version I laid out above as it limited the page count and closely aligned to the dendrogram. I then returned to a focused vision of the dashboard with two more distinct layouts.
Concise
No scroll, minimal card use, hyper personalized, “type A”, side menu
Playful
Dynamic card use, scrolling, fun, relaxing with time to explore and meander, top menu
Visual exploration
With deadlines fast approaching, I worked on a few visual designs based on Microsoft’s new maximal illustration and fluent style guide.
Explorations using the new maximal style guide
