Metrograph Design System

SOLUTION

Transforming Metrograph with Lumière's Consistent Design

By creating the Lumière design system, we achieved a more consistent, efficient, and creative experience. The system not only honors Metrograph's vintage Art-Deco vibe but also streamlines user interactions, providing a seamless and visually cohesive browsing experience.

Our design system documentation can be found on Zeroheight and Figma Community.

CONTEXT

An Independent Movie House in NYC

Metrograph is an independent movie theater located on the Lower East Side of Manhattan. It focuses primarily on repertory cinema screenings as well as hosting new premieres and Q&A events.

(Image: Metrograph building.)

PROBLEM

Challenge: Style vs. Usability

Metrograph’s website reflects its vintage-inspired aesthetic. However, its unique style often leaves users feeling disoriented.

DISCOVER

Deconstructing the Website

To create a cohesive design system, I deconstructed the Metrograph website, capturing and categorizing UI components in Figma. Components were grouped into categories such as color, buttons, inputs, typography, and imagery.

Inconsistent UI Design Break Visual Flow

Metrograph’s website suffers from inconsistent design elements, including varying button styles such as outlined, filled, and text-only versions. Additionally, multiple font styles are used across different sections, causing a disjointed visual experience.

DEFINE

Shaping the New Design System

Shaping the New Design SystemAfter deconstructing Metrograph’s website and identifying key usability issues, our team moved to Miro to consolidate our findings. We defined our design goals by brainstorming what the new design system should achieve.

This collaborative process helped us craft core design principles focused on Efficiency, Clarity, and Creativity, ensuring the system enhances usability while preserving Metrograph’s unique artistic identity.

#1: Efficiency

Enable users to complete tasks quickly and with minimal effort while streamlining workflows for designers and developers. Reduce friction and ensuring that the system supports productivity.

#2: Clarity

Communicate its purpose and functions intuitively. Every element should serve a clear purpose and provide understandable cues to users.

#3: Creativity

Foster innovation and adaptability while maintaining coherence. It allows agile teams to create distinct and engaging user experiences that align with Metrograph’s brand personality.

DESIGN

Scalable Design with Tokens

To ensure scalability and consistency in the Lumière design system, we developed design tokens that define core style elements such as colors, typography, and spacing.

These tokens act as the building blocks of our design, making updates seamless and enabling cross-platform adaptability.

Crafting Consistent Components

Starting at the atomic level, I built a comprehensive UI kit with components designed for efficiency, clarity, and consistency. This foundational system enabled seamless template creation and intuitive page design.

Atoms

The atoms, such as buttons and icons, are designed with the primary color set to brown, establishing the core visual identity.

Molecules

The color palette and typography are used to create cohesive input fields and bottoms, ensuring consistency across the interface.

Organisms

The navigation and card components combine various UI elements, providing a clear and efficient way for users to explore the website.

RESULT

Lumière Brings a Modern Art-Deco Identity with Consistent Design

The Lumière design system has transformed the Metrograph website, blending intuitive functionality with the theater’s vintage charm.

By preserving the classic, retro aesthetic and incorporating modern Art-Deco elements, the redesign maintains Metrograph’s unique identity while enhancing usability.

Clear Call-to-Action

The Lumière Design System ensures clearer, more consistent buttons and information, enabling users to understand content better and navigate the site with ease.

Improved Visual Clarity

We refined the color scheme with warmer brown tones that align with Metrograph’s vintage aesthetic while ensuring accessibility compliance.

DOSUMENTATION

Documenting for Clarity and Flexibility

We also provided a set of clear dos and don'ts for using each component, ensuring that users had the flexibility to apply them creatively while following the necessary guidelines to maintain consistency.

TAKEAWAYS

What Did I Learn

Systematic Thinking

Building a design system is all about organizing components and creating a structure that ensures everything works together. This project helped me understand how to connect different parts and make sure they flow seamlessly for the best user experience.

Design Decision Collaboration

I improved my ability to work with stakeholders, aligning design goals with business objectives. I hope to work with developers and product managers in future design system projects to gain their input and expertise.

Exploring Design Systems

I didn’t expect it, but I really fell for design systems through this project. The impact they have on efficiency, collaboration, and user experience really opened my eyes. I’ve been learning more since, and I’m excited to continue building systems that support teams and users alike.