Design Teardown: taking SoulCycle mobile

4 min read
Christine Lee
  •  Jun 30, 2015
Link copied to clipboard

SoulCycle is a full-body, candlelit indoor cycling class that goes beyond the physical. You don’t just work up a sweat—you leave feeling inspired and energized.

The 45-minute experience is such a draw that when online reservations open up every Monday at noon, many classes fill up within minutes.

Savvy SoulCycle riders have their own tactics for securing a spot: opening multiple browser tabs, using different devices, and even enlisting the help of friends. Developing a mobile app was the natural next step to ease this process, especially for dedicated riders on the go.

Prolific Interactive teamed up with SoulCycle to bring their booking experience to the iPhone. Here’s how we did it.

An agency partnership

The word “agency” tends to conjure up ideas about client interactions and designer workflows, but it doesn’t have to be such a loaded term. Why can’t an agency just be a group of people who want to team up with others to make something amazing?

From the beginning, we at Prolific Interactive made it clear that this wasn’t going to be a typical agency-client relationship—we were here to be an extension of the SoulCycle team.

To do that, we immersed ourselves in the brand and put ourselves in the cycling shoes of the folks who’d eventually use the app.

“We immersed ourselves in the brand and put ourselves in the cycling shoes of the folks who’d eventually use the app.”

What we did:

  • The entire team—designers, engineers, product managers, and everyone in between—worked out of the SoulCycle office 1-2 days a week to immerse ourselves in the SoulCycle brand and workflow
  • We took SoulCycle classes
  • We interviewed the founders of SoulCycle to understand their brand vision
  • We talked to instructors, staff on the customer service frontlines, and other major stakeholders
  • We worked a shift behind the front desk to gain a comprehensive customer service perspective
  • We had the SoulCycle team observe user interviews and user testing sessions so they could see their riders interact with the app and talk about their experiences as customers
  • We used InVision to share our design conceptsTwitter Logo with SoulCycle stakeholders. It was a simple way to present our work and solicit feedback on branding, copy, and design direction.

“We used InVision to share our design concepts with SoulCycle stakeholders. It was a simple way to present our work and solicit feedback on branding, copy, and design direction.”

Collaborating with SoulCycle on copy needs.

Build, measure, learn

Our goals aligned with SoulCycle’s: we wanted to design a useful app that their riders would love and want to use. We set out to create an app that wasn’t just beautifully designed, but fast, easy-to-use, and reliable.

We put out our designs as quickly as possible to watch people interact with the app. Our agile process involved creating concepts, testing them, and making changes accordingly.

Before starting on those designs, we spent 2 weeks conducting preliminary user research in the form of quick interviews at SoulCycle’s various studios. We then came up with ideas based on an amalgam of that user research, brand research, competitive research, and knowledge about the mobile space accumulated from past projects.

Our process went a little bit like this:

User interviews

We had quick conversations with riders at the studios before and after class to get a sense of their habits and behaviors with SoulCycle and the existing website. From these conversations, we learned how booking a bike as fast as possible was the most important thing to get right.

“Booking a bike as fast as possible was the most important thing to get right.”

Whiteboarding and sketching

This is where we digested everything riders told us and thought about how the app could actually address their needs and fit into how they currently manage the process of booking bikes at SoulCycle. This was a great way for the designers to get in a room and throw all our collective ideas up onto the wall while keeping in mind the users, usability heuristics, and iOS design guidelines. We also used this time to get imaginative.

Wireframing and prototyping

Early low-fidelity wireframes

Wireframing and prototyping go hand-in-handTwitter Logo, especially when it comes to mobile design. Mobile apps are much less about what’s on a single screen and much more about how all these screens flow together and interact with each other.

Small interaction details can make a big differenceTwitter Logo. That’s why the ultimate goal of wireframing was to create a prototype that people could use to get a feel for its functionality. Twitter Logo

InVision fit perfectly into our process of rapid prototyping[/invTweet]—we seamlessly moved our static wireframes into interactive flows.

“InVision fit perfectly into our process of rapid prototyping—we seamlessly moved our static wireframes into interactive flows.”

User testing

Recording of a user testing session in the SoulCycle studio.

User testing benefits all interfaces, but mobile apps especially necessitate an understanding of a user’s context.

We started out by testing our prototypes in SoulCycle studios with riders. That gave us a sense of the real constraints: distractions, unstable internet connections, and time crunches. User testing challenged our assumptions, and we got to get out of our own design-focused heads to see how our designs fared in the real world.

We progressed to conducting more formal user testing sessions, where participants would come into a conference room and we’d watch them go through a scenario or two while thinking aloud. We also used this time to get to know them, listen to their experiences with SoulCycle, and hear about their booking processes.

Although a user testing session can never truly mimic a person’s real-world interaction with a product, we tried our best to eliminate biases with open-ended questions, silence when necessary, and a casual atmosphere where participants could feel comfortable to talk freely.

Communication and collaboration

Doing user research isn’t enough on its ownTwitter Logo. It needs to be digested, understood, and disseminated across the entire team to be effective.

We favored quick prototyping and testing to learn and iterate so that we could frequently send out updates to the SoulCycle team about new observations, rather than keeping the research and design process hidden behind a curtain for weeks before revealing it in a comprehensive research report that no one would end up reading.

Because everyone was in the loop on user sentiment and behavior, we were able to conduct brainstorming sessions and design studios where business, technology, and design perspectives came into play, creating an app with SoulCycle in what was truly a collaborative effort.

Getting in some cardio didn’t hurt either.

Collaborate in real time on a digital whiteboard