Work Design System 2024 | Lottasandeback

Building a Design System

Background / Problem

As the company expanded, there was a pressing need for a design system to ensure design alignment and consistency. Initially, there were no reusable components, leading developers to create new components for each page. The scale of this problem and its urgency became apparent.

Company:

Workhub

My role:

UX Designer/Product Manager

Team:

UX Designer/Product Manager

3 Developers

Timeline:

1 year

Process

Inventory

We started with a modest UI library in Figma. Together with the other designers, we assessed what to retain, discard, or revise.

Building components in Storybook

I collaborated closely with one of our developers, and together we began building components in Storybook, one by one. We used Material Design as the foundation for our components, while re-designing them to Workhub design.

Replacement

One developer and I had the task of replacing all the UI components. This process was particularly time-consuming because everything was 'hard-coded'.

Design System

Struggles

No components, hard-coded, huge application

Identifying all the components was quite challenging, to say the least. Due to everything being hard-coded, the developer couldn't quickly replace the components, necessitating me to locate all instances where they were used. Navigating the complex app was difficult, compounded by numerous obscure states that were hard to trigger without prior knowledge of their existence.

Learnings

Lack of seniority and knowledge

Even though I was now more experienced, the developers were not. Design system is a highly complexed task that needed experience and former knowledge of other design systems, and there was none.

Load in Figma

Halfway through the project we started to notice load problems in Figma. First we thought there was something wrong with Figma, but realized our ‘smart’ way of building components actually slowed down the files.

Accomplishments

- Provided consistency and alignment in the product
- Enhanced Designer’s productivity
- Reduced developing time building new features