Montage Design System
The opportunity to create and introduce a design system for the Jacob Burns Film Center website is explored.
Project Type
Student Project
Role: designer
Timeline
September- December 2025
(14 weeks)
Tools
Figma & Figjam
Introducing JBFC
The Jacob Burns Film Center (JBFC) is a non-profit cultural hub connecting people with films. The center, located in Pleasantville, New York, offers multiple services, including film screenings, artist residencies, and youth education programs, just to name a few.
Drawn by the organization's mission, along with my 3 designer colleagues, we explored their website and found that although the center's in-person facilities and services set a high standard, there exists an opportunity to align their digital experience.
Image from Westchester County Tourism
The Problem: visual inconsistencies across the website signal to external user frustration and internal user inefficiency.
An audit of the existing website offered our team insight into its current user interface. To do so required us to laboriously comb over every JBFC webpage, where we quickly noticed frequent inconsistencies in design throughout. Such evidence provided a compelling case to consider the utilization of a design system where visual elements are consistently used throughout the website and efficiently implemented by designers and developers building it.
According to Nathan Curtis, a design system is “A library of visual style, components, and other concerns documented and released by an individual, team, or community as code and design tools so that adopting products can be more efficient and cohesive.”
In our UI audit, we found the website to host a great number of visual inconsistencies, including changes in column grid layouts, buttons, types and sizes, typography styles, and navigational headers, among many others.
When we asked website visitors, they commented, “it feels a bit outdated," and "There is so much going on here."
"There is so much going on here."
User review of The JBFC website
As a team, we asked ourselves, how might we standardize the website building experience for designers and developers to be efficient, consistent and understandable.
How might we standardize the website-building experience for designers and developers to be efficient, consistent, and understandable.
The Process: building blocks of a Design System
Our process for determining the need and creation for a design system by JBFC was broken down into the following steps: UI Inventory, UI Kit, Documentation, Socialization, and Maintenance. Given the limitation in time and resources, for this project, we did not dive into the maintenance stage of design systems.
UI Inventory: Auditing it all
By recording all of the varieties in components, layout styles, typography styles, and more into a UI Inventory, not only did we become familiar with their brand, but also identified the opportunities that a design system would offer.
UI Kit: Refining and defining
Our UI Inventory was converted into the design system’s UI Kit, where we recreated existing components, developed a token system for colors, spacing, typography, and icons. Our token or variable system defines style guides for typography, spacing, and layout grids, affording designers easy applications of multiple variables at once.
Design decisions were made around layout, colors, and typography to be more consistent but still convey JBFC’s image and mission as a film community center. For example, we maintained the color scheme of the JBFC website, but picked one layout grid and narrowed down media card dimensions to only two. Additionally, we defined color values and sizing of elements using WCAG 2.0 AA standards.
Documentation: Usage best practices
A platform must exist where all usage guidelines for using the UI Kit. Such documentation guides future users on how to get started, design principles to follow, and further resources and support.
Socializing: Getting user buy-in
To ensure that designers and developers can fully adopt our design system, we would need to ensure that they are aware of the system, know why it was built, and see the benefits of it. Given the scope of this project, we will only be able to provide this content through our documentation.
A deep dive revealed inconsistent, disjointed, and an overwhelming amount of content.
Our UI Inventory audit required us to record every element of the existing website, from small atoms such as type and color, to organisms like carousels and event calendars. By doing so, we collected the following three insights.
Inconsistencies
Throughout the website, iconography, buttons, layouts, media, navigations, and font styles varied.
Opportunity for standardization
A design system would help make the site consistent to support site visitors with easy browsing, and designers and developers with efficient builds.
Accessibility
Accessibility is an important consideration for JBFC. A design system ensures digital accessibility is considered throughout the site.
Part of the Solution: UI Kit
With these insights, we began standardizing and limiting the number of existing website elements into our UI Kit, as a part of our design system, Montage.
The power of a name
Montage is the art of assembling individual shots into a unified whole that tells a richer story. Like how a movie montage highlights the passage of time to tell a story, we've created Montage to record the many individual parts of the JBFC website to create a single, seamless experience.
Trimming it down
A UI Kit defines the select color, typography, spacing, and icons (referred to as our foundations) for JBFC to use for their website. Given the strong branding JBFC already offers, we maintained their same use of colors.
However, we made quite a few updates as well. We reduced JBFC's typography from two fonts (Work Sans and Nunito Sans) to just Work Sans, given the close similarity between the two. Additionally, we employed text styles in Figma to pre-define font sizes, font weights, and colors for header and body text.
For our layout grid, we employed a 16-column grid which offered more opportunities for breaking down content on a page that was symmetrical and balanced, but added in wide margins to ensure the content had enough room to breathe.
Inconsistencies in sizing and colors used by media cards and buttons were also addressed by limiting the media cards to two sizes and buttons to one shape and three action styles based on color.
All components also incorporated accessibility by implementing accessible color contrast, sizing for font and target size, and focus states for readability and interactability for all users.
Leveraging nicknames for scalability
We leveraged Figma’s variable feature to tokenize our colors, fonts, and sizes for efficiency and scalability. The approach to naming tokens in a design system can vary from system to system.
By creating a multi-level naming system, our UI Kit is capable of making site-wide changes through a simple remapping between a token (ex: the color of a text link) and it’s value (a hex code equal to red vs black).
Additionally, we linked our tokens to text styles to pre-define font sizes, font weights, line height, and colors for header and body text.
Our team begins brainstorming our token naming system.
Defining our scope
To best showcase the application of our UI Kit, we decided to redesign two pages from the JBFC website: the home (seen below) and membership pages.
These two were chosen to show the juxtaposition in types and amount of content JBFC offers. On the homepage, we have lots of interactive elements such as media cards, tables, and banners, while the membership page offers greater reading content. With these two pages, we could truly showcase the capability of a design system, where users can simply drag and drop pre-designed components for quick builds.
Final product: Montage Design System
With these adjustments, we created the Montage Design System.
Montage standardizes components, styles, and colors across JBFC, assuring consistent layout and sizing, and a more accessible user experience.
Montage is made up of both a UI Kit and documentation. As stated before, our UI Kit pre-defines color, typography, spacing, and icons.
The documentation exists to support users on how to best use our UI Kit. It includes details of our design principles, best practices for using components, and how designers, developers, and other users can participate in shaping the future of Montage.
Documenting usage
We built our documentation website on Zeroheight, a platform that efficiently uploads tokens and components directly from our Figma UI Kit file. We also structured our documentation in ways that other design systems do, referencing other student projects as well as Lightning, Carbon, and Atlassian, to ensure we provided a familiar browsing experience for our users.
Guiding design principles
Four design systems were created to guide designers and developers in how to use and build upon Montage. These came about through discussions of what we wanted users and site visitors to experience while interacting with this design system.
To ensure that the digital space meets the needs of every visitor, Montage is built to be inclusive and accessible. To meet the needs of the staff who update the website, Montage is efficient. And to emulate the creative spirit of JBFC, Montage inspires users to create quality but fun work.
Benefits of Montage
As an organization, JBFC greatly benefits from a design system for multiple reasons.
First, Montage would make site changes and updates incredibly efficient by providing pre-created components that can be reused throughout the website. Whether employing designers, developers, contractors, or interns, Montage offers guidance on how best to place and design website elements to remain consistent with the rest of the site. For site visitors, a more consistently designed website ensures a more seamless user experience.
As an organization, JBFC can feel confident in its website meeting accessibility compliance, given that the foundational elements and components were defined to meet Web Content Accessibility Guidelines (WCAG) 2.2 standards.
And lastly, as JBFC continues to grow both in-person and online, Montage is set up to scale in the long-run, with components that can be further built upon and room for new components.
Montage Applied
To view the prototype of our redesigned homepage as well as the membership page, visit our UI Kit.
Testing our UI Kit
Testing our UI kit with fellow designers highlighted a few remaining factors to address.
Refining Montage to reduce confusion,
Montage revealed to offer a quick and positive building experience, with users expressing excitement at being able to drag and drop pre-built components such as the navigation bar.
However, we also found opportunities to address.
Conducting user testing with a fellow designer
Issue 1:
Too many layout guides
Users didn’t always know which of our three layout guides to start designing with.
Solution:
Provide a single layout grid to reduce confusion on where to start
Issue 2:
Users lost momentum from text style naming
Users noticed that the order of text style names wasn’t organized in similar hierarchies between header and body text styles, with header styles starting large to small, but body text styles ordered from small to large. Additionally, users noticed a lack of italicized text styles for linked text.
Solution:
We reordered text style names to be consistent in hierarchy and naming between headers and body text styles. Additionally, we added in italicized text styles for every body text.
Issue 3:
Unfamiliarity with site-specific components
Components such as the tab panel and sponsor banner (unique to film websites and JBFC) prevented users from being able to quickly search and use these components on their first time with the UI Kit.
Solution:
This finding highlighted the need to develop usage guidelines for components, a feature we dive into next.
Making our pitch
Montage was ultimately pitched to our class, who posed as "board members of JBFC." Our “clients” were enthusiastic about the accessibility benefits that Montage offers and clearly understood the existing site issues that Montage addresses. By bringing in user quotes, our pitch created trust from our audience in Montage and sparked a desire for change
From a presentation perspective, our audience also highlighted areas for us to consider moving forward. Should we choose to present in the future with JBFC, we could better position our pitch to bring in non-designers into the world of design systems. Additionally, directly connecting the existing website with our design system and defining a design system for a nonprofit would immensely highlight the offerings of a design system.
Ultimately, Montage offers JBFC a digital experience that’s consistent, efficient and accessible for both internal users and site visitors. Given JBFC’s connection with their community the solid foundation it’s built on, I believe that Montage would further the trust in JBFC with it’s clean and intuitive design.
Final class presentation. From left to right, John Veon, Sara Her, Shayla Singh, and Manvi Tandon
Next steps
Design systems in reflection
As a personal reflection on this experience, undertaking the creation of a design system can be time-consuming but also incredibly rewarding. The pay-off of auditing the whole JBFC website came in the form of quick redesigns or the webpage taking only a couple of minutes.
From a scalability standpoint, having completed the busywork of auditing, I know that Montage can only grow from here. Not only can more components be made from what we’ve started, but as JBFC’s business goals grow, so too can the capabilities of JBFC.
Connect with JBFC
The possibility of an eventual adoption
We’d be interested in sharing our work with JBFC in the future. Even in the case that adoption and maintenance of Montage wouldn't be possible due to limitations in resources, an awareness of the inconsistencies we’ve identified could lead to smaller, actionable steps by their staff to improve their digital user experience.
Should JBFC adopt Montage, further guidance on socializing the staff on how Montage works and how to maintain updates to the system would be essential for long-term integration.