MONTAGE: A Cinematic Design System for the Jacob Burns Film Center
CASE STUDY | DESIGN SYSTEMS
ABSTRACT
The Jacob Burns Film Center (JBFC) is more than a movie theater: it is a community space where film, education, and cultural connection come together. Yet JBFC’s website struggles to reflect this richness, presenting users with dense layouts, inconsistent navigation, and accessibility gaps.
Montage, the design system we developed, reimagines JBFC’s digital presence through the lens of cinematic storytelling. By establishing accessible foundations, modular components, and a unified visual language, Montage transforms fragmented experiences into a cohesive, engaging and scalable system that truly embodies the spirit of JBFC.
ROLE
Website Deconstruction
Identifying Inconsistencies Design System Development
Documentation
TEAM
Shayla Singh
Sara Her
Manvi Tandon
John Veon
TIMELINE
9 weeks
Fall 2025
01. THE PROBLEM
JBFC has built a legacy of consistently memorable film experiences for film lovers over the years - but its digital experience does not reflect that legacy.
The Jacob Burns Film Center is a cultural hub where films become shared experiences and where storytelling fuels community connection. The organization screens 400+ films annually, hosts over 100 special events, and provides transformative education programs to 5,000+ students a year — 70 percent from under-resourced schools. This mission is clearly reflected in its physical space and programming, but not online.
​
Across pages, JBFC’s website showed repeating issues:
-
Dense content with minimal breathing room
-
Misaligned elements that disrupted hierarchy
-
Inconsistent navigation and call-to-action styles
Users described the experience as “busy,” “dated,” and “hard to scan.” What should feel like an inviting cultural space, the website instead felt visually overwhelming.
02. THE PROCESS
1.
Breaking Down the Original Footage
Using the Atomic Design framework, we broke down the website into its smallest elements to uncover gaps and inconsistencies across elements and components on central and content-heavy pages like Films, Events, Membership, and Education.
2.
Defining the Principles Behind the System
After identifying gaps in consistency and cohesion, it became clear that the system needed a unifying framework to bring clarity and purpose to every element. Grounded in core values, Montage provides the structure and guidance needed to create alignment, streamline decision making, and support scalable growth.
3.
Building a Unified Montage UI Kit
With the foundations established, we built a unified library of components ranging from buttons and form elements to cards, film and event modules, navigation patterns, and carousels.
Each component was designed to be scalable across use cases, accessible in all states, and consistent in spacing, structure, and behavior.
4.
Testing the Cut with Real Audiences
We validated the system through usability testing, asking users to recreate the homepage and membership pages using Montage. The results were clear: participants were able to build pages quickly and consistently yet their was space to improve design and functionality of the elements. Their feedback surfaced valuable opportunities to introduce additional variants, refine spacing, and strengthen our guidelines to further improve the system.
5.
Documenting the Montage Playbook
To support long-term usability, we consolidated the system into comprehensive documentation that serves as a single source of truth. Hosted on Zeroheight, it outlines foundations and principles, component anatomy, usage guidelines, and essential requirements, giving teams clear guidance and a reliable reference for building with Montage.
To ensure long-term usability, we created comprehensive documentation detailing:
-
Foundations and principles
-
Component anatomy
-
Usage rules and best practices
-
Accessibility requirements
03. THE SOLUTION
1.
A Cohesive, Scalable System Built for Consistency
Montage brings structure through reusable components, a unified grid, and modular patterns that allow teams to build pages quickly and reliably. Its systematized approach ensures every element feels connected and intentional across the entire product.
2.
Accessibility Standards Tied into Every Decision
Color, typography, and interaction patterns follow WCAG-aligned contrast levels, legible type scales, and clear visual or textual feedback. For Montage, accessibility is not an add-on but a structural principle baked directly into the system.
3.
Components Designed for Story-Driven Film and Event Content
Montage modernizes the visual identity with expressive imagery, media blocks, and creative film tags designed specifically for film and event narratives. The system blends clarity with cinematic character, enabling richer and more engaging storytelling.
04. DESIGN SHOWCASE
Presenting the System and Strengthening It Through Feedback
To close out our exploration of how design systems are built, deconstructed, and rebuilt from the ground up for JBFC, it was essential to present Montage and gather peer feedback. We introduced the system as if our classmates were JBFC board members, highlighting how the organization’s mission and commitment to accessibility shaped every principle and decision within Montage.
We received valuable feedback that can help strengthen our pitch and sharpen the case for how Montage could elevate JBFC’s digital presence. The overall response was positive, and our peers appreciated our effort to create a system that supports a nonprofit that has served its community for years.
05. NEXT STEPS
Making a Case for How Montage Can Strengthen JBFC’s Digital Future
In the spring, our team plans to reach out to JBFC to share this pitch deck and present how Montage can support their mission moving forward.
Based on the feedback our team received on the pitch deck, we plan to refine our presentation before sharing it with JBFC and clearly demonstrate how Montage strengthens storytelling, reduces friction, and ensures the digital experience reflects the same care and intention JBFC brings to its community work.
REFLECTIONS & KEY LEARNINGS
Design systems are living products, and Montage is no exception. Creating it required systematic thinking, collaboration, and continuous refinement. A design system is never a one person job; it depends on a team and the shared commitment to build, question, and improve together.
There are many areas I would revisit and spend more time with, including naming conventions and exploring additional ways to integrate digital accessibility into more atoms and molecules, given how essential it is to JBFC. I would also create more sample pages to understand how the system performs in different contexts.
I learned a great deal about treating a design system as a product, but also that its true impact comes from ongoing practice, adoption, and iteration.