ByrdView Design System

Design systems are my passion and I enjoy every opportunity to work with them. This showcase story is about building one completely from the ground up.

Challenges

Joining an organization as a sole designer can be challenging, but often very rewarding. This project is a great example of how continuous contributions over time can result in great improvements. The primary challenge that initiated investing effort into building a Design System was the slow process of design and development.

• Design on demand
  Every design concept had to be created practically from scratch.
• Unsorted Front End assets
  The legacy codebase was saturated with deprecated definitions. As there was no documented system, developers often created new CSS definitions when they couldn't find reusable samples.
• Lack of documentation
  Without available guidelines, the team was frequently involved in long Slack threads discussing UI implementation details.

All those challenges were slowing the process of Design and Development. Still, as is the case in many start-up / scale-up product teams, high priority was given to the delivery of new features. In alignment with product management, I reserved 10% of my weekly time dedicated to work on the Design System.

The Process

To map out the existing design definitions in CSS, I started with base tokens. Colors, typography, and spacing. All defined colors in the codebase were extracted and evaluated. After the comparison, I was able to categorize and simplify the palette. From the over-bloated list starting with 96 color values, I came down to 3 brand colors, 4 functional colors with calculated additional 4 shades, and a simple grayscale palette.

Spacing

Spacing is the supporting backbone of UI. We use incrementally measured spacing to create harmonious arrangements of components and text. This gives the elements a predictable rhythm, which makes the experience as a whole feel intentional and well-designed. All spacing for components and typography is done in increments of 4 pixels. This forms the basic unit of measurement for spacing. ByrdView design system uses T-shirt naming for 7 base sizes and an x multiplier to extend the range and available options in mid-sizes.

Layered Icons

Icons are a common part of the user interface. They are language-independent and can help users efficiently navigate and perform desired tasks. They help communicate concepts faster and in less space than text, reducing cognitive load.
The name "layered icons" comes from the structure of the icon which consists of 3 layers.

1. layer-stroke (path-line that we see as an icon)
2. layer-fill (layer with a shape that can be filled with color)
3. layer-box (square in which the icon is visually centered)

This gives us the flexibility to modify color, size, thickness, and practically every visual property of the icon while having a single SVG asset.

Components Library

UI components Library was growing organically over time. To keep the library lean and flexible, every candidate for a new component used in designs was considered a "snowflake" until it was used in at least two instances.

1. New UI need

2. Does it already exist?

   Yes Use it

   No

3. Can an existing one adapt?

   Yes Amend it

   No

4. Used in two or more places?

   Yes Add to the library

   No

5. Keep it as a snowflake

   Second use Add to the library

During the whole process, it was important to keep developers informed and involved in decision-making. Synchronization was organized weekly through show & tell meetings. In those meetings, we discussed together on component structure, functionalities, and naming conventions. This also ensured Design System adoption naturally as developers gained familiarity with the system through engagement.

See all components in Figma. Use the top-left dropdown in Figma to browse the pages.

Accessibility

ByrdView Design System also has a chapter covering the accessibility guidelines. To quote my dear colleague, Hanna Stelmakh, "Designing for accessibility is about considering all users’ journeys while keeping their abilities in mind. Accessibility design is inclusive of everyone."

Accessibility allows users of all abilities to understand, use and enjoy the UI.

Result

With the system in place, the redesign of the admin platform and the mobile app shipped in about 2 months, against an estimate of 2 quarters.

Final thoughts

Building this design system was an incremental process. Over the course of over three years and few major versions, I also gained some learnings.

• A flat hierarchy is efficient
  The First ByrdView version was structured as an Atomic Design library. Appealing as a concept, it resulted in many discussions about edge cases and where those components should be placed within the system.
• A slower pace has benefits
  The 10% time contribution gave me more freedom to experiment, iterate, and change and developers saw this as a long-term process. This also got them more engaged and the adoption came very naturally.