Timeline
Sep-Dec 2024 (16 Weeks)
Client
Team Credit
Emily (me)
Cheih
Eloisa
Eleanor
My Role
Token Design
UX Design
Prototyping
Brand Design
Accessibility Design
Component/Library Design
Documentation
Governance & Maintenance Lead
Project overview
Developed for Metrograph Cinema, the Lumière Design System combines the brand’s unique style with design consistency, offering simplified navigation, efficient user journeys, and a seamless user experience.
System Documentation
UI Kit
Impact Metrics
Build a New Page in Just a Few Clicks!
Kickoff
Metrograph is a stylish retro theater website
Metrograph, an independent theater in the Lower East Side, specializes in rare archival screenings and special premieres.
Challenges
However…A website with a nice design doesn’t necessarily mean it’s well-designed.
Although Metrograph’s website has a careful combination of colors, fonts, pictures and videos, there are still many things that make users confused when using it.
01. An overabundance of styles
The original design uses 7 colors and 15 typefaces, but the mix feels random and lacks a cohesive theme.
02. The charming icons don’t aid navigation.
Metrograph uses a lot of carefully designed icons in its navigation bar, but in actual use, these unclear icons confuse users.
03. Absence of clear prioritization
Button styles lack hierarchy, and media size and style are equally undefined.
How might we…
create a more cohesive experience for Metrograph’s audience, providing streamlined navigation and an efficient browsing journey?
Learn Our Client
What are Metrograph‘s foundation?
Disassemble the design tokens and components on the Metrograph website. Group together elements with the same purpose to clearly see which elements have multiple repeated designs and which elements are missing. Here are the 12 elements that build Metrograph’s website:
Navigation, Footer, Logo, Color, Typography, Icons, Buttons, Forms, Media, Sections, Interactive components, Pop-ups.
Design Goals
What to Keep, What to Merge, What to Add
How can Metrograph refine its presentation to captivate its audience while staying true to its iconic style?
01. Preserve the Essence
Retain the retro charm, striking visuals, and cinematic atmosphere that define Metrograph’s identity.
02. Unify the Design
Bring together scattered styles and elements into a cohesive, intentional aesthetic that feels polished.
03. Enhance Usability
Introduce clarity and intuitive navigation to create a seamless, engaging experience for every visitor.
Ideation
Let’s kick things off with the basics—the real MVPs: tokens.
Tokens are key to a design system, and clear naming ensures consistency, simplifies changes, and streamlines design tasks.
Working on token naming system as a team
Set up primatives
Set up tokens
Design Process
Redesign components by rethinking purpose and tackling the most-used ones.
Metrograph's site is rich in media sections, a busy nav bar, and interactive fields, making these key components central to the user experience.
Example of redesigned components
We’re also dedicating plenty of time to perfecting dark mode and light mode, since the original website blends the two—time to bring some harmony to the mix!
Example of light and dark mode
Documentation makes design system ≠ UI kit.
A UI kit is a toolbox, while a design system is the blueprint that brings it all together. That’s why we documented Lumière’s principles on Zeroheight—turning loose pieces into a cohesive system.
A example that showing Lumiere’s principle page
Introduce to Lumière
01. Utilize gradients to create depth and vibrancy.
Based on the original retro style of Metrograph, we use 4 levels of beige and 5 levels of brown to distinguish different information levels and different modes. These colors have been tested by WCGA to ensure the contrast and accessibility between them.
Before
Original Metrograph Color Palette
After
Lumiere Color Palette
02. Making call-to-actions stand out and sharpening priorities.
Forget juggling 10+ button styles—you only need 3 levels and 4 styles to get the job done. By slimming down the options, it’s crystal clear to users what each button is here to do!
Before
Original Metrograph Color Palette
After
Lumiere Color Palette
03. Easy, breezy navigation.
We removed confusing icons, refined tab content, and improved menu navigation with clear hover and active states—no more guessing games!
Before
Original Metrograph nav
After
Lumiere nav
04. A cohesive media style creates a visually harmonious flow.
Metrograph’s media styles vary, but consistency is key. We streamlined them into one clean, cohesive look—no more random corners or strokes!
Before
Original Metrograph media style
After
Lumiere media style
05. Clear-cut rules and organized documentation.
Getting started with Lumière is easy! Explore our principles, add the UI kit to Figma, and dive into our guidelines. Need help or want to contribute? Check the Help & Support section. Let’s create something amazing!
Lumiere using guide example
Lumiere accessibility guide
Lumiere help and support
Read the guide but still lost on where to start with Lumière? Don’t sweat it—we’ve got you!
We whipped up a demo showing how to use Lumière to build a Metrograph homepage. Watch it, and anyone will be ready to dive in with confidence!
A example that showing Lumiere’s principle page
See how crisp and effortless everything looks with Lumière in action!
Before
After
Long-term Growth
Design system is not a one time design
Although Metrograph’s website has a careful combination of colors, fonts, pictures and videos, there are still many things that make users confused when using it.
01. Gain feedback and improve
Keep the feedback coming from designers, developers, and users to spot what’s working and what needs tweaking.
02. Keep it fresh
Regularly update the documentation so everything stays clear, relevant, and easy to use.
03. Consistent developing
Expand the system by adding new components and adapting existing ones to meet evolving project needs.
