I worked on the redesign for Peloton’s class schedule page. The goal of the redesign was to make it clearer and easier for users to find upcoming rides while also modernizing the look and feel of the page. We also introduced the ability for users to ‘book’ workouts, add them to their calendars, and see other users who were also joining the workout.
We introduced a persistent seven day navigation to the page so that users could choose a day for the upcoming week and see all the workouts for the desired day. The user’s view would be limited to that day’s workout, while still having the ability to quickly jump to another day if desired.
The scheduling page required 4 different button states: Normal, hover, active, and active hover. this was to make sure users could add and subtract workouts from a single web page.
After selecting a workout, the user is served a confirmation modal detailing more info on the workout and the other riders who are joining the class. They are also given the ability to add the workout to their personal calendar so they can make sure it fits into their schedule.