Equinox

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.  

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.

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.