Vega Design System
A cross-platform tokenized system at scale
Client
MGM Resorts International
Role
Product Designer
Team
Platform and Innovation
Jimmy Walker (Design Director), Brenda Flores (Lead Designer), Jonathan Miller (Sr. Content Strategist), Ashley Smith (Lead Product Illustrator), Rakesh Patel (Motion Designer)
Scot Copeland (Design Director, Discovery & Curation)
Vidya Ramamurthi (VP of Design)
Esteban Sardera (Web Platform Product Manager), Esther Patel (Director of Engineering), Rodrigo Lopes (Lead Engineer), Web engineers
Arunima Chakraborty (Sr. Product Manager), Matt Solle (Sr. Engineer Manager, Mobile engineers
Vega Design System
A cross-platform tokenized system at scale
Client
MGM Resorts International
Role
Product Designer
Team
Platform and Innovation
Jimmy Walker (Design Director), Brenda Flores (Lead Designer), Jonathan Miller (Sr. Content Strategist), Ashley Smith (Lead Product Illustrator), Rakesh Patel (Motion Designer)
Scot Copeland (Design Director, Discovery & Curation), Vidya Ramamurthi (VP of Design)
Esteban Sardera (Web Platform Product Manager), Esther Patel (Director of Engineering), Rodrigo Lopes (Lead Engineer), Web engineers
Arunima Chakraborty (Sr. Product Manager), Matt Solle (Sr. Engineer Manager), Mobile engineers
Vega Design System
A cross-platform tokenized system at scale
Client
MGM Resorts International
Role
Product Designer
Team
Platform and Innovation
Jimmy Walker (Design Director), Brenda Flores (Lead Designer), Jonathan Miller (Sr. Content Strategist), Ashley Smith (Lead Product Illustrator), Rakesh Patel (Motion Designer)
Scot Copeland (Design Director, Discovery & Curation), Vidya Ramamurthi (VP of Design)
Esteban Sardera (Web Platform Product Manager), Esther Patel (Director of Engineering), Rodrigo Lopes (Lead Engineer), Web engineers
Arunima Chakraborty (Sr. Product Manager), Matt Solle (Sr. Engineer Manager), Mobile engineers
An end-to-end design system transformation for MGM Resorts International, driving consistency, scalability, and collaboration across design, engineering, product, and brand teams
An end-to-end design system transformation for MGM Resorts International, driving consistency, scalability, and collaboration across design, engineering, product, and brand teams
Understanding the problem
Understanding the problem
MGM’s digital ecosystem suffered from brand fragmentation, with the mobile app’s visual identity diverging from the legacy brand seen in web and offline assets, and from design and engineering debt, caused by siloed processes that led to inconsistencies, workflow disruptions, poor communication, and reduced efficiency across platforms.
MGM’s digital ecosystem suffered from brand fragmentation, with the mobile app’s visual identity diverging from the legacy brand seen in web and offline assets, and from design and engineering debt, caused by siloed processes that led to inconsistencies, workflow disruptions, poor communication, and reduced efficiency across platforms.
Understanding the problem
MGM’s digital ecosystem suffered from brand fragmentation, with the mobile app’s visual identity diverging from the legacy brand seen in web and offline assets, and from design and engineering debt, caused by siloed processes that led to inconsistencies, workflow disruptions, poor communication, and reduced efficiency across platforms.
Context mapping
As a first step, I mapped the MGM digital ecosystem to understand the broader context. I then conducted an audit and interviews with designers and engineers, uncovering duplicated and inconsistent component libraries, the absence of a defined color system, poor documentation, and weak alignment between design and engineering, which led to inefficiency and ad-hoc decision-making.
0:00/1:34
0:00/1:34
Listen to full mapping process
Visual Strategy Project
Articulating the vision for the future of MGM digital experiences
The Visual Strategy Project unified MGM’s fragmented brand by applying the new palette across web and mobile and improving navigation and information architecture. High-fidelity mockups and ongoing reviews secured alignment with brand, product leadership, and the C-suite
The Visual Strategy Project unified MGM’s fragmented brand by applying the new palette across web and mobile and improving navigation and information architecture.
High-fidelity mockups and ongoing reviews secured alignment with brand, product leadership, and the C-suite
Vega Foundations
Scaling the brand expression
The updated palette introduced an expanded tonal system and clear guidelines for consistent cross-platform use. It unified the legacy brand colors (gold and black) with the app’s newer indigo, introducing lighter gold tones for backgrounds to improve accessibility by removing gold from key interactions
The updated palette introduced an expanded tonal system and clear guidelines for consistent cross-platform use. It unified the legacy brand colors (gold and black) with the app’s newer indigo, introducing lighter gold tones for backgrounds to improve accessibility by removing gold from key interactions
Tailwind CSS type scale for flexibility, custom type base kits for consistency and design usage, and tokenized styles for simple and efficient translation to code
Tailwind CSS type scale for flexibility, custom type base kits for consistency and design usage, and tokenized styles for simple and efficient translation to code
Two icon scales, defined through tokens, to ensure consistent sizing across all screen types and future use cases
Two icon scales, defined through tokens, to ensure consistent sizing across all screen types and future use cases
A new component library as single source of truth to build upon, for web and mobile development
A new component library as single source of truth to build upon, for web and mobile development
Design Tokens
Engineering partnership
Our team leveraged the power of design tokens to automate handoff. Working closely with web and app engineers, I created the basic token structure to support component-specific tokens and color theming
Our team leveraged the power of design tokens to automate handoff. Working closely with web and app engineers, I created the basic token structure to support component-specific tokens and color theming
Web Component Library
App Component Library
Outcome
Engineering teams had an increase of more than 30% in productivity, due to the reduction in meeting time that was previously needed for handoff. The quality of output was also dramatically increased, by the use of tokens and extended and comprehensive documentation
Engineering teams had an increase of more than 30% in productivity, due to the reduction in meeting time that was previously needed for handoff. The quality of output was also dramatically increased, by the use of tokens and extended and comprehensive documentation
