Visual Design | Interaction Design
The screenshots represent the workflow to book a live class in the Peloton app. Peloton is a high-tech stationary bike that delivers studio-style content to users via a mounted tablet at the front of the bike. Users are able to take two types of classes: live and on-demand. To better simulate a studio experience, users are also able to book live classes in advance. However, there are a few usability issues in this workflow that make it confusing and ineffective.
Screen 1 shows the upcoming live class list. Classes are organized in chronological order, and contain the key information regarding the class — time, class type, and instructor. Selecting the class name takes the user to a screen that provides further details regarding the class, and a CTA to join the class.
However, the usability concern arises when you choose the empty select state to the right of the class name. The user is taken to the same details screen, and the CTA now says “YOU’RE IN.” Though the you’re in state still looks like a button, there doesn’t appear to be any further action associated with signing up for a class to take on this page. Clicking “YOU’RE IN” will undo the user’s class signup, changing the CTA back to “COUNT ME IN,” whereas selecting the back button will take the user back to the class list with the select state checked.
It’s unclear upon selecting the class what action is to be taken on the details screen, as there’s no further action to take on this screen.
The most clear call to action undoes the action the user just took.
Though the class was being selected from the class list, the only way to confirm the select occured successfully is by clicking the back button and returning to the list.
The checks suggest the user can select multiple classes, which is not the case.
There is no simple way to switch between the details of multiple classes, users must navigate to the details page, back to the class list, then select a new class.
The design on the details page seems to be designed for much longer copy than any of the class descriptions contain.
Throughout the app, Peloton uses various shades of blue-greys, with a coral-red as an accent color. However, this accent color is used for a variety of purposes — showing a select state, as the color for a primary CTA, and to display the current class time.
Use a card with swipe gestures to allow users to easily browse classes with details.
Use a card so that users can retain the context of the class list, see that the class has now been selected, and display a clear confirmation the user has signed up for the class.
Add a clear CTA on a class the user has signed up for (Add to Calendar), as well as a remove option.
Consistently use the accent color for CTAs, and remove the use of the accent color for select states in favor of bolding the icon.
Change the checkmark that reads as a multi-select to a clearer “Sign Up” CTA on the list view.
All photos provided by Peloton.
Nav bar icons provided by Peloton.
Interaction arrows from the Responsive Arrows FlowKit by Donnie Suazo.