CASE STUDY: EQUINOX ANDROID APP

Equinox is a luxury fitness company that offers one-on-one training, group fitness classes, and spa services. The Equinox Android app was created to cater to the growing number of Android users in its membership pool. Having only an iOS app at the time, the organization heard the demands of its members and got to work.

 

PROBLEM DEFINITION

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.

 Existing iOS app screens.

Existing iOS app screens.

 

ROLE

Product Designer, responsible for creating wireframes, design systems, and UI screens.

TEAM

Product Manager, Design Manager, and remote engineering team.

DATE

Project completed in 2017.


PROCESS AND APPROACH

 Class states, primary and secondary buttons and their corresponding on-tap states.

Class states, primary and secondary buttons and their corresponding on-tap states.

Together with the product manager, we surveyed the iOS app to identify screens that needed to be created. We discussed the different states of a class and its functions, for example bookable vs non-bookable classes, call outs for substitute instructor, note when the class is full, note when the user is waitlisted, how many spots are still available, etc.

From there, I sketched out a system of buttons with its corresponding states, taking care to create visual contrast to limit user confusion.

 
 
 Screens demonstrating how a user would book a class directly from the class search results screen.

Screens demonstrating how a user would book a class directly from the class search results screen.

 Sample of a few types of class detail pages.

Sample of a few types of class detail pages.

 Spots for classes are booked on a first come, first serve basis and a lot of classes tend to fill up quickly. 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.

Spots for classes are booked on a first come, first serve basis and a lot of classes tend to fill up quickly. 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.

Prototypes were created in Principle to test out the experience to ensure that feedback from the app of a recorded action was timely.

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. I also provided prototypes demonstrating 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.

 

FINAL THOUGHTS

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 user testing before shipping.