Vega Design System

About the company

MGM Resorts International is an S&P 500® global gaming and entertainment company with national and international locations featuring best-in-class hotels and casinos, state-of-the-art meetings and conference spaces, incredible live and theatrical entertainment experiences, and an extensive array of restaurant, nightlife and retail offerings.

About the design system

Design System Name

Vega Design System

Design System team size

More than 10

Design System team make-up

Designers
Engineers
Product Owner/Manager
Content designer
Motion Designer

Governance model

Centralized

Products/brands covered by the design system

More than 10

About the adoption

Adoption approach and means

Introducing a new design system like Vega to MGM Resorts requires a thoughtful and strategic approach to ensure widespread team adoption and success. Here’s a step-by-step explanation of how we achieved this:

Research and Understanding
We began by conducting thorough research into MGM Resorts’ existing design practices, culture, and user needs. This involved interviewing key stakeholders, designers, developers, and product managers to understand pain points, challenges, and opportunities for improvement with the previous design system.
Defining Goals and Benefits
We clearly articulated the goals and benefits of adopting the Vega design system. These goals included improving consistency, efficiency, and user experience across all digital properties, which aligns with MGM Resorts’ brand identity and mission.
Engaging Stakeholders
We involved key stakeholders from various departments early in the process to ensure their input and buy-in. Their involvement and feedback helped shape the design system to meet the specific needs of different teams within MGM Resorts.
Collaborative Development
The Vega design system was developed collaboratively, involving designers, developers, and content strategists from across the organization. Regular workshops, brainstorming sessions, and design critiques were held to foster a sense of ownership and to ensure that the design system addressed the unique challenges faced by different teams.
Customization and Flexibility
Recognizing that MGM Resorts has a diverse range of digital properties, we ensured that the Vega design system could be customized to suit different brand identities while maintaining consistency in core design principles. This flexibility increased the likelihood of adoption across various teams.
Clear Documentation
We created comprehensive and easily accessible documentation for the Vega design system. This documentation included design guidelines, coding standards, component libraries, and usage examples. Clear and user-friendly documentation is crucial for enabling teams to implement the design system effectively.
Training and Education
To facilitate smooth adoption, we provided training sessions and workshops for teams to learn how to use the Vega design system effectively. This education process empowered team members to understand the rationale behind the design decisions and encouraged them to embrace the new system.
Iterative Implementation
We adopted an iterative approach to implementation, allowing teams to gradually integrate the Vega design system into their projects. This incremental approach minimized disruption and allowed teams to learn and adapt at their own pace.
Feedback Loops
We established feedback loops to gather insights and suggestions from teams using the Vega design system. Regular check-ins, surveys, and user testing were conducted to identify areas for improvement and address any challenges faced by teams.
Recognition and Celebration
Celebrating successful implementations and recognizing teams that embraced the Vega design system helped create a positive atmosphere around its adoption. This recognition also inspired other teams to follow suit.
Ongoing Support
We provided continuous support through a dedicated team responsible for maintaining and updating the Vega design system. This team was readily available to assist with any issues, updates, or new feature requests.
Showcasing Success Stories
Sharing success stories and metrics that highlight the positive impact of the Vega design system, such as improved user experience or faster development cycles, can inspire other teams to adopt it.

Encouraging teams to use the Vega design system involves a combination of effective communication, support, education, and showcasing the benefits of the system. Here’s our strategy to drive adoption:

Clear Communication
We clearly communicate the purpose, benefits, and goals of the Vega design system and explain how it aligns with the company’s vision and the advantages it offers in terms of consistency, efficiency, and user experience.
Stakeholder Engagement
Involve key stakeholders in the decision-making process. Listen to their concerns, needs, and suggestions to ensure that the design system meets their requirements. This involvement creates a sense of ownership and investment in the system’s success.
Educational Workshops
We host workshops, office hours and training sessions to introduce the Vega design system to various teams. These sessions cover not only the technical aspects but also the design philosophy, guidelines, and the rationale behind the decisions made in the system. We show how using the design system can lead to better design outcomes and faster development.
Showcase Success Stories
We highlight success stories from teams that have successfully implemented the Vega design system and share metrics that demonstrate improvements in design consistency, development speed, or user satisfaction. Success stories can inspire other teams to follow suit.
Collaborative Workshops
We regularly organize collaborative workshops where teams can work together on real projects using the design system. This hands-on experience fosters collaboration, knowledge sharing, and builds a sense of camaraderie among teams.
Centralized Resources
We maintain a centralized repository of resources, including documentation, guidelines, component libraries, and code snippets related to the Vega design system. Easy access to these resources makes it convenient for teams to implement the system.
Continuous Support
We provide ongoing support through dedicated channels (Slack) where teams can ask questions, seek guidance, and share their experiences. Quick and reliable support ensures that teams don’t feel stuck during implementation.
Regular Check-ins
We conduct regular check-ins with teams that are in the process of adopting the design system. This provides an opportunity for teams to share challenges, progress, and success stories. It also demonstrates that their efforts are being acknowledged and supported.
Feedback Loop
We’ve established a feedback loop where teams can provide suggestions for improvements and enhancements to the design system. This involvement in shaping the system makes teams feel valued and heard.
Lead by Example
We demonstrate the use of the Vega design system in high-profile projects or initiatives. When teams see leadership embracing the system, it reinforces its importance and encourages wider adoption.

Adoption lifecycle management

Recognizing the successful adoption of the Vega design system involves monitoring key indicators, gathering feedback, and observing changes in design and development practices across MGM Resorts.

Usage Metrics
We regularly track usage metrics related to the Vega design system, such as the number of projects integrating the system, the percentage of design components used, and the frequency of updates to the system’s guidelines and assets. We have seen a steady increase in these metrics over time which suggests growing adoption.
Consistency Across Projects
Reviewing a variety of recent digital projects within MGM Resorts, we see that they exhibit consistent design patterns, color schemes, typography, and overall visual coherence. Consistency in design elements indicates that teams are using the Vega design system effectively.
Feedback and Satisfaction
We gather feedback from designers, developers, and other stakeholders who are using the Vega design system. Positive feedback regarding increased productivity, improved collaboration, and enhanced user experience demonstrates successful adoption.
Decrease in Design and Development Errors
We monitor the rate of design and development errors, such as inconsistencies in UI elements or broken components. These errors are decreasing over time, suggesting that the design system’s guidelines are being followed accurately.
Presence of Design System Advocates
We’ve identified individuals who have become advocates for the Vega design system. These advocates actively promote and encourage others to use the system, contributing to its wider adoption.
Integration in Design Reviews
We participate in design reviews or audits to see if the Vega design system is being referenced and discussed. Designers are consistently using the system as a reference point, which signifies successful adoption. By monitoring these indicators and regularly assessing the state of design and development practices across MGM Resorts, we’ve determined that the Vega design system has been successfully adopted and is contributing to improved design consistency, efficiency, and user satisfaction.

Here is what we consider were significant steps for our design system adoption:

Percentage of Projects Using Vega Components
A notable metric is the increasing percentage of digital projects that incorporate components and design patterns from the Vega design system. As this percentage rises, it demonstrates that teams are actively integrating the system into their work.
Number of Active Users
The number of designers, developers, and other team members who are actively using the Vega design system. A growing user base indicates widespread adoption, which is the case with Vega since its release.
Time Savings and Efficiency
We measure the time saved during the design and development process due to the use of the Vega design system’s standardized components and guidelines. Teams are able to complete projects more efficiently, allowing them to focus on innovation and user experience.
Design and Development Consistency
We see an increased level of design and development consistency across various projects. Consistency in UI elements, color schemes, typography, and layout is a strong indicator of successful adoption.
Feedback from Designers and Developers
We gather feedback from designers and developers who have used the Vega design system and have received positive feedback regarding improved workflow, collaboration, and design quality, signifying successful adoption.
Decrease in Design Errors and Revisions
We’ve seen a reduction in design errors, inconsistencies, and the need for repeated revisions in projects. Fewer design errors and revisions indicate that teams are effectively implementing the design system’s guidelines.
Faster Onboarding of New Team Members
New team members can get up to speed quickly with the Vega design system. A shorter onboarding process suggests that the system is user-friendly and well-documented.
Cross-Team Collaboration
The Vega design system has facilitated better collaboration among teams with varying responsibilities. If designers, developers, and content creators are working more harmoniously, it reflects successful adoption.
Successful High-Impact Projects
There have been a number of high-impact projects that have successfully utilized the Vega design system. These efforts have received positive user feedback and achieve business goals, which demonstrate the system’s value.
Requests for New Features or Components
Teams are actively requesting new features, components, and updates for the Vega design system, which indicates that they are invested in its continuous improvement and expansion.
Increased Adoption Over Time
Over the past 6 months, there has been a gradual increase in the number of teams and projects that adopt the Vega design system. Steady growth demonstrates its increasing relevance and value.
Involvement of Design System Advocates
Individuals on the team have become advocates for the Vega design system. Their active promotion and encouragement of adoption within the organization contribute to its success.

The prospect of the Vega design system created much excitement among business leaders and stakeholders. As a result, product designers began attempting to leverage Vega foundations (typography, colors, iconography, etc.) and components (buttons, alerts, carousels, etc.) prior to Vega’s 1.0 official release. In the scenario above of developing the Vega design system for MGM Resorts, our team successfully navigated the challenge of eager product designers wanting to use the system prior to its official release. Here’s how we approached the situation:

Communication and Transparency: We maintained open and transparent communication with all stakeholders, ensuring they were aware of the design system’s status and release timeline. Early Access Program: We initiated an Early Access Program (EAP) that granted selected product designers access to the design system before its official release. Their feedback proved invaluable for refining the system.
Documentation and Guidelines: We provided comprehensive documentation and guidelines outlining the design system’s principles, components, and best practices. We made sure to note areas that were still under development.
Limited Component Releases: As components or modules were ready for use, we released them incrementally. This allowed product designers to begin implementing certain components while understanding that the system was still evolving.
Feedback Loop: We established a feedback loop with the early access product designers, actively gathering their input, suggestions, and concerns. This iterative process enabled us to make necessary improvements.
Training and Workshops: We organized training sessions and workshops to educate interested product designers about the design system’s principles and proper implementation. This ensured they were well-prepared to use it effectively.
Highlight Progress: Regular progress updates were shared with stakeholders to showcase completed milestones and components, along with any enhancements driven by user feedback.
Emphasize the Long-Term Vision: We consistently emphasized the importance of a comprehensive approach, reinforcing that a thorough release was essential for the design system’s long-term success.
Release Plan: We followed a well-structured release plan, adhering to milestones and the final launch date. This approach allowed for thorough testing and documentation.
Support Channels: We established dedicated support channels for product designers to seek assistance while using the unreleased design system, ensuring they had access to help when needed. By effectively managing stakeholder enthusiasm through controlled access, transparent communication, and continuous refinement, we successfully built and released the Vega design system for MGM Resorts, setting a strong foundation for consistent and high-quality design practices across the organization.

Adoption results

Here are some significant steps and elements that play a crucial role in the adoption of the Vega design system:

Executive Endorsement: Having executive leadership endorse and support the Vega design system sends a strong signal of its importance and encourages teams to embrace it.
Clear Communication: Having a well-defined communication plan explaining the purpose, benefits, and how-to of the Vega design system was essential for understanding and buy-in.
Stakeholder Engagement: Engaging key stakeholders early and involving them in the design system’s development ensures their needs are met and secures their support.
User-Centered Design: Incorporating user feedback (designers) and insights into the design system’s development ensures it caters to actual user needs, enhancing its relevance and adoption.
Training and Workshops: Conducting training sessions and workshops to educate teams about the Vega design system’s capabilities and usage helps them integrate it effectively.
Testimonials and Quotes: Capturing positive feedback and testimonials from designers and developers who have experienced increased efficiency or improved outcomes due to the design system can be impactful.
Usage Metrics: Tracking metrics like the number of projects and teams using the design system, components utilized, and adherence to guidelines provides quantifiable insights into its adoption.
Design System Advocates: Identifying internal advocates who champion the use of the Vega design system creates enthusiasm and encourages others to adopt it.
Efficiency Gains: Demonstrating how the Vega design system has streamlined design and development processes, leading to faster project completion, showcases its value.
Consistency Achieved: Highlighting instances where the Vega design system has resulted in consistent design elements and user experiences across various projects underscores its success.
Feedback Channels: Creating channels (Slack) for continuous feedback from teams using the design system helps address concerns and refine its components and guidelines.
Project Case Studies: Showcasing specific projects that have benefitted from the Vega design system in terms of improved user satisfaction or business outcomes provides concrete evidence of its impact.
Customization Flexibility: Sharing examples of how different teams have successfully customized the design system to match their branding while maintaining consistency can inspire others to do the same.
Measurable Improvements: Presenting data or anecdotes that highlight measurable improvements in user engagement, conversion rates, or other relevant KPIs due to the design system’s implementation reinforces the value of Vega.
Cross-Team Collaboration: Demonstrating how the Vega design system has facilitated smoother collaboration between design and development teams fosters a culture of unity and efficiency.
Recognition and Awards: Celebrating projects that have leveraged the design system to achieve remarkable outcomes.
Ongoing Evolution: Emphasizing that the Vega design system is continuously evolving based on user feedback and changing needs reassures teams of its relevance and future prospects.

The adoption process of the Vega design system has significantly improved collaboration and communication between teams at MGM Resorts in several key ways:

Shared Language and Visual Consistency: By providing a standardized set of design components, guidelines, and principles, the Vega design system ensures that teams share a common language for discussing design and user interface elements. This common foundation fosters clearer communication and reduces misunderstandings.
Efficient Cross-Team Workflows: Teams across design, development, and content can now work more seamlessly together. Designers can create assets using the Vega components, developers can easily implement them, and content owners can understand how to maintain consistency. This reduces friction and saves time in the collaborative process.
Streamlined Design Reviews: With a shared set of design components and guidelines, design reviews become more focused and efficient. Teams can reference the Vega design system to discuss specific elements, making feedback and iteration cycles smoother.
Consistent User Experiences: The use of the Vega design system ensures that user interfaces are consistent across different projects and teams. This consistency leads to a more cohesive and predictable user experience, enhancing user satisfaction and reducing confusion.
Easy Communication of Design Intent: The design system’s documentation and guidelines provide a clear way to communicate design intent. Designers can refer to the system when explaining their decisions, making it easier for developers and other stakeholders to understand and implement those decisions accurately.
Rapid Onboarding for New Team Members: New team members can quickly familiarize themselves with the Vega design system, as it serves as a comprehensive resource for design standards. This accelerates their integration into existing projects and teams.
Cross-Department Learning: The adoption process often involves cross-departmental training and workshops. This allows designers, developers, and product owners to learn about each other’s processes, challenges, and constraints, promoting a deeper understanding and empathy for their colleagues’ roles.
Reduced Silos and Knowledge Sharing: The Vega design system encourages knowledge sharing and collaboration across teams that might have previously operated in isolation. This cross-pollination of ideas and expertise can lead to innovative solutions and improved workflows.
Centralized Feedback and Iteration: Teams can provide feedback on the design system, suggesting improvements or reporting issues. This centralized feedback loop ensures that issues are addressed promptly and that the system evolves based on actual usage and needs.
Customization for Unique Projects: The flexibility of the Vega design system allows teams to customize components to fit unique project requirements while maintaining overall consistency. This empowers teams to create tailored experiences while staying aligned with the organization’s design principles.
Design System Advocates: The presence of design system advocates within teams can facilitate communication by providing guidance, answering questions, and promoting best practices related to the Vega design system. In essence, the Vega design system has acted as a bridge between different teams, enabling them to collaborate more effectively, communicate more clearly, and collectively produce high-quality, consistent user experiences across MGM Resorts’ digital landscape.

If I had to pick one successful tip that played a significant role in the adoption of the Vega design system, it would be “Active Stakeholder Engagement.” Active stakeholder engagement involves involving key stakeholders from various departments, including design, development, product management, and leadership, early in the design system’s development and decision-making process. Their input, feedback, and support are critical for the success of the design system adoption. Here’s why this tip is so impactful:

Ensures Alignment: Engaging stakeholders ensures that the design system’s goals and objectives align with the broader organizational goals and strategic direction. When stakeholders see that the design system addresses their needs and concerns, they are more likely to support and advocate for its adoption.
Tailored Solutions: By involving stakeholders from different teams, you gather diverse perspectives and requirements. This allows the design system to address the specific challenges and needs of various departments, making it more relevant and useful for everyone.
Early Buy-In: When stakeholders are involved from the beginning, they have a sense of ownership in the design system’s development. This early buy-in translates to their commitment to using and promoting the system within their respective teams.
Problem Resolution: Active engagement allows potential issues or concerns to be identified early on. This proactive approach enables the design system team to address these concerns, build solutions, and create a system that genuinely meets everyone’s needs.
Advocacy and Influence: Engaged stakeholders become advocates for the design system within their teams. Their endorsement and influence encourage their colleagues to adopt the system more willingly.
Cross-Departmental Collaboration: Stakeholder engagement encourages cross-departmental collaboration and breaks down silos. Teams work together to shape the design system, fostering a culture of unity and shared ownership.
Feedback Loop: Stakeholders provide ongoing feedback as the design system evolves. This feedback loop ensures that the system remains relevant, adaptive, and aligned with changing organizational needs.
Leadership Support: Engaging leadership stakeholders ensures that the design system receives the necessary resources, attention, and support at a higher level, increasing its chances of success. By actively involving stakeholders throughout the design system’s lifecycle, you create a sense of partnership, collaboration, and shared purpose. This tip sets the foundation for a successful adoption process by ensuring that the Vega design system is not only well-designed but also tailored to the organization’s unique requirements and challenges.

The Vega design system is currently being used by 56 teams and there were 17.7k component inserts last week alone.

MGM Resorts International

Best Adoption