Design System

Internal Project

Our goal

Establish avDesign System with shared components and flexible variables. Implement the Design System in the code to increase efficiency in design & development and to have a more consistent UI/UX throughout the product.

Objectives & my role

  • Evaluate and improve all Figma components used for the Design System

  • Plan the implementation with Product Management & Engineers

  • Create all the atom design components in the code

  • Swap existing old components with the new design system ones

  • Hold an external & internal presentation about the Design System and share the knowledge

  • Improve the efficiency of designing & development by using shared components

I was part of the ‘Design System Taskforce’ with the whole Design Team involved and one Senior Frontend Engineer from my development team. Later on a ‘Design System Sprint’ was planned and all Frontend Engineers participated.

Target Users & their Problems

The Design System is meant for the Designer & Developers. But also customers and the whole company will benefit from it through increased efficiency and less time needed in development. Through this, the product team is faster in its development and can build more features which bring value to the user.

With the Design System comes scalable components for the future and consistent patterns & behaviors which the user knows and can easily recognize.

Research

158

That’s how many components we have already in Figma…

47%

Research across the world showed that it is that much faster working with a Design System than creating everything from scratch

>50%

of FrontEnd Engineers agree that it is hard to find existing styles & components

>85%

Agree that the implementation of variables and shared components will increase efficiency & save time

>50%

Have a negative opinion on working with styles & components so far

75%

Have experienced already a negative impact due to missing communication

Close the gap between Design & Production

How it’s done in Figma and in the designs….

Nice, clean, fresh, reusable

How it’s done in the Code….

Different radiuses, colors, sizes

Our Plan & Steps

To also convince the Product Management we needed a plan for the topic:

  1. With the newest features in Figma, create and assign variables to the components. On the way improve existing components so they are reusable & scalable for different use cases.

2. Plan together with all Frontend Engineers a ‘Design System Sprint’. In this sprint we will tackle the most important components first (atom components).

3. Prepare all the tickets necessary for the Sprint and execute. Further steps will be discussed after the Sprint

Challenges

Many, many discussions were needed to share the knowledge but also decide on the approach we want to make & overcome technical challenges.

With the constant improvements of Figma at this time, new features regarding this topic arised. Taking always more time for us to rework or add new parts.

It was very hard to convince Steakholders on why we should tackle to this topic instead of some feature development…

Thinking of a good structure for naming the variables took some time. It had to be consistent, easily understandable & reflected in the code.

The first results

After executing the ‘Design System Sprint’
these were the first results:

18/22

shared components were created during the sprint and can be already used in feature development

100%

of the needed variables were implemented in Figma & in the code

100%

of Frontend Engineers agree that it makes their work with UI designs and CSS styling easier, cleaner and more consistent & that they will safe significant time during development.

180%

of the set OKRs for this topic was reached. (We got more done that we originally planned!)

35%

of the newly build components were already swapped in the whole running product.

UI re-design of components (some examples)

Toast Notification

Before
(outdated icons, sharp edges, overcomplicated in design & code)

After
(Simple design & code, new set of icons, new state for upcoming
notification center)

Empty State

Before
(No set empty states, outdated icons, not nicely usable in Figma)

After
(Set empty states (14 in total), new icons & modern look, easy usable)

More to come as the project continues!

(and maybe goes into its second sprint)

Want to see more? Click the button to get redirected back to the ‘Case Studies’ Overview!