HEALTHCARE APP STEPS CHALLENGE

Increasing the reusability of an app steps challenge to drive engagement and registration

I worked on a healthcare app that included a steps challenge that encouraged healthier lifestyles for our users. These social corporate challenges were designed to promote daily engagement with the app and increase registration. Users logged daily steps and could earn rewards and incentives for them. The challenge was very different than the rest of the app, and functioned more as a mini-game inside of the larger healthcare app, which focused on other tasks like managing your health and healthcare claims.

We wanted a “gamefied” approach to our challenges, so it stood apart from the rest of our app and could engage the users with visuals and game play mechanics. The first version we launched had a fantasy theme, with a storyline involving traveling to floating islands in space. There was also an avatar that would evolve as you progressed through the levels and storyline. Some early research by the UX team pointed to “fantasy” as a theme that could hold appeal across demographics. 

WWF_1.png
WWF_FI3_2.png

THE PROBLEM

While the gamefied, social corporate challenge did well, and exceeded industry expectation for daily engagement (>65%) and social inclusiveness (>75%), and helped increase user NPS, we received some customer feedback that the fantasy theme didn’t resonate and they were hoping for other options. There was also a business need to give customers who had already run the challenge the ability to launch multiple challenges during the year. The challenges increased engagement and registration, and we wanted to continue that. What could we do to encourage our customers to launch the challenge again? What sorts of themes would resonate more with our users for future challenges? And how could we do this in a way that didn’t require an entirely new UX framework?

We posited that the best way to encourage customers to continue launching more steps challenges was to offer additional “themes” for the challenge that could re-use the existing UI/UX, but with a new look and feel and storyline. I had worked for another company where we had done this to some success, amassing a library of themes that gave customers a sense of choice and variety. I encouraged the Product team to consider themes as viable way to expand our challenge offerings without a need for brand new UX. The steps challenge itself had achieved some success; it was in reusability and in look-and-feel upon which we wanted to improve.

WHY WAS IT IMPORTANT TO SOLVE?

Increased engagement and registration: We wanted to capitalize on the increased engagement and registration rates that these Challenges were already achieving. 

Business Need: Customers who had already run the challenge wanted the ability to launch multiple challenges during the year. Reusability of the challenge was important, as it was currently the only fitness challenge available in the Castlight Health app. Many Jiff customers who were migrating to the Castlight app had run multiple challenges within a year and would likely want to continue to do so.

Leadership: My design team wasn’t being utilized to their full potential. I recognized a gap in our Challenge offerings and also knew that my team could help make it happen.

THE USERS

We had a wide range of users in our app, without any particular overarching demographic. Our customers ranged from large corporations to medium sized companies, across multiple industries (manufacturing, technology, retail) that spanned class, gender, age, race and culture. We needed to be able to accommodate lots of different demographics. The challenges we offer our customers had to appeal to a wide variety of users.

MY TEAM & ROLE

I led a team of 3 visual designers. We worked in concert with a UX Designer to establish a UX framework that would allow for some configurable elements in the design. We also worked with the UX researcher to conduct some testing around our concepts to help focus our efforts. I coordinated the efforts of my design team, with the goal to secure internal support for the idea of themed challenges. I was a design lead as well as an individual contributor for the project. I led brainstorms, created concept designs and mockups alongside my team. As the design lead, I coordinated our cross-functional efforts with the UX designer, UX researcher, and product manager.

DESIGN PROCESS

To generate new concept ideas for the “Walk With Friends” challenge, I asked the team (myself included) to come up with concept theme ideas. We started with a general brainstorm of high-level concepts, generating an idea list. With this list, we did a first round of UX research of our brainstormed themes. These were tested with ideas only, no visuals. We wanted to get a sense of what types of themes resonated with users, before moving on to visuals.

We then created mood boards for a few themes that included images, color palettes and design ideas. These were helpful to provide us with some definition, direction and inspiration.

Our first round of UX research involved asking participants for their reaction to a list of 22 theme ideas, but without visuals. 20 participants were asked for their top 3 preferred themes. From that research, we honed in on a smaller number of concepts to pursue visually.

The concepts that we created visual mocks for included: National Parks, International Travel, Vintage Arcade, Find the Clues Mystery, Road Trip, Outdoor/Camping, Wonders of the World.

But before we could create these visual mocks, I worked with the UX designer to understand what was doable in terms of customized theme assets, so that our mocks could put some practical UX considerations into place. The mocks were then used as part of an internal presentation to gain traction and internal support for the idea of creating a themes library for our Steps Challenges.

THE UX SOLUTION

The UX designer created specs for what we could configure, keeping in mind that we didn’t want to add much development time into the existing UX framework. We had the following UX constraints that we had to keep in mind:

WWF_UX_layers.png
  • We need theme concepts that could had an evolving avatar (or multiple avatars, as long as there were at least 5 levels of “evolution”)

  • Backgrounds needed to either use a solid color or simple gradients, as CSS only…no images

  • We could use an SVG overlay that could either repeat or stay static as a layer on top of the background color

  • Path colors were rendered in code, with 2 color states

UX Framework for theme artwork (partial specs shown here for example only)

UX Framework for theme artwork (partial specs shown here for example only)

THE THEMES

NATIONAL PARKS

Storyline: Travel through the country visiting different national parks. 

Avatars & Levels: Animals were used for avatars, while badges of famous park landscapes were used for level art.

Feedback: Avatars were “cute” and engaging. Design elements are clean and “straightforward”. Internal feedback was that is was too “American-centric” and we needed to rethink it for a more global appeal. We ended up creating a similar “outdoors/nature” theme that could work better for a global audience. We still kept the National Parks theme as it could appeal to our domestic customers.

National Parks Theme

National Parks Theme

INTERNATIONAL TRAVEL

Storyline: Travel across the globe.

Avatars & Levels: Travel themed icons or characters representing different locations for avatars, and collages of familiar cultural icons and airport baggage tickets were used for level art.

Feedback: Users liked the multiple avatar options, the look and feel, that it was “detailed”, and “it’s clear that a lot of thought went into it”. Also like that it was an educational opportunity for learning fun facts about different cultures. This was one of the themes that were in the top 5 during the 1st round of UX research.

International Travel Theme

International Travel Theme

RETRO ARCADE

Storyline: Gorilla is trying reach the top of the building

Avatars & Levels: Gorilla collects items as you level up, familiar classic arcade tropes like fruit were used for level art.

Feedback: Users were draws to “cute” and “interesting” characters. People were drawn to themes that could “take their mind off of exercise”. This was one of the top 5 themes that surfaced during 1st round of UX research.

Retro Arcade Theme

Retro Arcade Theme

Custom Corporate Themes

The product team also asked to see if we could re-theme the challenge for use as a corporate theme for one of our largest customers. Some of our customers were already asking if they could create their own custom version of a challenge and we wanted to be able to accommodate this request, especially for our largest customers. We opted to mock up a corporate theme that took into account the corporate history of the company, with a “storyline” that progressed chronologically through the different “levels” of the challenge. 

OUTCOME

The idea was well-received by the Senior Director of Wellbeing Product, who understood the potential for having a library of themes for challenges and was especially intrigued by the idea of custom challenges we could offer to our biggest clients. While the company pivoted and decided to invest energy in a brand new “Leaderboard” Challenge which focused on teams and competition, it was developed with “themes” in mind. My team helped launch 2 new themes for these new challenges, using the knowledge we had gathered during this conceptual design phase. We knew that being able to create variations on a theme for our challenges would be a worthwhile investment. It was scalable and efficient, and addressed a business need of increasing reusability of our challenges. Customers who had run our Leaderboard Challenge were eager to run a second one, and the new library themes made that possible.

Leaderboard_Themes.png
 
Trailblazers_DigitalDisplay@2x.png
ReachThePeak_DigitalDisplay@2x.png