MAIN ROLE
Sole product designer owning the UI design system for Beachbody, LLC
—
—
Proactively initiated and defined this role within a 12-person Product Design team to address system-wide inconsistencies
—
Established, maintained, and implemented scalable design system components
—
Presented system documentation and updates to cross-functional teams
—
—
Established, maintained, and implemented scalable design system components
—
Presented system documentation and updates to cross-functional teams
—
Collaborated with developers to support handoff and ensure clarity in applying design system standards
TIME: 4.5 YRS
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.
“There was no roadmap, no internal expertise, and I had no formal training—yet I took the initiative to fill the gap and build Beachbody’s first design system entirely from scratch.”
STEP 1: GATHER PATTERNS FROM NEW DESIGNS
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 THE 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.