victor-freitas-WvDYdXDzkhs-unsplash.jpg
whoop_4.0_logo_white.png

X
BRAINSTATION

WHOOP x BRAINSTATION

My Role

UX Research| UX Designer 

Timeline

24 hours

Project Type

Hackathon

Platform

iOS App

For the hackathon, I was paired with one UX Designer and 3 Web developers. We had 24 hours to design a feature that aligned with WHOOPs' goals, branding, and existing features to solve their current problem. 

Design Challenge

WHOOP and its users have seen the tremendous benefits of its wearable technology product. How can we help even more people to unlock the benefits of understanding what their bodies are trying to tell them?

They are looking to:

  • Empower users to take control of their health and wellness

  • Educate existing and prospective users on the health benefits of recovery, sleep, and activity tracking

  • Integrate with other existing health, wellness, and fitness applications

  • Explore new opportunities for users to integrate WHOOP into their everyday lives

Design Question

How might we inspire individuals at any stage of their health and wellness journey to reach their goals via WHOOP’s personalized tracking and coaching feedback?

Design Process

Due to the 24-hour time constraint, my team decided to modify the design process to deliver the best design solution for the proposed challenge. 

01.

Empathize

  • Design Challenge 

  • Problem Space 

  • Secondary Research

02.

Define

  • Hypothesis 

  • Interviews

03.

Ideate

  • Brainstorm

  • Task Flow

03.

Prototype

  • UI Library 

  • Sketches

  • Wireframes

  • Protoype

Secondary Research

To be able to create a design solution that followed brand standards and was aligned with their mission statement we had to do some research on WHOOP.

We researched their mission statement, existing features, reviews, opinions, goals, and beliefs. We found that WHOOP collects in-depth data on sleep, training, recovery, and health to provide the best-personalized feedback. Since their goal is to expand their market we went on to explore ways for non-athletes to benefit from the data collected. 

Our goal was to better understand what users of wearable technology look for when selecting a fitness tracker. We found that the most relevant features were:

 

Image by Андрей Сизов

Good battery life

Image by Markus Spiske

Measurable data

Image by Scott Webb

Workout plans

When comparing our research with WHOOPs' technology we found that they already offer a great battery life and measurable statistics of all the data collected. Therefore, we decided to focus on creating workout plans for their users.

Hypothesis

We hypothesized that users want custom workout plans that link directly to their fitness tracker based on the data collected. 

Interviews

To validate our hypothesis we conducted 5 interviews to learn more about the users' pain points, motivations, and behaviors regarding their workout routine. The main insights and frustrations collected were divided into the following main themes:

01.

Tracker

People love being able to track their routines for future access

02.

Routines

Most people need help structuring their routine to get optimal results

03.

Challenges

People love the motivation to stay active given by challenges

Task Flow

Considering the design question, existing features, and interview findings we decided to focus on creating challenges for users to help increase retention rate. Our main goal was to implement our idea to the existing "Teams" feature of the app to facilitate the adaptation of current users and increase the productivity of this feature. 

We designed a task flow to show the steps users would take to complete the final task: select a challenge and track their statistics. 

Diagrama en blanco (1).png

Sketching

Our sketches exhibited the main screens the user would interact with to complete the task on hand. We focused on the individual challenges screen, the specific challenge screen, the progress screen, and the report screen. Our main idea was to create designs where users can easily join or start a new challenge with friends or by themselves.

Whoop sketches.png
Whoop sketches2.jpg
Whoop sketches 3.jpg
Whoop sketches4.jpg
Home Page individual.png
Home Page team.png
AB Challenge.png
Challenge Data.png

Wireframing

After selecting the best designs for our users, we translated them into mid-fidelity prototypes. We made some small adjustments with content distribution to provide the best user experience.  At the beginning of this stage, we started working closely with developers to ensure the final product would be delivered on time. We provided them with margins, padding, font, colors, and copy detail, and they had access to the figma file. 

UI Library

We prioritized adhering to the brands' existing UI to facilitate the adaptability of their current users. We searched for their brand and accent colors along with their typography and logo. 

Brand Colors
Brand Colors

press to zoom
Typography
Typography

press to zoom
Brand Colors
Brand Colors

press to zoom
1/2

High-Fidelity Prototype

The goal was to create a 'Challenges' section embedded into their 'Teams' feature to broaden their target users and increase retention rate. 
We continued with color injection to create hierarchy, guide the user through the app and adhere to the existing UI. 

IphoneXMockup_edited_edited.png

Key Learnings

Getting to work closely with developers under a stressful situation, due to time constraints, forced us to prioritize communication. We implemented the following strategy to achieve our end goal. 

01

Established time limits for each step of the design process and defined clear outcomes during each stage for developers to start their process. 

02

Constantly follow up with the team to make sure everyone is aligned with the goal of the corresponding stage. 

03

Set short and productive meetings between both teams to comment on the process and define the next steps. 

04

Set a team leader responsible to keep the team on track.