DESIGN systems

Popcorn Design Systems (AMC)

CLIENT

AMC

ROLE

UX Designer

TIME FRAME

3 Months

YEAR

2023

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

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

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

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.