Team Challenges

challenge-tracking-page.jpg

Product Overview

The challenge feature is a part of the larger Onlife Health web portal ecosystem in which users are incentivized to complete various activities in order to receive rewards such as discounts on their health insurance. Users can enroll in a challenge that will last a set amount of days containing a specific goal such as “Walk 10 Miles in 10 Days.”

Problems and Objectives

The primary goal of this project was to expand upon the current product with the added ability for users to participate in challenges in a team format to accommodate business and market needs.

In addition to adding the “join or create your own team” functionality, we also wanted to address the following:

  • Usability issues needed to be addressed with the existing feature

  • Make the product fully 508 compliant (web accessibility)

  • Update the interface to be cohesive with the rest of the application

 

Roles and Responsibilities

Role

I worked as UX/UI designer on a team that included a product manager, another UX designer and a team of developers.

Responsibilities

  • User research

  • User journeys and scenarios

  • Wireframes and prototypes

  • User Testing

  • Hi-fi design

  • Collaborate with developers for implementation

 

Process

Research

We recruited users who met our engaged persona for testing and interviews in the early project phase. We met with them 3 times over the course of several months for test sessions.

We also reviewed client and member feedback we had received over the past year to help prioritize and inform certain updates to make.

Competitive analysis was another aspect of the research phase. It was helpful to review competitor health challenge apps to become more aware of common practices.

 

Planning and Ideation

Recurring meetings with product managers, developers, another designer were held to discuss scope, user flows and scenarios.

After we would meet as a team it was helpful to work solo at times to brainstorm and sketch ideas before we reconvened. Once we had the primary user journeys down I created wireframes to use to further solidify interactions and design elements needed for the product. There were several new flows needed that didn’t exist in the existing product such as the ability to join or create a team.

This is an early wireframe of the new screen to join or create a team.

This is an early wireframe of the new screen to join or create a team.

This is an early lo-fi of the “enrollment period” the instance where a user has joined the challenge but it has not officially started yet.

This is an early lo-fi of the “enrollment period” the instance where a user has joined the challenge but it has not officially started yet.

This was a concept of how to display the information where a user would log their step data and view their team progress. I went through a number of examples for this page in the early lo-fi stage.

This was a concept of how to display the information where a user would log their step data and view their team progress. I went through a number of examples for this page in the early lo-fi stage.

 

Design and Testing

Once a concept was solidified I created a prototype to test with our 6 users. During the interview we talked to them about their experience with our challenge feature and had them complete a set of tasks such as joining or creating a team, viewing the leaderboard, messaging a team member and logging their steps in the feature.

We did 3 rounds of this starting with the existing product, a lo-fidelity example, and then multiple hi-fidelity prototypes in the later phases. We learned some ways to improve the existing feature and best ways to tackle the new additions needed to incorporate the “team” aspect of the product.

The clip above shows a user joining an existing team. One thing we added after usability testing was a prompt for a user to add their personal tracking device (such as a Fitbit) to track automatically for them during the challenge.

The clip above shows a user joining an existing team. One thing we added after usability testing was a prompt for a user to add their personal tracking device (such as a Fitbit) to track automatically for them during the challenge.

 
This example shows the scenario where a user does not have a device and manually tracks data during the day.

This example shows the scenario where a user does not have a device and manually tracks data during the day.

 

Implementation

Once we had gathered insights from the final round of testing and finalized the visual designs I delivered hi-fi mockups to dev, discussed things with them, along with an inspectable XD document and worked with the product owner on AC. I focused on the responsive web version of the product while the other designer focused on the mobile app version.

 
Users are provided with option of joining or creating a team. The screen above is the team creation page.

Users are provided with option of joining or creating a team. The screen above is the team creation page.

 
Pictured above: three different device sizes (laptop viewport, tablet and mobile) for the challenge tracking page.

Pictured above: three different device sizes (laptop viewport, tablet and mobile) for the challenge tracking page.

Next Steps

The Team Challenges feature will be released in 2020.