UX DESIGN • DESIGN SYSTEM • UI KIT • DOCUMENTATION

Mosaic Design System

This is how we brought consistency, charm and ease of development to the website of Rubin Museum of Art. Accessible, scalable components drive this Design System.

Check Documentation and UI Kit

Details

Duration: 4 weeks

Team: 2 amazing designers + me

Tools: Figma, ZeroHeight

About The Rubin Museum of Art

The Rubin Museum of Art or the Rubin Museum, is a museum that originated from the collection of Donald and Shelly Rubin. The museum is focused on collection, display and preservation of art and culture of Himalayas, Indian subcontinent, Central Asia and a collection primarily and permanently focused on Tibetan art.

And I…

Created components such as buttons, interactive elements like maps, sliders, cards, alert messages and set the typography for paragraphs, special quotes and banner headings. Also, decided on the colors and visual design to make sure it conveyed the museum’s values and principles.

TL;DR

WHY A DESIGN SYSTEM?

The Rubin Museum of Art has a rich collection of webpages to showcase its projects and exhibitions, however, we noticed a number of inconsistencies throughout the webpages. The colors were not accessible as well.

IMPACT

This design system is designed specifically for the Rubin Museum of Art and is unique to its mission and values. This system also helps in quick building of webpages for the museum’s website. This system saves revenue and time, below are the estimated savings and ROI with Mosaic.

1.4K

Hours Saved

640K USD

Cost Savings

74%

Efficacy with time

Process at a glance

My team included, 2  designers, Radhika and Tharani.

The project started with Radhika recognizing inconsistencies among the website and auditing it for any accessibility violations. The museum’s website, although well designed at first glance, had multiple inconsistencies and many non-accessible design tokens.

Inconsistencies and excessive components

When you look at the Rubin Museum’s website, things seem fine at first. With the eyes of designer, you start noticing the issues it has. Inconsistencies, a different component for the same function and violation of accessibility standards at several instances. 

Imagine, being a designer and creating a new button every time you update a project page. For the engineer, tons of CSS with every component. Decision-making is yet another way of dragging the time unless you get paid for overtime :)

We wanted to stop that.

We used the Atomic Design methodology by Brad Frost.

Building a system

There are 5 distinct stages to creating a design system using this method. They help in creating a well-defined, comprehensive design system. The stages are:

  1. Atoms

  2. Molecules

  3. Organisms

  4. Templates

  5. Pages

Foundations, the atoms

Defining brand values

The first step was defining the foundational values. We defined the principles, color schemes typefaces and icons. Everything at the atomic level.

We looked into Rubin Museum’s principles and values to help us define the same for our design system. 

Foundations

Typography and colors

We wanted to add some character and charm to the web pages designed using Mosaic, consistency was the highest priority, so we chose 3 fonts to convey our brand values and display, Rubin Museum’s beauty.

We also defined 4 main colors to revamp the brand.

Components, the molecules

Buttons

Extremely easy to change buttons!

We made sure that each button was accessible, all their states were clearly defined and icons were appropriately sized.  These components are extremely easy to use with the different states assigned as per hierarchy, theme and user actions.

Boolean values have also been added to remove or add icons. 

“Your system is so comprehensive!”

-Tester

Components, the molecules

Navigation

The original navigation for the Rubin Museum contained 2 styles, a vertical and horizontal navigation bar. To make it easier for the visitors of the website, we consolidated both of them into a single navigation bar. 

The existing footer is not accessible, hence we designed a new one as a component for ease of use. 

Clear and Accessible Navigation

Components, the organism

Hero Covers

Hero Covers, beautiful, customizable and quick.

A large portion of Rubin Museum’s website features their collection with a banner, which we called ‘Hero Covers’. These Hero Covers capture the visitors' attention and get them interested in the project being featured.

Components, the organisms

Blocks

Some elements are not buttons but are crucial to the website’s system. Alert messages, Quotes, Pagination and Accordions were among these.

It was necessary to define these blocks since the Rubin Museum used these components, although inconsistent by design. We added consistency and played with a color palette to come down to these components. 

Usability Testing

Is our system easy to use?

It is necessary to consider that ‘WE’ as creators would not be the primary users of this system. It would be used mostly by designers on the team and developers for reference. 

Since our system is mainly intended for designers, we tested the system with 3 of them.

We found that Mosaic is Scalable, Comprehensive and Easy-to-use.

Documentation

ZeroHeight it is!

We decided to add socialization to our design system. To have users collaborate with us on this by reporting bugs or any suggestions for the system. We also wanted to make finding resources easier and add more instructions to our design tokens. Hence, we decided to take the documentation to ZeroHeight.

We also made sure we informed the users of the usage of each component we crafted. This was to help the users design with intent.

This was a lot of learning! I feel like a Figma Ninja and someone who now knows what a UI Kit is and what a Design System is.

Takeaway

Trial and Error

We had to constantly create dummy webpages using our components to see if our sizes were perfect and if our components fit aesthetically.

Striving for Perfection

Sometimes, components can not feel like they belong to the intended system or its values. During this time, it is necessary to keep going until you reach a final design that blends in seamlessly.

I am not the User

A Design System is created for the people and not for the creators. Our job is to make the work easier.

Pitching

It is necessary to create a pitch of your product to sell it. We needed to prove how it will make the jobs of the team at Rubin Museum easier and why they should adapt it.