Redesigning User Incentives

UX & UI Design | Prototyping & User Testing

THE CHALLENGE

Life.io uses an incentive-based model based on behavioral economics research to motivate users to complete healthy activities. As users log health records, they're awarded points, which translate into rewards and incentives. Some points can be earned once while others are ongoing incentives. User research suggested that many users were confused about how and when to earn points within the app.

points

THE APPROACH

To address these usability issues, I conducted a series of user research projects, sketched ideas, wireframed and prototyped solutions, and then monitored the results for impact.

Design Process

  1. Analyzed heat maps, support tickets and user recordings to gather quantitative insights on how users perceived the Points page
  2. Set up rapid usability tests on the current design and iterations of the refreshed features
  3. Developed a list of design requirements to address user pain points
  4. Released refreshed designs of the Points feature
  5. Continued to monitor user feedback on refreshed incentives designs

USER RESEARCH

I conducted both quantitative and qualitative research on the Points feature to uncover user feedback.

Exploratory Feedback on the Current Design

Users generally seemed confused over the purpose of the Points page. The majority (90%) understood that it was related to health and exercise, but most thought that they were supposed to track their exercise rather than gain insights into how to earn points.

Users expressed that the page was a little cluttered and called out the amount of white space. They enjoyed the to-do list but thought it could be a little more exciting and "satisfying", as one user suggested.

points
"Honestly I'm not sure what I'm doing here. I'm clearly trying to meet some predefined goals to get health points. I don't understand why."

- Participant feedback

Design Recommendations
  1. Reduce the amount of white space by changing the layout to the containers pattern
  2. Include a header that explains what the page is for and how it is helpful to the users
  3. Include icons or checkmarks in the to-do list
  4. Re-think the layout or remove the Health Records calendar
  5. More explanation on the Leaderboard
Evaluating Severity

I conducted a severity analysis of user recordings to define usability issues, prioritize them and develop a solution. The recordings uncovered additional usability issues that I hadn't considered, but decided to explore further. Although a minor issue, it appeared that users continued to click on user profiles. Without a public profiles feature available, users weren't able to see more information about friends in their population.

points

Impact Score

I calculated an impact score to assign a value to an issue using the following ranking: 1: suggestion from the participant; 2: minor effect on task performance; 3: causes frustration/ delay; 4: causes major frustration; 5: prevents user from completing task.

Severity is measured by multiply three scores (TASK CRITICALITY x IMPACT x FREQUENCY) to determine the impact.

Usability Issues

  1. Consider removing or changing the calendar pattern since it's not providing value to the user
  2. How can we improve upon the points list?
  3. Consider allowing Public Profiles
  4. How can we motivate users to click on list items to earn more points?

FEATURE PLANNING

points
Sketches of incentives
points
Sketches of earned and ongoing incentives

Wireframing

I went through several iterations of wireframing and usability testing to explore different ways to motivate users to earn rewards. Early wireframe explorations considered the use of badges as a way to incentivize users. These early designs focused on points earned over a week period. The user can see a quick checklist overview as well as their progress towards ongoing achievements.

points
Process illustration I share with clients
points
Wireframe of user incentives to show badges
points
points
Annotated responsive wireframe

Final Wireframe

My process for low-fidelity feature planning, wireframing and usability tests tends to be fluid. If usability tests indicate that users are confused or Design Critiques indicate the functionality could be improved, I go back to the drawing board.

Results from usability testing and internal Design Critiques indicated that a card pattern with active and disabled states (shown through copy, icons and color) was the best method to indicate the difference between one-time and ongoing achievements.

Icons Card Pattern Preference Test

These are two examples of Achievements that you've earned or have yet to earn. Which one do you find the most motivating, clear and captivating?

The results of this test were inconclusive; participants had a slight preference (55%) for Template A. To further investigate, I conducted a follow-up test of the entire page to give more context to participants.

Template A

messaging

Template B

messaging
Points Page A/B Test

Considering the above research and design recommendations, I designed two final versions of the Points page to address the usability issues. I began with the assumption that there is a statistically significant difference between the findability of Achievements (points that the user can earn) on the page.

Question: Please review the attached design and find the Achievements section on the page. Select where would you earn a new Health Status Achievement.

Template A had more confusion. The majority (64%) were able to successfully complete test tasks in Template B, with 25% selecting "Learn More" to find out more information about earning points and achievements.

Template A

messaging

Template B

messaging

DESIGN SOLUTION

The redesign of the Points page required visual design adjustments:

  1. More engaging data visualizations
  2. A cards pattern for Achievements
  3. Disabled and Active states for earned Achievements
  4. Supplementary content to learn more
messaging points
messaging
Sketches of header, empty state and icons
messaging

Visual Design

I created multiple empty state, header illustration and active/disabled icons using an SVG scaling method so that the imagery could easily be manipulated for white-labeling.

illustration

Component Creation

The design of this page required the creation of a new component: the mini-card. I documented the mini-card in the style guide for future use.

messaging

RESULTS

Since launching the new Points page designs, there's been an overall increase in time spent engaging with the incentives:

  1. We've seen a 580% increase in user engagement on the Points page
  2. We've seen a 7% increase in friendships
  3. The Points page is the top 10 most-visited features in the web app

User Research of the Points Page

messaging