Our team chose The Rubin Museum of Art out of passion for its collection featuring Indian and Southeast Asian artifacts and a desire to improve access to its holdings. Though the content is categorized well, it suffers from lack of a unified design system resulting in operational inefficiencies which cause user frustration. It also violates WCAG guidelines, leading to poor accessibility, especially with color contrasts, and confusing navigation due to multiple styles and components without clear guidelines.
Our aim with the "Mosaic" design system is to transform the website into a coherent, user-friendly platform that aligns with the museum’s cultural identity while enhancing usability and accessibility.
February 2024 - April 2024
UI Inventory, UI Documentation, Usability testing, Figma UI Kit, Accessibility audit
Gatha Bhakta and Tharani Prabu
My main role on the project involved investigating and compiling an exhaustive list of Rubin’s design elements to create a comprehensive inventory of existing components in Figma. Additionally, I brainstorming ways to resolve accessibility issues and overhaul the design.
Inspired by Brad Frost’s “atomic design” method, my focus was to use Figma to create component elements so that, together, we could develop the “Mosaic” design system for the Rubin. We conducted user testing using a UI kit and performed a usability audit. Finally, we documented our process including the newly developed components.
We followed the principle of the design process by applying Brad Frost’s "atomic design" method to develop a well-defined, comprehensive 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 the Rubin's website and identifying numerous inconsistencies in the design components, prompting the need for a more systematic approach to maintaining our design. Additionally, accessibility issues were found and resolved. The elements were captured in screenshots and organized on a board into categories. These categories encompassed navigation, typography, color palette, buttons, forms, icons, interactive elements, images & video, and blocks.
We have crafted the "Mosaic" design system, preserving the Rubin Museum of Art's esteemed brand identity while addressing key challenges identified during our comprehensive research and design process. The following principles guide our approach:
Prioritizes universal accessibility, ensuring all visitors can fully interact with the museum’s digital content, complying with the latest accessibility standards for a seamless and inclusive user experience.
Introduces innovative design elements aligned with the museum's content, ensuring each website element reflects its artistic and cultural narrative.
Engineered to support educational exploration, "Mosaic" guides users through intuitive paths, making learning about Himalayan art and culture an enjoyable journey for everyone.
Fosters inclusivity and interaction, inviting visitors of all backgrounds to engage deeply with the museum’s offerings and facilitating ongoing dialogue and interaction.
To establish a foundation style and facilitate the creation of visual design with atoms, we developed a color palette, selected suitable typefaces, and created guidelines and iconography to improve balance and hierarchy. Accessibility concerns were addressed by evaluating color contrast with different colors such as red, black, and white, and icons were redesigned using consistent shapes. Our team built a comprehensive component library in Figma, streamlining the design process and enabling easy adaptation for specific needs.
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.
The Mosaic design system was published to the Figma community for my peers to download and utilize. This provided an opportunity to reconstruct pages from The Rubin Museum website using the UI kit to gather notes and observations during the test sessions, which helped to improve the UI kit. There were several issues, which were identified, including missing components, scale inconsistencies, excessive fonts, and unclear navigation guidelines.
The documentation is important and aims to make and access this design system with design principle, components, accessibility standards and guidelines to everyone including designers, developers and all users to create good 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
Using Figma to reimagine the Rubin Museum’s web content allowed for a deeper understanding of Figma’s advanced features combined with a new approach to the development of comprehensive design components. The project provided the opportunity to widen my knowledge base and build new skills, especially for ensuring accessibility within a design system.
Unexpected roadblocks within the team required me to confront communication difficulties and make the decisions necessary to move the project forward. In this case, dividing up various project responsibilities among team members got the job done, and impressed on me the importance of negotiating consensus within a professional environment.
While our team successfully identified areas of the Rubin’s website in which to focus our problem-solving, the project design would have benefited from adding coding expertise to our team. In the end, we felt the system still lacked organization and cohesion. We wished for more customized layout grids, necessary device specific elements and design tokens. As a result, we are currently continuing to improve upon the project, refining the redesign of the content to our satisfaction.
