WHOOP

24-hour Hackathon

During my bootcamp at BrainStation we were able to participate in a 24 hour hackathon with WHOOP. During this project my team had to design a new feature that fit with their current branding and existing features. We also paired with students from the web development cohort to develop our designs.

Project Overview

My Role

Product Designer

Project Type

Hackathon| WHOOP

Platform

iOS App

The Problem Space

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

How Might We 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

As this was only a 24-hour project the design process was accelerated. We were still able to research, ideate, design, and build an MVP that accomplished our goals.

What is Whoop?

WHOOP is a tool that allows individuals to unlock their greatest potential so they can perform at their highest level. As individuals we understand that our bodies are constantly evolving. WHOOP provides personalized insights to help you maintain and balance your Recovery, Strain, and Sleep.

Existing WHOOP Features

WHOOP already has a fully functional app with awesome features. Our job was not to redesign their product but to add a feature that brings value and potentially opens the door to a larger user base. Therefor, it was important to design a feature that would look and feel like the existing app. I have included screenshots of their existing product below.

Solution

Unlocking human potential doesn't have to only mean physical potential, it can also be cognitive potential. With this in mind we created a new metric called Cognitive Function. This is a related to stress and sleep from previous days, and calculated with data collected by WHOOP! Allowing users to track their cognitive function and providing advice on when they need to prioritize rest allows users to be more productive and successful at their jobs or as a student. This feature would attract new WHOOP customers, because the product would now bring value to not only high level athletes but also working professionals and students.

Cognitive Dashboard

Using the same UI layout as WHOOP’s existing app, we added a new category: Cognitive Function. The Function percentage is a product of previous day's stress and sleep. This allows users to see how their brain is functioning on that day and if they should get more rest tonight. "The Voice of WHOOP" which is the blurb below the progress bar suggests any alteration to the user's daily routine based on their cognitive function so that they can complete their goals the next day.

Advanced Metrics

Once again designing within the existing UI style we designed an advanced metrics screen that gives the user a weekly recap of the recent data collected. The first screen is a graph of what the users function percentage was at each day with a color indicating good, medium, or bad scores. The middle screen shows a graph for how much stress the user has been in the past week. Just like WHOOP's existing Strain metric, the Stress metric would be an arbitrary score given based on data collected by the WHOOP band. The far right screen is a recap of how much sleep the user got that day. These screens relate to each other as a high stress score paired with an average or below average night of sleep will lead to a lower function percentage the next day.

Developer Handoff

Our team consisted of 3 web development students, and part of our project was to develop the designs into a live site. We knew that 24 hours would be a short time to design and develop a site, especially with student developers, so we made sure to get them wireframes and components as soon as possible so they could work on them. We worked to ensure we communicated what was the most important details on the design as the developers had to prioritize different things. Once the designs were developed we worked together to go over the live site and discuss where things could be improved and what might have been looked past during the development stage.