MAIN ROLE
Sole product designer responsible for establishing, maintaining, implementing, and presenting the user interface design system for Beachbody, LLC. As a part of Beachbody's Product Design team of around a dozen members, I created this role organically out of necessity.
Time: 2018 – 2023
BEACHBODY, LLC
Beachbody is a fitness company that provides home workout videos to customers on demand. These videos can be streamed from 8 platforms, including iOS, Android, Chromebook, Web, Fire TV, Roku, Apple TV, and Myxfitness BODi bike.
PROBLEM
In 2019, Beachbody launched the OneApp initiative — a company-wide effort to merge three standalone apps (fitness, nutrition, and community) into one cohesive experience with a refreshed visual identity. As a designer on the project, I quickly noticed that our teams were operating in silos without a shared source of truth for visual assets or interaction patterns. Inconsistencies began surfacing everywhere — from colors and typography to spacing, iconography, and overall UX behaviors. While we didn’t yet call it a “design system,” I recognized the urgent need for a centralized structure to unify and scale our design efforts.
STEP 1: SURVEY THE LANDSCAPE
I took it upon myself to gather all visual patterns from submitted designs onto single pages, principally separated by iOS, Android, and web, to find out what was already in the files, in code, and approved.
STEP 2: CONSOLIDATE PRIMITIVES
After summary sheets of all visual elements were created, many styles were merged or deleted based on the following criteria: previous brand recognition, the business objective to convey a new digital experience for the consumer, and dev input on logistical feasibility/limitations.
STEP 3: FACILITATE HANDOFF
Once the Design Team, Product, and Dev were aligned, I built out the physical styles and components in Sketch and synced them to Zeplin for accurate handoff to developers. Later in 2021, I migrated and rebuilt the entire design system once the company switched over to Figma for design and handoff.
STEP 4: LAY OF THE LAND
Teams were kept abreast of updates via style guide notifications, a new designated Slack channel, Confluence videos, and DSUs. I initiated and managed all of the aforementioned solely.