Lumière

Lumière

A design system that shed light on your designs

A design system that shed light on your designs

Timeline

Sep-Dec 2024 (16 Weeks)

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!

From user testing, we realized:

✔ Decreased inconsistent components across platforms by 65%, reducing rework and design discrepancies.
✔ Over 75% of UI elements in projects are from the design system, ensuring consistency.
✔ Reduced design time by 50%.

From user testing, we realized:

✔ Decreased inconsistent components across platforms by 65%, reducing rework and design discrepancies.
✔ Over 75% of UI elements in projects are from the design system, ensuring consistency.
✔ Reduced design time by 50%.

Our user feedback shows strong confidence in BURO:


 8.67/10 

Overall product satisfaction
 8.50/10

Platform trustworthiness
 8.08/10

Trust in borrowers and lenders


These numbers reflect a solid foundation, with room to grow even stronger

From user testing, we realized:

✔ Decreased inconsistent components across platforms by 65%, reducing rework and design discrepancies.
✔ Over 75% of UI elements in projects are from the design system, ensuring consistency.
✔ Reduced design time by 50%.

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.

Metrograph’s current website

Metrograph’s current website

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.

Metrograph‘s inventory

Metrograph‘s inventory

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 Button Design

After

Lumiere Button Design

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

For mature design systems, regular updates and maintenance are essential.

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.