About MGM Resorts
MGM Resorts customers range from leisure travelers and entertainment seekers to corporate clients and high-profile guests. The company’s vision is to create the world’s premier entertainment experiences, blending luxury, innovation, and exceptional service, while, its mission revolves around delivering extraordinary moments to its customers. This focus on customer-centricity and innovation drives MGM's continuous efforts to push the boundaries of hospitality and entertainment.
MGM Resorts International operates over 30 world-class resorts, including properties in Las Vegas and other U.S. states, and internationally. The company welcomes approximately 42 million guests annually, and offers a diverse range of experiences from gaming and entertainment to dining and luxury accommodations. MGM Resorts employs over 83,000 people globally and generates billions in annual revenue.
MGM Resorts also offers an industry-leading loyalty program called MGM Rewards, which serves millions of members worldwide. This program provides guests with exclusive benefits and rewards across MGM’s portfolio. The program also offers tier-based benefits, giving loyal customers access to personalized services, priority reservations, and invitations to exclusive events, making it a key component of MGM's strategy to enhance guest satisfaction and loyalty.
The challenge
At MGM we believe consistency and efficiency were crucial for maintaining a cohesive user experience across multiple platforms and products, and that achieving this consistency often presents significant challenges, particularly when managing our design system that span various applications and touchpoints.
Our team faced a pressing challenge with the introduction of Vega design system, where the need for a unified approach to design elements was apparent. Luckily, we were able to identify these challenges thanks to its previous design system learnings:
1. Inconsistent Design Implementation: As the old design system grew, variations in color, typography, spacing, and other design elements began to emerge across different applications. This lack of uniformity led to a disjointed user experience and increased effort in maintaining and updating design specifications.
2. Inefficient Design Updates: With design elements being manually updated across multiple platforms, the process was not only time-consuming but also prone to errors. This inefficiency hindered our ability to quickly adapt to new design trends or make necessary adjustments based on user feedback.
3. Scalability Issues: As the number of components and patterns within the design system expanded, managing these elements became increasingly complex. Ensuring that updates were consistently applied across all instances required a robust system that could scale with the growing demands of our products.
4. Lack of Design-Development Alignment: The disconnect between design specifications and their implementation in code often led to discrepancies. This misalignment created friction between design and development teams, affecting the overall efficiency and effectiveness of the design process.
To address these challenges, we recognized the need for a more systematic approach to managing design elements. This led us to the adoption of design tokens—an innovative solution aimed at centralizing and standardizing design attributes, thereby streamlining the design and development workflow and ensuring a cohesive and scalable user experience.
The process
Establishing a clear taxonomy allowed us to classify tokens consistently and predictably, providing a scalable naming convention for the team. We defined semantic tokens and the taxonomy system based on the following criteria:
1. Prioritize clarity over brevity
2. Ensure consistency across platforms
3. Maintain a balanced abstraction
This approach enables us to identify tokens that cover a broad range of use cases while keeping the taxonomy intuitive and rational, we decided to adopt the standard 3-level taxonomy: Core, Semantic and Component tokens.
Our naming convention follows a hierarchy that progresses from broad categories to more specific ones. This deliberate structure allows each category to build upon the previous one, leading to intuitive, human-readable token names.
Once we had the naming conventions and taxonomy defined, we upload the tokens to Tokens Studio where we were able to push the tokens directly to our Github repository, where it was consumed by our web and mobile teams. All the technical side that made using design tokens possible was led by our awesome engineering team.
Adoption
One of the unforeseen challenges in adopting design tokens was the constraint posed by the company budget. With a limited number of Tokens Studio licenses and a large team of designers, we faced restrictions on how efficiently we could implement token adoption across the team. To address this, we devised a creative solution: instead of requiring designers to learn the new system immediately, we allowed them to continue using the Figma styles they were already comfortable with. Simultaneously, we developed a custom plugin, “Show me the token,” which mapped the existing styles to their corresponding tokens. This approach significantly reduced the learning curve, accelerating adoption without disrupting existing workflows.
Impact
By implementing design tokens, we were able to reduce inconsistencies by 80%, as measured against our initial audit. This also accelerated the design-to-development handoff process and made it easier to manage theming across various products.
The modular design of our token architecture enabled quick adaptation to new branding and product requirements, significantly cutting our time to market. A prime example was the creation of an XL theme for large touchscreens used at MGM properties. Centralizing the size adjustments within the design system team allowed product designers to focus on user experience rather than pixel details. As a result, engineers implemented the new theme Vega XL, and the components were ready in our code library in just six days.
Vega XL tokens example
Demonstration of button differences between Vega and Vega XL
Summary
In conclusion, the implementation of design tokens within MGM's Vega design system not only addressed critical challenges like inconsistency and inefficiency but also significantly streamlined our design and development workflows. By adopting a modular and systematic approach to token architecture, we reduced design inconsistencies by 80%, accelerated handoffs, and enabled seamless theming across products. Our solution was both scalable and adaptable, demonstrated by the rapid development of the Vega XL theme for large touchscreens. Despite budget constraints, creative problem-solving, such as the "Show me the token" plugin, facilitated smooth adoption across teams, ensuring that our design system remains a powerful tool for delivering MGM's premier entertainment experiences.
