Cyclemixx

Hybrid Cycling, A Fresh New Take on Spin

Where

New York, NY

Role

Designer, Researcher

What

Native Mobile App (iOS)

Category

Fitness

Why

For Cyclemixx Customers

When

2018

01. The Project

CycleMixx is a boutique, high-energy cycling studio located in Jersey City, offering hybrid spin classes that combine traditional spinning with other off-the-bike intervals such as total body strength, HIIT, legs & abs and barre. I strategized and implemented their energetic, modern branding as well as the design for their mobile app which allows their users to browse and book classes at Cyclemixx.

The goal was to ensure that Cyclemixx clients come in excited to spin and can use the app to check out upcoming classes and reserve their spot online.

02. Market Research

The claim
Interest in the United States for spin classes or group stationary biking classes has been increasing for the past 6 years. In 2018 there have been a total of nearly 10 million participants in stationary cycling group classes.

The problem
Most local gyms and fitness centers do not offer the convenience of an app for their users and customers, which makes it more difficult for these customers to check upcoming schedules and booking classes on their mobile devices.

03. User Survey

I conducted a survey among people in and around the Jersey City area about if they are happy with how they currently book classes at their gym/fitness studio.

Notable comments

It's a hassle for me to have to login to the gym's website to check the class schedule.

Ellipse 1
Amelia H.

It would be so convenient if I could book a group class directly from an app.

Ellipse 2
Raine I.

I use the app to book spin classes at my gym and it makes the process much easier!

Ellipse 3
Evan P.

04. Flow diagram

To outline all the necessary functionality, I created a simple flow diagram of the main tasks a user can do. One of the flows is shown below. Fail state flows we also created but are not shown due to space constraints.

05. Low-fidelity wireframes

Once the flow diagram was established, I started creating the low fidelity wireframes of the main flows.

06. High-fidelity UI Design

Once the initial flow was complete, I started by creating a couple of main screen of the app. I had also done the logo/brand design for the company so I started by defining the app colors and fonts.

07. High-fidelity prototype

I built a clickable prototype from my high fidelity designs. To allow the client and users to get a sense of the app experience.

08. Final Design & Takeaway

What I’ve learned from this project is that if users are given an option that will make their lives easier, most often than not, they will take that option. In this case, I found that most boutique gyms and fitness studios like Cyclemixx don’t have an app for their users to check their schedule or reserve a class with their favorite instructor. Yes, most of those other studios have such capabilities on their website, but it is much faster and more seamless experience when done through an app.