Establishing and implementing a design system for native apps.
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.
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, the focus was 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, it 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.
The entirety of the iOS app split into 3 phases of work.
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.
Existing class booking system and its various states
Class states, primary and secondary buttons and their corresponding on-tap states.
Redesigned class search with more pronounced interactive states.
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.
Class detail page, the before.
Redesigned class detail screens.
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.
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.