ProjectsRésuméAboutContact
Project List

Boulevard UI Design System

Boulevard UI (BLVD UI) is Boulevard's design system and component library.


Boulevard is a business management platform developed to help streamline the operations of appointment-based businesses, including e-commerce for services and goods, point-of-sale, and scheduling appointments.

Boulevard UI (BLVD UI) is Boulevard's design system. The two tangible artifacts of BLVD UI are the Figma UI Kit and the component library built in React.

When
2020 2021
Responsibilities
  • Systems Design
  • Front-End Development
Platforms
  • Web
  • Figma
  • React
  • Storybook

My Role

I led the research, prioritization, design, and implementation of the design system and component library. I also established an end-to-end component-driven design and development process to align product, product design, and engineering priorities with design system initiatives.

Challenges

  • Building a design system for an already complex product
  • Aligning design system with current design language (material UI)
  • Building a design system with accessibility baked in.

Boulevard Dashboard, Boulevard's primary product, utilized various component frameworks and libraries for years with no clear direction or design system. Dashboard was initially built using Material UI — primarily utilizing the built-in components aligned with Material's design language, but did not fully align with Material's design principles and guidelines.


Research & Planning

A design system is only as good as the people using it. I needed to understand process, design, and technical barriers and have a plan to break down or mitigate the issues before even touching the design system. The problems centered around a lack of process or education. We needed to solve for:

  • Do I have complete buy-in from product design, engineering, product management, and executives to do the painstaking work of unraveling the current design and building a design system behind it?
  • What is the level of understanding of the design and engineering team when it comes to design systems and systems thinking?
  • What design and development touchpoints in the process require my involvement?
  • What is the level of difficulty in backing the design system into the current design? How will our new designs look in juxtaposition to the existing design?

I also conducted a UI audit of the entire application, focusing on the foundational bits such as colors, spacing, typography (i.e., design tokens), and atomic components such as buttons and form elements. I documented the design tokens and took screenshots of the atomic elements and variants.


Insights

Team

  • All pertinent stakeholders were serious and enthusiastic about codifying a design system around our product.
  • The design and engineering team had a general understanding of the importance of design systems and how they work.

Process

  • The product design team was relatively new, and there was no process for the design system, component-driven design and development, and end-to-end workflow.
  • The lack of process meant I needed to be involved in most design discussions and decisions until we built a foundation for the design system.
  • We would need to document a process as we worked on the design system.

Design System

  • Dashboard relied heavily on Material UI, a solid foundation if design guidelines and components are utilized correctly. Still, the engineers were left to their own devices when designs had ambiguity. This lack of clarity resulted in design implementation with a lack of cohesiveness.
  • Material UI wasn't a good fit for enterprise (dense) user interfaces.

Foundations

The starting point for the design system was to get the design tokens in place. With a lack of components during this transitional period, we could achieve design system alignment by providing the design tokens for the engineers to consume in the app. The design system foundation included a color system, typography scale, iconography, shadows, opacities, and much more.


Component UI Kit and React Library

Using the design tokens as a foundation, I started the buildout of the atomic components, including buttons, form elements, icon component, and text component. These components took the design tokens and codified them into patterns for easy consumption.

In Figma, each component had variants consistent with the API of the code component counterpart. All parties needed to be on the same page, referencing the same source of truth, so there would be no confusion between the product designers and engineers. I applied the same terminology for Figma and React components where it made sense.

The React component library utilized Storybook to display each component and its permutations. Storybook allows engineers and designers to view production-ready components and test them in a sandbox environment and is an essential tool for component buildout in the component development process. Storybook provides a sandbox environment to build out components locally, but it also allowed me to test the interactions and states through controls and do basic accessibility testing.


Accessibility

Accessibility is a cornerstone of any design system. Any user-focused design system must have WCAG 2.1 compliance. The primary accessibility tool used in the code was the a11y addon in Storybook that ran each component through a set of tests that would return a report directly in Storybook.

We tested our color system and provided color pairings in our guides that met the WCAG AA standard 4.5:1 contrast ratio. All media had captions or alternate text for content accessibility. Each component allowed for keyboard control so users could navigate the application via only a keyboard.


Governance & Support

Design systems are evergreen — constantly evolving and progressing with business, design, and technical needs. A design system doesn'st provide utility unless the whole team knows what it is and how to use it.

To support the people working with the design system, I provided:

  • Guides for onboarding, setup, usage, and the design system design and development process.
  • Design and technical documentation for each design token and component.
  • Regular 1:1 design reviews with designers on the product design team to ensure they aligned their work with the design system and potential needs for new components or component updates.
  • Weekly office hours over Zoom to answer questions, receive feedback, and provide help.

Final Thoughts

Due to the COVID-19 pandemic and indoor safety restrictions causing uncertainty in the salon industry, I couldn't see this project through to the end. Nevertheless, I was proud of the work I accomplished while at Boulevard.

While I previously worked on design systems and UI kits, this was my first full-time design systems role where I could dedicate most of my time to the design system. I did quite a bit of learning about processes and management — a design system takes a village, and everybody needs to have a basic understanding and buy-in for a design system to work and thrive.


BLVD UI Figma Library
BLVD UI Figma Library
BLVD UI React Component Library in Storybook
BLVD UI React Component Library in Storybook
©2022, Chris Griffin, All Rights Reserved.