BKM Design System: Developed an Accessible Design Systemxfrom Ground Up with 40+ Components
Brooklyn Museum
Team
Year
2023
Brooklyn Museum, one of New York City's premier cultural institutions, sought to create a design system for delivering a cohesive and engaging digital experience across its platforms.
Our team conducted rigorous research, strategic planning, and creative problem-solving to develop a comprehensive design system. This empowered the museum to effectively tell its story, engage with audiences, and achieve its digital goals effortlessly.
Overhauled design strategies, refining existing approaches to overcome challenges.
Created comprehensive design system documentation, including style guides and UI kit specifications.
Conducted user research to drive informed decisions in developing an adaptable design system.
Collaborated within a team to integrate the museum's identity into the design, ensuring consistency and alignment with its mission.
The color contrast does not currently meet accessibility standards
Duplication of common components.
Inconsistencies across the element styles and behaviors.
Multiple format of images.
Uncovered inconsistencies and redundancies within the existing design, highlighting areas for enhancement to better align with Brooklyn Museum's unique identity.
Recognized areas where the design could be improved to more effectively represent and embody the essence of the Brooklyn Museum.
Establishing a Strong Foundation for BKM's Design SystemBKM Design System is based on the following set of principles to help designers make informed choices about how to approach a project:
Community
Provide interactive experiences that motivate learning and encourage visitors to connect with different arts and relative objects, fostering a sense of community among its visitors.
Accessibility
Provide equal access for all users, including those with disabilities. Make it accessible to all users, regardless of their backgrounds or circumstances.
Aesthetic
Provide a clear and consistent aesthetic that reflects the personality of the museum, with a minimalist approach to design that is clean, modern, and harmonious, providing a seamless user experience.
Applying Atomic Design Principles to create components for our system
Establishing a Strong Foundation for BKM's Design SystemBKM Design System is based on the following set of principles to help designers make informed choices about how to approach a project:
Laying the foundations
Our UI Kit's foundation is based on the principle of consistency. We believe that a consistent visual language is the key to a great user experience. To achieve this, we created a set of reusable components that follow a consistent design language, such as typography, colors, and spacing.To ensure that the UI Kit is scalable and adaptable, we used Figma. Overall, our Foundation section provides the building blocks for a cohesive and consistent digital experience for the Brooklyn Museum's visitors.
Component library
Patterns
As part of our efforts to develop an efficient and effective design system for the Brooklyn Museum, we created patterns that showcased reusable combinations of components, specifically tailored to address common user objectives through seamless sequences and flows. By prioritizing common user objectives and leveraging patterns to streamline their achievement, we successfully crafted a design system that optimizes user experience and engagement.
Accessibility was a key component of our design system development process.
We prioritized principles such as color contrast, font size, and consistency across layouts and UI elements.
Our approach involved extensive research and testing, including a deep dive into accessibility standards for various interaction states.
By incorporating accessibility as a fundamental principle of our design system, we are able to create a more inclusive and engaging experience for all users.
As part of our focus on accessibility, we followed the Web Content Accessibility Guidelines (WCAG) to ensure our design system met established standards for digital accessibility.
A cohesive design system enhances user experience and accessibility, streamlines development, and promotes team alignment. It empowers users to achieve their goals easily, find information quickly, and ensures familiarity and consistency. Additionally, it saves time and effort for product managers, designers, and developers, allowing them to focus on innovation rather than repetitive tasks.
After
