Designing a white-labelled active rewards app

2 iPhone screens that show OTEarn app screens

Date 2019-2020

Client OrangeTheory Fitness

Background

Vitality’s newest market offering is a skimmed down, white-labeled version of the Vitality program that focuses solely on getting active with Apple Watch to earn rewards such as gift cards or bill credits. Currently, Vitality has partnerships with various telecoms and gyms to bring this “Active Rewards” app to their customers as a wellness component or add-on offering for their business. OrangeTheory Fitness was one of the first partners to go live with their version of the app known as “OTEarn.”

Jump to app visuals

The Challenge

Design an iOS app that integrates with Apple Watch and Health app data to create customized weekly physical activity goals, track progress and earn rewards. The app must be white-labeled to allow for partner brand customization and varying degrees of flexibility on rewards types and mechanisms.

My role

I was one of 2 of UX/UI designers who worked on this product over the course of 9-11 sprints. We split up features and journeys but collaborated closely as well.

My responsibilities:

Low-fidelity sketches and wireframes
High-fidelity prototypes
Collaborating with cross-functional teams
Conducting usability testing
Developing and maintaining design system

Process

Getting started

As the product owners provided requirements, we worked through our typical 5 day sprint process and powered through the different features and journeys for this product. During the sprints, we collaborated with other stakeholders, created wireframes, iterated designs, created prototypes, and tested with users when possible.

We had to continuously accommodate for rigid technical constraints from the back-end, but we were able to leverage some existing customer research and UI patterns from a previous design effort to be able to ship it faster than usual.

5 day sprint process

Graphic for 5 day sprint: Day 1 (understand the problem), Day 2 (sketch and wireframe), Day 3 (decide and iterate), Day 4 (design and prototype), Day 5 (test and refine)

Image of whiteboard and paper sketches and wireframes

Approach

Addressing user needs

The app premise is simple - get active and meet weekly goals while wearing your Apple Watch to earn rewards. The app is organized using a bottom navigation bar and tabs to match user expectations and needs that were discovered during the research phase:

Immediate program and progress information
Being able to verify past data and confirm that their points and rewards are syncing
See and redeem gift cards they win
Access things like FAQs, Contact and login preferences

Card-based

The app rewards and requirements can vary by partner. The Active Rewards app needed to be flexible enough to account for any of these scenarios, so we went with a card-based approach on the For You screen.

Users are able to see high-level progress towards goals and rewards, with the ability to drill down for details
Offers flexibility/modularity to add or remove different rewards-based cards for various partners
Consistent with other Vitality product offerings and creates brand unity

OT Earn app

A Vitality active rewards app for Orange Theory Fitness

Active rewards and OT Earn mobile iOS app Login screen

Active rewards and OT Earn mobile iOS app ForYou screen landed

Active rewards and OT Earn mobile iOS app ForYou screen scrolled

Active rewards and OT Earn mobile iOS app This week's challenge details screen

Active rewards and OT Earn mobile iOS app This week's challenge screen scrolled

Active rewards and OT Earn mobile iOS app Info modal screen

Active rewards and OT Earn mobile iOS app Challenges history screen

Active rewards and OT Earn mobile iOS app Rewards history screen

Active rewards and OT Earn mobile iOS app Gift cards screen

Active rewards and OT Earn mobile iOS app Login preferences screen

Active rewards and OT Earn mobile iOS app FAQs screen

Active rewards and OT Earn mobile iOS app Contact screen

Active rewards and OT Earn mobile iOS app Health App sharing screen

Customization

Beyond just being able to customize program details and rewards types, we had to ensure partners would be able to visually customize the app with their own brand colors and identity. I built out configuration guidelines so that partners knew what flexibility existed and so that we could internally account for contrast compliance and accessibility standards.

Design system

Throughout this product creation, I advocated for and led the charge in creating and implementing a design system through Invision Design System Manager (DSM). This has and will continue to help us design in a more agile way as new partners pick up this white label app.