Building the AMC Design System
A Case Study
Timeline:
September 2023- December 2023
Team:
Deliverables:
AMC UI Kit- Click Here; Documentation- Click Here
Tools:
Figma, Zeroheights, Zoom
Introduction
The AMC Theater or American Multi-cinema is the largest movie theater chain in the United States. We sought to create a comprehensive design system for the AMC website. Through the intricate process of in-depth research and design our team created a design system for the AMC website called POPCORN.
My Role
- I incorporate the brand identity of the AMC website into the design system.
- I ensure consistency of the design system and the website.
- I ensure that the design system focuses on accessibility for all.
- I conducted user research to improve the design system’s development and implementation.
- I developed a design system documentation, including style guides, guidelines, and UI kit specifications.
The Problem
The existing AMC website lacks consistency. This could be possible as the website does not have a design system. The overall user experience needed to meet people's standards, leading to low engagement and frustration. The website did not adhere to the accessibility guidelines. Finally, the AMC branding was mostly hidden due to the different images and movie banners that changed every week.
Why does AMC need a Design System?
- Consistency
- Accessibility
- Save time
Our Approach
Foundation
Atomic Design
We used Brad Frost’s atomic design method to break the interface down into components.
Colors and Typography
We used the original color palette only making changes in the colors that were not accessible according to the W3C Guidelines. We maintained the AMC brand colors: Primary red, black and white, and secondary blue and gold.
Grid
The layout of the website itself did not have a grid system as each page of the website had a different layout. To keep the consistency, we created a grid system for all pages of the website.
Component Library
Our component library consists of all the foundational components. These can be reused anywhere on the website. Throughout the design system, these foundational components keep getting referenced. Our component library consisted of colors, typography, icons, navigation, grids, cards, and carousels.
Documentation and Governance
Creating and maintaining documentation and governance for a design system is crucial to ensure consistency, scalability, and collaboration across designers and developers alike. Our design system included an introduction, design principles, governance policies, foundations, components, and resources.
Accessibility
To make sure that everything on the website was accessible, we catered to the WCAG guidelines
- Color Contrast — Focussed on following the WCAG color contrast guidelines for our buttons and background colors. This ensured sufficient contrast between the text and the background of the buttons.
- Background Image and Text Combination — Since the design system is catered specifically to AMC, we created guidelines on the contrast necessary between the text and the background image for banner images.
- Keyboard Interaction — We specified the buttons to use on the keyboard to move through different links and buttons on the website without the need for a mouse.
- Navigation and Layout consistency — Make sure to keep the images inside the grid lines at all times so the layout is consistent
Conclusion
To conclude, we presented a pitch by our team who built the design system. Our team will continue to update the UI kit and documentation based on the input from users.
Key Takeaways
In conclusion, the implementation of a well-documented and carefully governed design system has proven to be a transformative force in the website.
Through this project, I have learned the importance of communication and collaboration in pursuit of excellent design.
The journey does not end here, it is an ongoing commitment to excellence and shared vision for crafting experiences that resonate with our users.
