Design System

The Mosaic Design System

Crafting cultural vibrancy into design

An inclusive design system for the Rubin Museum of Art that enhances usability, accessibility, and visual coherence across its digital platform.

Timeline

February 2024 - April 2024

Process

UI Inventory, Writing the Documentation, UI Design, Usability testing, Design System

tools

Zoom, Figma, Google (Docs, Spreadsheets, Presentation, Excel), Adobe Creative Clouds

Team

Gatha Bhakta, 

Tharani Prabu, 

Radhika (Product designer)

Problem Statement

Lack of usability and accessibility stems from inconsistent design patterns, poor color contrast, fragmented navigation, and the absence of a unified design system and clear guidelines.

Solution

Create a cohesive design system that enhances accessibility and unified design components to support meaningful and intuitive digital experience.

What’s wrong with the Rubin Museum of Art’s website?

“On the UI Inventory, The Rubin Museum of Art’s website lacks a formal design system, leading to disorganized and poor user experience.”

Scalability & Efficiency

Lack of scalability and efficiency resulting from inconsistent coding practices, disorganized structure, and the absence of clear design guidelines.

Inconsistencies elements

Inconsistencies across behaviors and element styles, including buttons, typography, and others, throughout the interface.

Color Contrast

The color contrast fails to meet accessibility standards, resulting in inaccessible color combinations and difficulties in distinguishing structure headings.

Components

A variety of components exists without clear guidelines on when to use them, which is particularly noticeable in the two different website themes.

Project Involvement

Throughout the design process

My primary responsibility for the project involved investigating, gathering and organizing a comprehensive list of Rubin’s design elements to create a detailed inventory of existing components in Figma. Additionally, I brainstormed ways to resolve accessibility issues and refresh the overall design approach. Inspired by Brad Frost’s “atomic design” method, my focus was to use Figma to create component elements, facilitating the creation of the "Mosaic" design system. We conducted user testing using a UI kit and performed a detailed usability audit.  Lastly, we documented the entire process including the newly built components.

When did the Mosaic design system begin its journey?

I. UI Inventory creation for the current Rubin Museum of Art

We followed the principle of the design process by applying Brad Frost’s "atomic design" method to build a clear and cohesive design system, resulting in a more consistent user interface. This method involves progression through stages including:

Atoms

Molecules

Organisms

Templates

Pages

At the beginning of the UI inventory, my main role involved analyzing Rubin's website and identifying numerous inconsistencies in the design components, prompting the need for a more structured approach to maintaining our design. Additionally, accessibility issues were found and resolved. The elements were captured in screenshots of the live site and organized on a board into categories. These categories encompassed navigation, typography, color palette, buttons, forms, icons, interactive elements, images & video, and blocks.

II. Mapping a vision - The Mosaic Design system strategy

The "Mosaic" design system was crafted to maintain the Rubin Museum of Art's esteemed brand identity, while addressing the primary challenges discovered through our thorough research and design process. The following principles guide our approach
Engagement
Fosters inclusivity and interaction, inviting visitors of all backgrounds to engage deeply with the museum’s offerings and facilitating ongoing dialogue and interaction.
Learning
Engineered to support educational exploration, "Mosaic" guides users through intuitive paths, making learning about Himalayan art and culture an enjoyable journey for everyone.

II. Mapping a vision - The Mosaic Design system strategy

Designing the New Foundation
We established the visual foundation style by defining a consistent color, typography, iconography and usage guideline. Accessibility was prioritized by testing color contrast combinations, particularly red, black, and white, and redesigning icon shapes for visual consistency. We built a comprehensive component library in Figma, streamlining the design process and enabling easy adaptation for specific needs.
"In the UI inventory, those elements appeared very infrequently and were extremely similar to other colors, fonts, and the icons were oversized. Therefore, we reduced the number of colors from 44 to 11."

IV. Developing reusable design elements

Creating a a comprehensive component library is essential for achieving efficiency, accuracy, and consistency for designers, developers, and all stakeholders. Within figma software, these components are defined with various variants, states, boolean values, and other attributes facilitating easy access and modification, to accommodate specific redesign requirements.
Redesign and improve navigation
The Rubin Museum's original website navigation had two distinct styles: the vertical bar and the horizontal bar (left image). Both faced accessibility issues with color contrast, fonts, and navigation.The header navigation adopts a single style with two logo variations: (the Rubin Museum and Project Himalayan Art), merging them into a single navigation bar. This redesign simplifies adjustments like navbar, search, and subheader properties to enhance accessibility and user-friendliness.
Icons, Hero Cover, Button & Card
The Rubin Museum offers a diverse range of programs and interactive features, including videos, radio listening, artworks, shopping for objects, exhibitions, and more. They employ different styles in their hero covers, icons, cards, and buttons, which are frequently used and important to redesign according to their specific requirements. These elements are incorporated to create components with variants in various sizes, layouts, and contexts, allowing them to be used in the properties panel. Additionally, various states such as default, active, hover, and others are incorporated to serve a specific purpose based on user needs and reducing time.
Reusable Components
We established an organized labeling and developed a variety of component templates for various sections, including the footer, accordions, image carousels, forms, interactive elements, blocks, calendar, and others. They are essential for maintaining consistency and facilitating website redesigns, while also streamlining the design process for teams.
Accessibility Key Components
It's crucial to prioritize accessibility by adhering to color contrast, font size, typography hierarchy guidelines, layout, and UI elements to create a user-friendly website using the design system. We conducted usability testing, which provided me with a deeper understanding of accessibility standards and organized design elements for various interaction states, ultimately enhancing the user experience.

V. Conducted testing on the UI kit with other designers to enhance its usability

We established the visual foundation style by defining a consistent color, typography, iconography and usage guideline. Accessibility was prioritized by testing color contrast combinations, particularly red, black, and white, and redesigning icon shapes for visual consistency. We built a comprehensive component library in Figma, streamlining the design process and enabling easy adaptation for specific needs.
"The usability testing found the UI kit to be comprehensive and easy to use."

VI. Creating efficiency documentation

The documentation is important to realize this design system with design principle, components, accessibility standards and guidelines for everyone including designers, developers and all users to promote quality design with good teamwork. This documentation is created using a documentation site using zeroheight and integrated with Figma UI kit too.

Documentation site homepage

Clear guidelines complemented by visual aids

"This documentation aims to create concise and clear documentation, prioritizing demonstration over explanation, and to maintain consistent updates for clarity and accessibility in the design system documentation."

Next up: Another Work

AccessiBot Guide- In the progress

Let’s make something together,

Get in touch

© 2025 Radhika Mehra

LinkedIn
Resume
Arrow up