A complete overhaul of the Peloton design system, from color usage and typography to web components and layout structure.
Overview
Resources and time were spent redesigning and rebuilding components from scratch. This resulted in disconnect UI elements and code that was difficult to scale. I led the team on a massive initiative to revisit our colors, typography, components, layouts, and accessibility guidelines to redefine how we would build web experiences.
Colors & Theming
With a new color palette from our brand team, we needed to align on how we would implement these colors in our UI. Using Figma’s new variable feature, I was able to assign all of our colors to specific use cases and instances within our product. Colors were audited for sufficient color contrast to avoid any accessibility violations and assigned for use in both light and dark themes.
Typography
Our type styles were reconfigured with new, responsive styles and clear naming conventions that aligned with our code base. This enabled better communication with engineers across all squads. Type groupings were then created as Figma components with boolean properties to ensure consistent usage across all of our touch-points.
Layout & Structure
As we updated our webpages and web apps with new components, we found many instances of misaligned content and inconsistent margins and widths. With input from the design team, I created a set of guidelines to ensure consistent columns, outer margins, padding options, and max widths. This was configured in both Figma and our design system codebase.
Accessibility
Web performance and accessibility are at the core of the Peloton design system. To ensure our web products meet WCAG AA accessibility standards I carefully audited color contrast and text size/legibility before baking these rules into our libraries.
Additionally we introduced rules around auto playing videos (if they are over 5 seconds and loop they require play/pause controls), descriptive alt text for media, and clear content hierarchy for screen readers. By including accessibility rules into our core design system we ensured that no violations will be introduced to the site.
I worked closely with our engineering teams to apply consistent compression to all of our media uploads and reduced the number of font styles across our web products to help speed up our web performance.
Figma Tutorials
By leveraging the powerful features within Figma, I created libraries, variables, and hundreds of components to enable our design team to create unified, beautiful web and app experiences that connected with our code base.
I led weekly sessions for our design team to collect feedback on our design system and any new requests. These new requests would be triaged and components and styles would be added or updated to accommodate the design team’s needs. I would then work with our engineers to add these components and styles to the code base for usage by the entire product org.
A design system is constantly growing and evolving. It was important to stay up to date with new work from other designers and communicate any new updates to them. I ensured proper documentation was available around the capabilities of our components and made sure to consistency educate and advocate for their uses and best practices.
Team Alignment
Peloton had a rebrand moment and this would impact ecomm, app, and hardware product teams. We were provided guidance on new colors, typography, icons, and art direction. I worked closely with a design systems core group that would implement this rebrand across all our touch-points.
This team met frequently to discuss how our squads wanted to use the new brand guidelines and implement a design system that would be shared across all of our different products. Some components were decided (democratically) to keep out of our shared design system. This included inputs and buttons as the functionality requirements between ecomm and app were different enough to warrant separate components.
Elements like colors, theming, type styles, and the Peloton class UI were designed to be shared across app, ecomm, and hardware product design teams as this would unify the system and mke updates in the future easier to implement.
Content Management
With frequent requests for new webpages, the team needed a way to create web experiences without development support. Introducing Page Builder; a robust component library constructed within the Contentful CMS.
I led the charge on consolidating our web components into a user friendly library that our creative, marketing, and ecomm teams could all leverage to build web pages. Instead of dozens of different versions of a single 50/50 component for example, we now would have a single version that had all the text, media, and layout treatments necessary to construct beautiful webpages. This both streamlined the development process and unified our brand look and feel across all webpages.
