NYPL's design system aims to build trust and strengthen the bond with its users

Duration

2 Months

Tools / Resources

Figma

Zero Height

Team

Lori Chiang

Kato Oppenheim

Yoshi Hua

Trisha Khandelwal


Deliverables

NYPL Documentation

NYPL UI Kit


My Contributions

I identified weaknesses in the design system and took the lead in persuading my teammates to redesign specific components to improve website accessibility. I personally designed key components, including cards, tab menus, navigation bars, and forms, and documented detailed guidelines in Zeroheight.

Why does NYPL need a design system?

  • Inconsistent design across webpages

  • Disorganized information layout

  • Insufficient spacing between components

  • Inconsistent and poorly organized color scheme

  • Enhancing user engagement and ensuring accessibility for all users.

  • Providing seamless and efficient implementation, allowing stakeholders to adopt and utilize the system effortlessly.

  • Offering comprehensive documentation to support the effective integration of the design system into their workflows.

The Problem

The Solution

Our design highlights

Before

After

Define design principles that align with core values to guide and inform future design decisions

Usability and Clarity

  • Focus on creating intuitive and user-friendly experiences

Consistency and Modularity

  • Design with consistent, reusable components to improve efficiency

Accessibility and Inclusivity

  • Meet WCAG 2.1 (AAA) standards

  • Simplify navigation and interactions to accommodate diverse users

Collaboration and Transparency

  • Foster collaboration and transparency with documentation

Define design principles that align with core values to guide and inform future design decisions

Deconstruct the system

Navigate to Section

Establish the system

Navigate to Section

Document the system

Navigate to Section

Our three steps of creating the NYPL design system

Deconstruct the current site and analyze issues related to inconsistent components

Narrow Down the Global Pages

The NYPL website includes numerous pages that navigate to external sites. To establish the main design system, we focused on narrowing down the scope, starting with the homepage and extending to all pages linked from the main navigation bar.

Identify those to be redesigned for improved efficiency, accessibility, and consistency

  1. Cards

  • Inconsistent visual hierarchy of information

  • Lack of clear clickable elements

  • Inconsistent and varied card sizes and arrangements

  • Poor spacing and layout design

  • Some cards have background colors, while others do not, creating inconsistency

  1. Dropdown Menu

  • Clicking on the navigation bar's dropdown reveals an unconventional dropdown style, leading to significant inconsistency

  • The dropdown menu resembles buttons, causing confusion for users

  1. Tab Menu

  • Tab menu does not align with the overall website style and design

  • Inconsistent use of font cases

  1. Buttons

  • Buttons with the same functionality have different designs

  • Inconsistent button sizes and colors

Apply atomic design by starting with the foundational elements that serve as the building blocks of our design system.

-Brad Frost- Atomic Design Methodology

Build Trust: By establishing reliable foundational styles.

  1. Colors

  • We are committed to adhering to WCAG 2.1 (AAA) standards to ensure the design is both accessible and user-friendly.

  • Clear color hierarchy to distinguish primary, secondary, and other levels of information.

  • Defined status colors to indicate success, danger, and warning states.

  • To accommodate diverse needs, we have retained a variety of neutral and global colors for design convenience.

The process of selecting and eliminating colors while ensuring compliance with WCAG 2.1 (AAA) standards.

  1. Grids & Spacing

  • We implemented a unified grid format for the website layout.

  • We established consistent spacing guidelines for elements such as card padding, button padding, and other components.

We established a spacing system to enhance the website's structure, ensuring it is visually appealing and user-friendly.

  1. Typography

  1. Icon

  • We retained SF Pro from the NYPL website for its user-friendly and consistency, applying it across headers and body text.

  • We incorporated Google Material Icons into the NYPL design system and standardized their sizes for various implementations.

Our components are designed to enable convenient and efficient implementation for various stakeholders.

  1. Redesigning Buttons

  • Buttons are designed based on WCAG 2.1 AAA standards, ensuring a minimum size of 44x44px.

  • Colors are chosen to meet a contrast ratio of at least 4.5:1 for accessibility.

Challenges:

We are constantly updating our button colors to adapt to different background colors, ensuring compliance with WCAG 2.1 AAA standards while enhancing user satisfaction.


  1. Redesigning Tab Menu

  • We redesigned the tab menu to ensure consistency across website pages and align its style with the navigation bar, maintaining a uniform design for elements serving the same navigational function.

Before

After

Style aligns with the navigation bar

  1. Redesigning Dropdown Menu

  • We redesigned the dropdown menu for consistency by removing the distinctive color blocks and replacing the button-like appearance with a more intuitive and streamlined dropdown format.

After

Before

  1. Redesigning Cards

  • Organized and clear information hierarchy on the cards ensures that users can quickly grasp the content.

  • Easy navigation allows users to click anywhere on the cards, eliminating confusion about where to click to proceed to the next page.

  • Reusable cards components and layout enable efficient page construction.

After

Before

To ensure developers and designers can seamlessly apply our design system, we continuously iterate and refine it.

Document our design system to guide internal stakeholders, foster team collaboration, and convey our value to external stakeholders.

Why is the NYPL Design System a good fit for you?

  • Foster effective teamwork

  • Provide clear guidelines for quick understanding

  • Align with our values to benefit different stakeholders

  • Use reusable components to build pages efficiently

  • Take responsibility for fostering internal contributions to iterate and improve our design system

NYPL documentation site

NYPL UI kits

Tools:

Reflection & Takeaways

Building a Design System that Earns User Trust

To meet WCAG 2.1 AAA standards, we iterated components multiple times, refining every detail to ensure accessibility and user-friendliness. How do we convince ourselves this design system is exceptional? We know it when we use it—it simply works.

Teamwork: Lessons in Organization and Collaboration
Through the process, I learned to organize effectively, prioritize strategically, and focus on the bigger picture, which improved collaboration and productivity.

Building the NYPL Design System: Skill Development in Figma

Building the NYPL Design System enhanced my Figma skills, from creating efficient, accessible components to understanding how principles and values unify a design system. Mapping components with local variables was time-consuming but strengthened my patience and attention to detail.