Screen of Mailchimp Developer homepage

Equinox

Establishing and implementing a design system for native apps.

Background

Equinox is a luxury fitness company that offers one-on-one training, group fitness classes, and spa services. The creative team was split into Product Design and Marketing, this made for differing design decisions and often resulted in disjointed visual language. My time here focused on establishing, implementing, and at times protecting, a design system.

problem

In 2016, the Equinox member-facing app was only available on iOS. There was a strong need for an Android app to accommodate the growing number of Android users in its membership pool.

IOS vs Android App

Bringing order to chaos

Due to the size and amount of tasks the app needed to perform, the Android project was split up into bite-size phases. For phase 1, we focused on the Class Search and Booking flows as they are the most used feature and most complex parts of the existing app.

With the iOS app, many features and offerings were added as needed, because of that the experience became bloated with a kluge of buttons and overlays. Important messaging about a class would appear in unexpected places and UI elements became inconsistent with style guidelines.

In addition to pairing with the iOS app, we also needed to incorporate a newly designed style guideline. Keeping in mind that in the future, this style would need to translate back over to iOS. Considerations for how the two apps will co-exist in its various states was crucial.  
Equinox iOS app login screen
Equinox iOS app dashboard
Equinox iOS app club page
Equinox iOS app class detail page
iOS app in 2016
Equinox app screens split into 3 phases
The entirety of the iOS app split into 3 phases of work.

approach

Being efficient with space

A class can be bookable or non-bookable, there's a limit to how many spots are available for booking, it can be full, a member can request to be waitlisted, when booking a cycling class, the user can also book a specific bike, and if there's a substitute instructor, phew, it better be called out! (Side note, instructors have cult following!)

The above are some of the functions of a 360x135 button. It's a hardworking space. Together with the product manager, we documented the different states of a class and its functions.

From there, I sketched out a system of buttons with its corresponding states, taking care to create visual contrast to limit user confusion.
Equinox iOS app class search with states
Equinox iOS app class search with states
Existing class booking system and its various states
Class states matrix
Class states, primary and secondary buttons and their corresponding on-tap states.
Equinox Android app class search with interactive states
Redesigned class search with more pronounced interactive states.

design details

Designing for consistency

Similar to class search, the class detail screens needed a design update and careful consideration of the system of functions it needed to perform.

By designing for the smallest space first, (if you recall, 360x135px), I was able to adapt the design system for the class detail page seamlessly.
Equinox iOS app class detail page
Equinox iOS app class detail page with timer to reserve a spot for class
Class detail page, the before.
Equinox Android app class detail pages
Redesigned class detail screens.
Equinox Android app class detail pages with timer
Getting a spot for a class can be a competitive sport on its own. This timer flow informs a user when a class is available for booking and provides them a way to set a reminder when the time comes.

process

The app was developed in-house by our remote engineering team. I walked the team through the entire experience, showing each action and expected outcome. Prototypes were created in Principle to demonstrate the desired movement of each element. Once engineering began, we checked in periodically to make sure that things still looked and worked the way it was designed.

If the project team had more bandwidth and time, it would have been invaluable to collaborate with the engineering team to prototype the app in code to get a real sense of how it behaved on the device and conduct thorough user testing before shipping.

Role & Team

Senior Product Designer
Responsibilities included wireframing, design system, and user interface design.

Team also consisted of design manager, product manager, and a remote engineering team in India.

---
Project completed in 2017 at Equinox.