Popcorn Design System (AMC)

Case Studies
Client
AMC
Project type
Case Studies
Project year
2023
Time Frame
3 Months

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

  1. I incorporate the brand identity of the AMC website into the design system.
  2. I ensure consistency of the design system and the website.
  3. I ensure that the design system focuses on accessibility for all.
  4. I conducted user research to improve the design system’s development and implementation.
  5. I developed a design system documentation, including style guides, guidelines, and UI kit specifications.

Deliverables:

AMC UI Kit- Click Here; Documentation- Click Here

Tools:

Figma, Zeroheights, Zoom

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?

  1. Consistency
  2. Accessibility
  3. Save time

‍

Our Approach

Foundation

Atomic Design

We used Brad Frost’s atomic design method to break the interface down into components.

Atomic Design methods

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

  1. Color Contrast — Focused 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.
  2. 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.
  3. 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.
  4. Navigation and Layout consistency — Make sure to keep the images inside the grid lines at all times so the layout is consistent
Color Contrast and Background image and text combination
Keyboard interaction

‍

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.

‍