UX/UI Design, Branding
Pedal + Beat
Pedal + Beat is a spin/cycling branding and UI project that explores a seamless translation of an in-studio to an
out-of-studio experience through a phone application.
OBJECTIVE
The goal of this project is to create a cohesive brand identity and phone application. I aimed to design an alternative to an in-studio spin class that does not rely on video-based content.
APPROACH
Pedal + Beat’s design is inspired by the industrial and anti-design aesthetics, taking cues from the underground rave scene. This approach aligns with the unique experience offered by the application.
DESIGNED FOR
• The spin class goers seeking a convenient way to enjoy a studio experience while on the go, especially in places like hotel gyms where phone support on the bike may be limited.
• Spin class enthusiasts who want the ability to lead their own ride with minimal guidance from an instructor.
• Wanting to know what your spin instructor played during a previous spin class
Design Highlight
Ensuring seamless transitions during the solo rides was a significant challenge in this project. Given the fast-paced nature of spin classes, it is essential for users to be able to easily synchronize their movements with the music and the application. To address this, I used colors to indicate different sections commonly found in a spin class: warm-up, hills, jogs, and runs. By employing consistent color schemes throughout the application, users can easily associate specific colors with corresponding actions, facilitating a more intuitive experience.
Design Process
These two moodboards direct the direction and story of the brand. I am inspired by the idea of a fitness brand that blurs the line between a party and a workout. On the left evokes an underground, urban escape. This is where I developed my color palette. On the right is the design language that I was inspired by.
One of my favorite imagery was this concert wrist band used throughout the designs.
Initial poster designs
Low-fidelity and high-fidelity prototyping in Figma