BKM DESIGN SYSTEM

BKM Design System is a proposed design system for the Brooklyn Musuem developed by a team of graduate designers from Pratt Institute.

ROLE:
UX Design, Documentation, Accessibility Design

TIME:
10 weeks (Feb-May 2023)

TEAM:
Kirtika Arora, Abbey Hurst, Amanda Yee, Carolyn Yu

The Brooklyn Museum website is an online platform that showcases the institution's diverse collection, exhibitions, and educational resources, providing users with a digital gateway to engage with art and culture. However, the website is made up of inconsistent buttons, typography, and styles, resulting in a fragmented user experience and a lack of a cohesive visual language.

My team and I set out to create a design system that will not only allow users to achieve their goals with more ease, but also streamline the workflow for product managers, designers, and developers, enhancing overall usability and productivity.

UI INVENTORY

We first deconstructed the current Brooklyn Museum website interface and catalogued every UI component to identify patterns and inconsistencies.

We found...
- The color contrast does not pass WCAG accessibility standards
- Numerous components are repeated throughout the interface
- Inconsistencies exist across element styles and behaviors
- 20+ different image formats
‍
Our UI Inventory gave us a clear starting point for including and redesigning components within our system.

DESIGN PRINCIPLES

But before we started designing, we established the following set of design principles rooted in the value and mission of the Brooklyn Museum. This helped guide us in making sure that our system accurately reflects and embodies the institution.

FOUNDATIONS

We’re making a design system not jut for streamlining the design process, but to also strengthen the overall brand identity and enhance the user experience.

We kept the same color palette and font, GT America, to stay on brand and achieve unity across our design system, but adjusted the shading to meet accessibility guidelines. We also introduced a type scale to create consistency and defined spacing and layout rules to establish balance and hierarchy.

COMPONENT LIBRARY

Using our predefined colors, typography, and spacing, we designed a set of components that enable users to create consistent designs with less effort. We made adaptable variations of each component to suit different screen sizes and layout requirements, ensuring their versatility in any context. This allows for flexible utilization of the components in various situations, streamlining the design process.

PATTERNS

To demonstrate the versatility of our component combinations, we built new pages for the Brooklyn Museum using our system. Although we didn't build out every single pattern, our template acts as the foundation for addressing our customers' most common needs and can be customized as necessary.

WHY USE BKM DESIGN SYSTEM?

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.

BEFORE

AFTER

DOCUMENTATION

To further minimize inconsistencies and ensure alignment across all users, we documented our system on Zeroheight. We explained our design principles, usage guidelines and variants, accessibility standards, and best practices.

Moreover, recognizing that a design system is a living system, we have a dedicated page that encourages feedback and suggestions.

NEXT STEPS

I hope to have the opportunity to work with developers and product managers to ensure the success and feasibility of our design system.

We also plan to keep the documentation up-to-date and accessible for all team members, as design systems are ever-evolving.

If we had more time, I would have liked to test our system with users to evaluate its effectiveness and ease of use.

LEARNINGS

Communication and compromise is key to building a design system. Design decisions often involve trade-offs and balancing competing priorities. By fostering open and constructive communication, we were able to find common ground, make informed decisions, and move forward with a unified vision for the design system.

I realized the importance of thinking about accessibility from the get-go and baking it into the designs, as leaving it as an afterthought can be detrimental to the overall user experience.

Awww, looks like that's the end.

Want to see more? You might also like...

AMAZON MUSIC

Redefining music with memories and emotions.

FLUORITE

Design and development of a productivity app.

THE MET

Usability study of the MET's publication page.

Hi again, I'm glad you're here 🫶
Let's connect!