BLVD UI Design System

My Role

I spearheaded the research, prioritization, design, and implementation of the design system and component library. Moreover, I established a comprehensive component-driven design and development process from start to finish to align product, product design, and engineering priorities with design system initiatives.

Challenges

• Developing a design system for a complex, existing product while simultaneously adding new features.
• Integrating the design system with the current design language, which is based on Material UI.
• Creating a design system that can function seamlessly across both new and legacy code, as well as two different JavaScript frameworks (React and Angular).

For years, Boulevard Dashboard, Boulevard's primary product, had been using different component frameworks and libraries without a clear direction or design system. Although it was initially built with Material UI, it only used a few built-in components that aligned with Material's design language but didn't fully follow its design principles and guidelines.

Research & Planning

In order for a design system to be effective, it must be well-implemented by those who use it. Before implementing the design system, it was important for me to understand the process, design, and technical obstacles and create a plan to overcome or reduce them. The problems were mainly related to a lack of process or knowledge. We needed to address the following issues:

• Is there full support from product design, engineering, product management, and executives to undertake the challenging task of untangling the current design and creating a design system from scratch?
• How well-versed are the design and engineering team in design systems and systems thinking?
• At what points in the design and development process will my input be required?
• What are the challenges involved in integrating the design system with the existing design? How will the new designs blend with the current design?

I performed an inventory of the entire application's interface, focusing on fundamental aspects such as colors, spacing, typography (design tokens), and atomic components like buttons and form elements. To accomplish this, I documented the design tokens and captured screenshots of the atomic elements and their variations.

Foundations

To establish the design system, we first focused on setting up the design tokens. As we were still in the transitional phase and lacked components, we provided engineers with the design tokens that could be used in the application to achieve alignment with the design system. The foundation of the design system consisted of various design tokens, including a color system, typography scale, iconography, shadows, opacities, and more.

Component UI Kit and React Library

Starting with the design tokens as a foundation, I began building out atomic components, such as buttons, form elements, icons, and text components. These components took the design tokens and transformed them into patterns for easy consumption.

To ensure everyone was on the same page and referencing the same source of truth, each component in Figma had variants consistent with the API of its code component counterpart. I used the same terminology for both Figma and React components where appropriate.

The React component library utilized Storybook to showcase each component and its variations. Storybook is a vital tool in the component development process, as it allows engineers and designers to view production-ready components and test them in a sandbox environment. I could also use Storybook to test interactions and states through controls and perform basic accessibility testing.

Accessibility

Accessibility is a cornerstone of any design system. WCAG 2.1 compliance was a top priority. To achieve this, we utilized the a11y addon in Storybook that automatically tested each component and provided a report in Storybook.

We also tested our color system and ensured that our color pairings met the WCAG AA standard of a 4.5:1 contrast ratio. Additionally, we provided captions or alternate text for all media to ensure content accessibility. Every component allowed for keyboard control, enabling users to navigate the application solely with a keyboard.

Governance & Support

To ensure the effectiveness of a design system, it must continually evolve and adapt to changing business, design, and technical requirements. However, the team must have a clear understanding of the design system and its proper usage for it to be beneficial.

A design system is a constantly evolving and progressing asset that needs to be understood and utilized by the whole team to provide utility. To support the team working with the design system, I provided:

• Comprehensive guides for onboarding, setup, usage, and the design system's design and development process.
• Detailed design and technical documentation for each design token and component.
• Regular 1:1 design reviews with product designers to ensure their work aligns with the design system and identify potential needs for new components or component updates.
• Weekly office hours conducted over Zoom to answer questions, receive feedback, and offer assistance.

Final Thoughts

Although I had experience working on design systems and UI kits before, this was my first role solely dedicated to designing systems. I learned a great deal about processes and management, as a design system requires the participation of everyone and their commitment to succeed and evolve. It takes a village to develop and maintain a design system, and it is essential that all stakeholders have a basic understanding and support for the system to thrive.