Building a unified design system for Vogue Runway across iOS, Android, and web
Vogue Runway is a global fashion platform with over a million runway images. As the product expanded, the experience became fragmented across iOS, Android, and web, slowing delivery and creating inconsistency for users and teams.
Backstage Design System was created to unify the product foundation across platforms, reduce rework, and enable faster, more consistent shipping without losing the brand’s craft bar.
MY ROLE
I led the design system effort end-to-end: defining standards, designing the component and pattern library, aligning stakeholders across product, engineering, and editorial, and guiding rollout into production.
WHAT I OWNED
System direction and structure (patterns, components, guidelines, states)
Cross-platform alignment across iOS, Android, and web
Integration with the existing web design system (consistency without duplication)
Rollout readiness: adoption guidance, QA expectations, and launch bar
Client
Vogue Runway
Project
Backstage Design System (2023)
OPPORTUNITY
Unifying the experience across platforms was an opportunity to:
simplify key user journeys and remove inconsistent interaction patterns
modernize the visual language while staying true to the brand
standardize common behaviors so teams could ship features in parallel
create a foundation that could support expansion beyond Runway without starting over
CHALLENGE
The product had grown with platform-specific decisions and one-off solutions, which created three compounding problems:
Inconsistent UX across iOS, Android, and web
Slower delivery as teams rebuilt patterns multiple times
Harder quality control because “good” was subjective and varied by team
The design system needed to be centralized but flexible: consistent enough to scale, adaptable enough to support different surfaces and evolving product needs, and compatible with an existing web system.
APPROACH
Start with the work that repeats
I mapped the highest-frequency user journeys and UI patterns that appeared across the product (navigation, content grids, detail pages, filters, states, and actions). The system was built around repeated product behaviors, not one-off screens.
2. Define the “rules” before the components
Before building a library, I aligned on the underlying standards: layout principles, typography rules, spacing logic, component behaviors, and state conventions. This prevented “component sprawl” and made the system easier to extend.
Build modular patterns, not rigid screens
Instead of designing page templates that locked teams in, Backstage focused on modular building blocks: components that could be assembled reliably across surfaces while still supporting platform nuance.
4. Make adoption the work
A design system only matters if it’s used. I treated rollout as part of the product: documentation, examples, critique norms, QA expectations, and a shared bar for what “done” means.
KEY DECISIONS AND TRADEOFFS
Consistency vs flexibility
We standardized interaction and layout patterns where users expect consistency, then intentionally left room for product-specific variation where the platform needed it (for example, content density and platform-native behaviors).
Reuse vs reinvention
We prioritized the patterns that would unlock the most shipping leverage first, rather than trying to perfect every edge case up front. The goal was a system that could ship, prove itself, and expand without rework.
System alignment vs speed
Rather than creating a parallel universe to the existing web design system, we aligned primitives and behaviors so teams could build once and scale across platforms with fewer translation errors.
WHAT SHIPPED
Backstage Design System included:
reusable components and core patterns used across key journeys
state conventions and interaction rules that reduced inconsistency
cross-platform standards for layout, type, and spacing
guidance for engineers and designers so implementation stayed consistent across teams
RESULTS
Backstage Design System improved coherence across the product ecosystem and reduced the friction of shipping across platforms. It introduced reusable components and a scalable framework that streamlined development and elevated the user experience.
It also became a foundation that influenced broader platform work, setting a standard other teams could reference and enabling future expansion of the product experience.
CREDITS
Daniel Baldwin, Sarah Chekfa, Sammie Spector, Tonka Morris, Maleana Davis, Vikram Chowdary Parimi, Shweta Kumari, Jitendra Jaiswal, Charu Agrawal, Mohnish Chittoory, Prathamesh Birajdar, Nicole Phelps, Laird Borrelli-Persson, Jose Criales Unzueta, Irene Kim, Michelle Cho