Equinox+ Design System
Bringing the first foundational design system and team best-practices together.
About Equinox+
In partnership with Equinox clubs, Equinox+ is a fitness platform that offers live and on-demand classes from expert instructors. The content is cross-modality, so it serves everyone from strength training enthusiasts to meditation guru’s. Equinox+ also integrates with the physical in-club experience and retails an at-home bike.
My Role
Associate Design Director of Product—from building and onboarding teams to the design system, to creating specs and organizational frameworks. I collaborated with another designer, design leadership, technical product management, and engineering.
At the start of Equinox+, there wasn’t an established design system or process in place as teams worked towards their product goals. This resulted in disjointed experiences and inefficient workflows. The company was also undergoing re-designs as it transitioned away from Variis, making it challenging for members to connect with the brand. I led the company’s first design system initiative to help improve workflows and deliver brand-forward consistency in product.
Impact
A Scalable System for Equinox+
Fitness and wellness are core to a healthy lifestyle, and our mission was to be the center. This design system is human, bold, expressive, and it moves with you. The essence of Equinox+ is visualized through the stark color palette and branded typography which contrasts our partner’s unique distinctions, making the experience dynamic and unobtrusive.
All parts of the design system, from the components to how we worked together as a team, was a charge I led while the company was undergoing major changes and rapid growth.
Crafting Components That Scale
Unifying the brand across platforms through shared, flexible components and styles.
Team Libraries That Grow With Us
Bringing teams and designs closer together through distributed ownership, keeping ourselves and our products on the same page.
A Playbook For Best Practices
Promoting useful tips and actions so designers could do their best work, fluidly.
Uplifting Collaboration Through Figma
Mapping out a new figma structure to help standardize workflows and visibility into our growing squads, products, and libraries.
Developing the Groundwork
Building a Master Library
I set up our team’s first multi-platform master library in Figma, making it the single source of truth for components, styles, and global elements. This used structured naming conventions, atomic principles, and organized boards on each page.
Shared elements such as colors and logos were one click away on the global page, ensuring those brand-consist pieces could be easily accessed and distributed in the master library.
Using some of Figma’s most powerful features such as variants and auto-layout made components flexible, and accelerated design speed.
By setting up an intuitive labeling structure, components were easy to find in the library drop down menu which was organized by platform.
Onboarding Simplified
Introducing the library to the design team was essential so they could say farewell to their isolated libraries and feel empowered to contribute to a far-reaching system. I created a playbook to aid in process, workflows, and communication.
Promoting best practices helped in standardizing our components, such as clear and organized layers.
Including an annotation kit helped in streamlining our files and improved the way we communicated internally.
Steps around changing components helped in avoiding duplicative work, and kept everyone in the loop.
Emphasizing the power of styles was essential in keeping our code clean, and our designs consistent.
Applying our Scalable System
By adopting the master library and sticking to standardized guidelines, designers could create beautiful, cohesive experiences across our platforms. I was the point person on the design system who ensured it was being applied consistently, and that the live app was being updated to reflect the evolving system.
Takeaways—
While we were able to move forward on constructing the foundation of our design system and began updating our products, there was room to improve. Thanks to my colleagues who participated in interviews I hosted, additional insights were surfaced around where our system and process was thriving, and where it was falling short. This also included evaluating how we used Figma since it related to how the system connects, and how it services different use cases.
Building Up on the System
An Evolution
Like the products we ship, this iteration was ignited by learning from our users and ultimately setting out to serve their needs better. In our next push, we cut down on some key barriers while also making the system more robust.
Starting with the master library, we split it up into individual platform and global libraries. This reduced bulk and made them more digestible. The shorter assets panel increased speed, and designers were contributing to their platform libraries more.
The Equinox+ design system aims to be:
Scalable. Inclusive. Human. Unobtrusive.
We crafted a set of guiding principles which were rooted in our brand philosophies and core values. Our goal was to help strengthen the relationship our team had with the design system, and also use these as our north star when setting out on our individual product design missions.
A Figma Re-Structure
With new intuitive naming conventions, explicit areas for files, glanceable cover pages, and ways of delineating files, it became much easier to work together, and with greater visibility. I onboarded the full team and created a leave-behind playbook.
Cover pages with link-outs to related files helped when navigating a squad’s feature.
We took queues from Spotify’s ‘Ways of Working in Figma’ and adopted a process that would work for our specific team’s needs.
Organizing files into specific platform teams, then project categories, made it easy to find what we were looking for.
Takeaways from this iteration—
By merging the design system and Figma efforts, we saw noticeable improvements. The adoption rate of the new libraries increased, our products were looking and feeling more like Equinox+, the experiences were more cohesive, and our day-to-day Figma usage became easier. Now, everyone could spend more time doing the work they loved.
. . .
More recently, the design system work was put on a hiatus. If given the opportunity, I would have focused on creating more robust documentation, expanded on our communication and approval strategies, and partnered with engineering on how we could grow the system together.
For more information on this project or process work, please feel free to reach out.