Peloton - Case Study

Role: Lead User Research, UI Design, Prototyping

Team: David Robles (UI Designer) and Chanée Grant (Project Manager)

Project Time: 2-Week Sprint (Remote)

Tools: Figma, Miro, QuickTime

About Peloton

Peloton uses technology and design to connect the world through fitness, empowering people to be the best version of themselves anywhere, anytime.

The company has reinvented the fitness industry with its stationary bicycles and treadmills that allow monthly subscribers to remotely participate in classes via streaming media.

Design Challenge

To add a feature within Peloton's existing mobile app that allows users to create teams and interact with each other in order to build a stronger connection to their Peloton fitness community.

My Design Process

Design

• Site Mapping

• Sketching

• Wireframing

• Usability Testing

Deliver

• Hi-Fidelity Prototyping

• Retrospect

• Next Steps

Discover

• C&C Analysis

• User Interviews

• Affinity Mapping

Define

• User Persona

• Problem Statement

• How Might We Statements

Understanding The Competitive Fitness Landscape

Our team started the project by researching the fitness industry's mobile apps and how Peloton positions itself in relation to four competitors. We learned that Peloton shares many features with their competitors, but lacks key elements that typically drive user engagement.

Discover Phase

Screen Shot 2021-04-02 at 3.59.10 PM.png

Insights

• Peloton has no social media feed for users to post photos and make comments while competitors do

• Competitors allow users to contact friends through their app while Peloton lacks that feature

• Strava is the only company that gives users the Suggested Friends feature while Peloton offers Suggested Groups function

• Peloton and all its competitors offer users a Challenges feature to compete with one another

Conducting User Interviews to Learn about Needs and Frustrations

Now that we had some industry background, we conducted interviews (Peloton users, non-Peloton users, and people who participate in group workouts) to understand the reasoning, the importance and motivations on why they like to be a part of a group fitness class.

Insightful Quotes From Interviews

"I thrive in group work out classes. I feed off the group energy and push myself harder to run faster and lift more."

"I love the camaraderie that people have in group fitness classes. The sense of community helps me stay motivated."

"I want to meet more people in my classes. But it's awkward to make the first approach."

Identifying Trends

To synthesize the data from our interviews, we created an affinity map. The process helped our team identify trends and needs among our targeted audience. We used “I Statements” to interpret the data gathered to make it about real people and not just “data.”

Screen Shot 2021-04-02 at 4.04.57 PM.png

Trends / Themes

• I am more motivated to work out when I'm with other people.

• I like a sense of community.

• I engage in social media.

• I am discouraged on how to approach new people during work out classes.

Define Phase

Bringing Users to Life

After analyzing all of our synthesized research from our targeted users, we created Marie, who summarizes the key data points, behaviors and goals of all our users.

Marie's goal is to expand her workout community. She wants to meet other people during online workout groups and stay connected with these new people after class, which leads us to our problem statement.

Problem Statement

Marie needs a way to feel connected with other people, so that she can stay motivated and accountable during her workouts.

Screen Shot 2021-04-08 at 4.17.46 PM.png

How Might We Statements

To address Marie’s main problem, we applied the How Might We framework to brainstorm some potential ideas. The ones that resonated among our team were:

• HMW make it less awkward for Marie to communicate with new people?

• HMW connect Marie to other people who share similar interests?

Design Phase

Starting the Design Process

Now that we have some ideas to tackle the problem, our team mapped out content and navigation schemes influenced from our research.

Screen Shot 2021-04-02 at 2.55.44 PM.png

Here are 4 impactful features laid out that meets Marie’s specific needs:

1. A Feed where she is able to interact with other people by posting comments and pictures and giving high fives to others

2. A Chat system where she can send individual messages or participate in a group chat with other people

3. A community group called My Tags where Marie can follow other people who share the same interests

4. A new search bar to quickly look for friends and My Tag groups

Sketching Ideas

With an understanding of how the app would be structured using our site map, we started to white board and came up with some hand drawn, low fidelity sketches.

Social Feed

Community Group Activities

Messaging System

Screen Shot 2021-04-08 at 10.34.57 PM.pn

Next, we designed mid-fidelity grayscale wireframes. We added a “Feed” button on the lower footer menu to the existing Peloton navigation bar. Once a user clicks on the “Feed” icon, they will be sent to the new Feed page to post pictures and make comments.

Building Wireframes

Screen Shot 2021-04-08 at 11.07.38 PM.pn

Screen Shot 2021-04-08 at 11.04.46 PM.pn

Screen Shot 2021-04-08 at 11.02.11 PM.pn

Screen Shot 2021-04-08 at 10.50.12 PM.pn

Mid-Fidelity Usability Testing

We replaced the "Feed" button with the “Community” button on the lower footer menu to the existing Peloton navigation bar since testers did not know how to access the new features. Once a user clicks on the “Community” icon, they will be sent to the new Feed page and can access the Group and messaging system.

Original Footer Menu Buttons

1st Interation

2nd Iteration

Screen Shot 2021-04-08 at 9.59.05 AM.png

Screen Shot 2021-04-08 at 11.55.35 PM.pn

Screen Shot 2021-04-08 at 11.31.47 PM.pn

We completely changed the top navigation headers for clarity

Screen Shot 2021-04-02 at 3.04.40 PM.png

All users did not recognize the hashtag button as a way to search for a community group. We decided to refine the hashtag icon and label it “My Tags.” We also added a “Feed” button, an “Explore” button to search for hashtag communities and we created a “Chat” button.