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
In the first phase of mapping out existing design definitions in CSS, I focused on 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.
- layer-stroke (path-line that we see as an icon)
- layer-fill (layer with a shape that can be filled with color)
- 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.
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.
*Use top-left Figma dropdown to browse through 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.
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.
