Project Overview
AMC Theatres, one of the largest cinema chains in the U.S., is recognized for enhancing the movie-going experience through innovation. However, its website suffered from insocnsistencies, accessibility gaps, and branding dilution. This project introduced Popcorn!, a design system built to unify AMC's digital presence, improve accessibility, and optimize workflows for designers and developers.
Resolved consistency issues on the AMC website elements
Research
Analyzed AMC's website using atomic design methodology to identify inconsistencies and other issues.
Design Process
Developed a modular design system with a complete Figma UI library.
Results
Documented the system including guidelines and standards. Published on Figma Community.
The Challenge
Initial Gaps
1
Inconsistent Elements
Buttons, cards and typography lacked standardization, huring visual cohesion.
2
Disorganized Branding
Messy visuals were damaging the AMC's identity.
3
Accessibility Barriers
Color contrasts and poor keyboard navigation limited usability.
Research Insights
Deconstruction
revealed inconsistencies across atoms, molecules and organisms
Brand audit
showed wrong use of colors, typography and logos
Page updates
are inefficient due to missing reusable components
The Solution
Design Strategy & Process
The approach was to systematize over redesign. Deconstructed the AMC website into atomic components, got rid of inconsistencies, and rebuilt them into a flexible and accessible system according to brand standards.
Deconstruction & Library
Broke down AMC's site into atomic elements and built a Figma UI library using tokens.
Testing & Iteration
Ran testing with designers to identify and refine confusing components.
Documentation
Produced detailed guidelines on accessibility, component usage and collaboration.
Key Design Solutions
Design Principles
Defined 4 principles to guide the system, esuring usability, coherence and brand strenght.
Intuitive navigation for quick access to movies and info
Unified branding aligned with AMC's visual identity
Accessibility built into every component
Clear hierarchy to highlight key user actions
Tokens & Consistency
Standardized visuals and improved flexibility through variables and system rules.
Introduced figma tokens/variables for easier updates
Unified components like buttons, cards and icons
Mantained brand personality while enforcing consistency
Documentation
Delivered a guide to ensufe future designers can adopt and evolve the system.
Explained accessibility and usage guidelines
Detailed proper component practices in the library
Outlined collaboration steps for contributors
Takeaways and Next Steps
Improved Consistency
Unified branding accross 100% of site components
Reduced Workload
After testing, designers reported a faster workflow using the system
Increased Accessibility
Color and tab navigation fixes made content usable by more people
Takeaways
Thoughts
This project made me realize that a design system is a living product. It should be able to keep growing, it should balance creativity and consistency so designers can work with it as long as it is following the standards of a brand.
Introduce a light mode using Figma variables for greater adaptability
Expand with new templates and components as AMC evolves
Open collaboration to continually refine and scale the system