Peloton - UX Case study and redesign

Khooshali

8 min readDec 25, 2020

I want to preface that the following UI/UX case study + redesigns are part of a design challenge at General Assembly.

My Role - UX Researcher, Site map, Persona, Project management.

Other Team Members - Brunella Cataldi, Lynsey Cady

Time - 2 Week sprint

Tools - Figma, Adobe XD, Photoshop, Google Docs & Slides, and Monday.

We as a team worked on all the aspects of the project as well including project management, design thinking and research.

2020 was all about the online fitness gurus who took over Instagram and showed us some great home workout techniques with minimum to no gadgets. Many followed the no equipment workout while some got the best in class home equipment for a complete workout.

Context

Peloton is an American exercise equipment and media company with products including a stationary bicycle and treadmill that allow monthly subscribers to remotely participate in classes that are streamed from the company’s fitness studio. Much of the company’s popularity stems from its now-celebrity fitness instructors. It has great features including high five, live leaderboard and tags.

Challenge

In 2019 Peloton dropped its subscription prices and also released the app for Apple Watch and Fire TV. These apps enabled users to workout with celebrity fitness instructors, high five friends while working out, view recommended & other workouts and schedule workouts.

Our challenge is to add a new feature for chat and more personalization keeping in mind the existing app’s UI elements.

The goal is to create a better pre and post workout experience by giving the user tools to engage more with people on the current app. This will be achieved through strong user experience solutions based on user research and interactive testing.

C&C Analysis

First we looked at what other competitors and comparatives are doing in their applications to solve this problem.

Fitbit has the ability to make groups of people you know, challenge them and chat with them.
The Echelon and the Varis both just have the ability to challenge another member to a workout.

We explored 2 comparative companies, Meetup and Steam, that specialize in building community and discovered different successful ways members can create groups, chats, and hold events.

User Research

In order to create an effective design, we started with user research to understand the user and the tasks.

We want to know:

Customer’s goals, motivation and expectations before buying Peloton or any other competitor brand.
Does the user currently use the app or expect to use the app to create long lasting workout friendships?
Does the user feel more motivated to workout in a social media setting?

After the interview, we did Affinity Mapping to dive deep.

Our user research and interview led us to understand that different users had different opinions on group workouts. Here we discovered some people would work out in a virtual or real group only if they already knew all the participants. Other users would like to join a group workout for encouragement.

Users also find it difficult to find a workout buddy who has similar taste in music and workout pace.

It was also important to uncover how and why people are choosing to interact with others so we can learn from these choices.

People are interacting over video more than ever right now and we learned that some people feel even more connected because of increased virtual interactions.
Another notable finding here is that this user posts her workout summary on social media to hold herself accountable, which tells us we can find other ways to help people hold themselves accountable.

Persona

It was clear that we needed to develop two different personas to gain deeper customer insight after reviewing all of the information from our user interviews and affinity mapping. We made personas and used them as a guide to understand how a user would think or feel in the process. Both the personas have different goals and expectations.

Someone who wants to connect more with their existing friends and we named him William

William needs help getting motivated to work out because he plays video games and uses his computer for many hours, neglecting his body and fitness.

HMW Help William to connect with his Peloton buddies after exercising?

Someone that wants to find new people to connect with and we named her Hanna

Hanna wants to find more followers and needs to connect with more Peloton users because she enjoys motivating people to move their bodies and it is also effective for her business.

HMW Provide Hanna with tools to grow her followers?

Journey Map

Our team decided to do a journey map for this particular case study because we would be able to understand the user’s point of view and it can be a key part in user experience design and optimization in this project. We would be able to dive deep into the customer journey and pain points.

Here we can see in William’s journey map that his post class experience dropped because he was not able to challenge his friends in the awesome workout he just enjoyed.

In Anna’s journey map we can see that before and after the class her experience dropped because she was not able to create a group and chat with her followers through the app.

New User Flow

User lands on the app. And check for notifications from his chat. He can then open chat or go to view profile to look at teams page and find a workout. He then can add the workout in schedule and get ready for the workout.

Site Map

We started with a site map of the original app. We discovered that the Profile section of the app did not have much going on as compared to the other sections of the app. The site map led us to discover an opportunity to add and redesign the profile section to something more interactive.

After brainstorming we came to a new site map that was solving a lot of user problems, which included-

A chat feature to chat with your team and friends.
Profile section with more features to add, follow, and create groups of friends.

Develop

We started with a few sketches with different ideas of how we can add the new feature in the existing app without disturbing the current flow that the user is used to already and did some initial sketches and low fidelity wireframes.

We started with our first iteration and had a few changes done-

We removed the More option from bottom navigation and added a chat feature instead.
We renamed the profile to dashboard and moved it to the center of the bottom navigation bar.
We included a teams section on the top navigation bar of the dashboard.
We added the option to create a group and chat with members on the teams page.

User Testing

We tested our medium fidelity wireframe with 6 users and found-

New chat message was difficult to find for 75% of the users.
25% of users got confused on the dashboard page with settings.
Almost all of the users found too many icons on top and bottom navigation stressful.
50% of users chose the wrong icon on the teams lists page.

We had to fix these issues and redesign in high fidelity before the 2nd testing of the app.

We reorganized the icons on the top of the Teams screen and added an actual search bar to motivate them to find and join new teams.

We eliminated the top navigation on the main screen, only keeping the hamburger menu.

We also added a new contact icon next to the new group in the messages section.

Next we tested our high fidelity prototype again with 6 users.

The results were better than we expected and we only had a few issues that needed our attention.

First we need to make viewing team members more intuitive
Next we want to add a “challenge” button next to each member and link the member picture to their profile.
One suggestion was to give the users more opportunity to show their personalities on their profiles and team pages by adding background pictures. This gave us the idea to add a link on their profiles to the users’ Instagram page.