AMC Design System
Designing a modular system
We created a design system to map UI elements seamlessly between pages, platforms, and networks.
Expertise
UI Design
Component Design
UI Development
Design Thinking
System Design
Platforms
Web
Mobile
OTT
Completed
Summer 2019
Introduction
What began as an effort to rebrand a single network, eventually generated a design system that brought unified logic to a suite of 40+ applications.
Modular, Extensible, and Reusable
When we set out to redesign the AMC digital experience, we centered on creating a system of basic components that could be combined to build complex flows and experiences. Throughout the course of the project I designed components in Sketch and Principle, and worked closely with developers and product managers to get them built.
Establishing Patterns
As we expanded our interface system across platforms we began to identify patterns that were repeated throughout our experience. By identifying, naming, and documenting these patterns, we were able to create complex layouts faster.
Type System
It didn’t take long to figure out that managing type styles accurately across multiple platforms and networks was a colossal task. It made every initiative take exponentially longer. It consistently resulted in arduous developer tasks and heavier QA loads. Not only did each platform have its own metric for font-size, line-height, and letter-spacing; but each network had a laundry list of type styles that no developer could reasonably be asked to replicate accurately.
From this our type system was born.
Initially conceived as a way to tie the components in our component library together, we quickly realized we had hit on something larger. A way to define type styles in repeatable manner that mapped easily into JSON. By building our type styles into our Sketch files, we were able to hand off Zeplin screens that our developers could read easily. Suddenly perfect typography was as easy as writing ‘display-primary-4’. Not only did this decrease our QA load and increase development speed, but it made our apps look cleaner and more consistent across the board.
