Montage
DESIGN SYSTEM · COMPONENT LIBRARY
A design system for the Jacob Burns Film Center, transforming fragmentation into a cohesive experience
Role
Product Designer — Website deconstruction, design system development, and documentation
Timeline
9 weeks
Tools
Figma, Zeroheight
Team
Shayla Singh, Sara Her, Manvi Tandon, John Veon
A Cinematic Design System for Reimagining JBFC’s Digital Experience
The Jacob Burns Film Center (JBFC) is more than a movie theater — is a cultural hub that screens 400+ films annually, hosts over 100 special events, and provides education programs to 5,000+ students a year.
Yet, JBFC’s website fails to reflect this richness, burdened by dense layouts, inconsistent navigation, and accessibility gaps.
Montage was developed as a design system to reimagine JBFC’s digital presence through a cinematic storytelling lens. Through accessible foundations, modular components, and a unified visual language, Montage creates a cohesive, engaging, and scalable system that reflects JBFC’s spirit.
A Strong Legacy, but a Broken Digital Experience
The Jacob Burns Film Center’s mission is evident in its physical space, but not online. Using the Atomic Design framework, we deconstructed the JBFC website into its smallest elements, building a UI inventory to identify gaps and inconsistencies. Here's what we found:
Lack of Component Consistency
-
11+ button variations
-
6 icon styles
-
Inconsistent color usage
Typography Without Hierarchy
-
6+ type styles
-
Mixed fonts and weights
-
Inconsistent text treatments
Unstructured Content & Media Layouts
-
7+ image sizes
-
No grid alignment
-
Irregular content blocks
HOW MIGHT WE design a cohesive system that embodies JBFC’s cinematic identity while delivering a seamless, accessible, and scalable digital experience?
Introducing the Montage Design System
To address JBFC’s challenges, we established core design principles, developed a unified Montage UI kit tested with users, and then documented it for consistency and scalability.
Defining the Principles Behind the System
A set of core design principles was established to guide the system, reflecting JBFC’s community-driven and cinematic identity. These principles created a unifying framework that brought clarity and purpose to every element.
INCLUSIVITY
Montage is for everyone. It prioritizes clarity and trust, creating a system people can connect with
ACCESSIBILITY
Interface elements are designed to be legible and simple for all users to navigate
EFFICIENCY
A clear, modular structure accelerates workflows and keeps the system adaptable as it grows
INSPIRATION
The system encourages creativity and captures the expressive spirit that defines JBFC
Laying the Foundation Through Design Tokens
Design tokens were established as the foundation of the system, defining color, typography, and spacing & sizing. This was done to create consistency across components and ensure a cohesive visual language throughout the system.
Validating the Cut with Real Audiences
We tested the system by asking users to recreate pages using Montage components.
Key outcomes:
-
All users were able to recreate pages efficiently
-
The system reduced decision-making friction for 100% users
-
Feedback highlighted opportunities to refine spacing and expand component variants
Publishing the Montage Playbook
To support long-term usability, the system was consolidated into comprehensive documentation to serve as the single source of truth.
Hosted on Zeroheight, it outlines foundations, principles, accessibility standards, component anatomy, and usage guidelines to maintain consistency, reduce onboarding time, and improve team alignment.
A System Built for Consistency and Scale
Montage introduces a modular system that reduces component variation and improves build consistency.
-
Reduced component variations from 10+ to a standardized set
-
100% of users built pages faster and more consistently
-
Supports scalable page creation across use cases
Accessibility Embedded at the Core
Accessibility is embedded across the system to ensure inclusive use.
-
100% of components meet WCAG contrast standards
-
Standardized type scales for readability
-
Consistent interaction states across all components
A Design Language That Reflects JBFC’s Identity
Montage establishes a cohesive, cinematic visual language aligned with JBFC.
-
Standardized patterns across 5+ core page types
-
Reduced visual inconsistency across elements
-
Structured layouts support storytelling
Showcasing the System in Action
We presented Montage as a complete system to peers, positioning them as JBFC stakeholders.
The response validated:
-
The clarity of the system
-
Its alignment with JBFC’s mission
-
Its potential to elevate the digital experience
Our next step is to present Montage to JBFC, and demonstrate how it can support their mission moving forward.
Key Takeaways & Reflections
BUILDING A SYSTEM MINDSET
This project pushed me to think beyond individual screens and design at a systems level. I studied IBM's Carbon DS in depth to learn how to create structure, define patterns, and make decisions that scale across an entire product.
IF I HAD MORE TIME
I would expand the system with more component variants and apply it across additional pages to test how it performs in more complex scenarios.
INSIGHTS & APPRECIATION
This experience deepened my understanding of design systems as living products that evolve over time. It also gave me a greater appreciation for the role systems play in bringing consistency and clarity to digital experiences.
Contact
© 2026 Shayla Singh