CONTEXT
Beachbody, LLC is principally a fitness company that provides workout videos to customers on-demand which can be streamed from various platforms including a native app, website, FireTV, and more.
In 2018 the Oneapp Project was initiated. This combined the functionality of three pre-existing Beachbody apps (fitness videos, nutrition tracking, and online community support) into just one. This new app would also showcase a visual refresh unifying the features of the previously separated apps.
PROBLEM
Beachbody, LLC initiated the OneApp project in 2019 without any central hub for visual artifacts. As siloed designers and devs working on different sections or platforms built the experience inconsistencies in all visual elements including colors, type styles, margins, UX patterns, icons, and more developed as a result.
SOLUTION
1. I took it upon myself to gather all visual patterns from submitted designs onto single pages separated principally by ios, android, and web to find out what was already in the files, in code, and approved.
2. 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.
3. 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.
4. Teams were kept abreast of updates via style guide notifications, a new designated slack channel, confluence videos, and DSUs. All the beforementioned were initiated and managed solely by myself.
Style Guide / Global
Component / Form field
Process / Icon Consolidation
PROBLEM: Over time icons for the same actions varied by platform or section
SOLUTION: Distill all icons into a proposed global set for a unified presentation
Template / Proposed Revisions
Template / Discussion Needed
