top of page

Design System for Studio

Studio: A virtual event management product by Allseated

Building a multi-brand design system from the ground up to connect global teams on a common design language for Studio, a complex system that exists in growing stages.

My role

Product designer- UX/UI, management and documentation of design systems, mapping, accessibility, and responsive design

People I worked with

Amit Herman- Product designer

Yuval Zunsztern- Product designer

Yael Rosenberg- Senior product designer

Roni Gabai- Head of design

Dor Hershkovitch- VP design

Ziv Abramovitch, Tsachiel Choen, David Botzer, Paul Lipovanu, Ron Ramal, Yuval Saadaty, David Tover- Fronted developers

Initially: Disorganised routine

Our palette colours were too varied and disorganized, as we used a wide range of buttons on a daily basis and changed inputs in the system frequently.


The team felt that our efforts were not well spent, putting most of our effort into building components instead of solving UX problems. We reached a turning point in the UI as the product grew.

We wanted to check how to build a proper design system and improve it- how to build complex, accessible, adaptive components and variants and how we’ll talk in the same language with the developers.

Old design system

Challenges in redesign

Two systems 

Allseated has two systems (Exvo and Studio) that complement each other but act and are visually different.

The Studio system should be natural, adding another challenge.

Redesign system

We needed to create a design system, which the design team had already started to work with but was disorganised.

Create and implement new process 

Create and implement the right process of working on the design system- from building components up to documentation and understanding the need to collaborate

as a team for an organised result.


We knew that it would be a long process that would need to keep growing and be maintained in the future.

It was important to know that we do not have a deadline for the project and that it requires continuous work. 

Buttons in used, before redesign

map-trifold-bold (2).png

General Mapping

The first thing we did was to check what exists and what does not exist, and what are the problems .

We mapped all the components and style guides

we currently use in the system.

Mapping process

What We Found


Conflicting guidelines

and direction


Duplication of common components and colours


Inconsistencies across market websites and the Studio platform


Inefficient and slow work inside the design team and also with the dev team


Redesign Process

I reached the conclusion that even the “small details”, such as icons, affect much larger sections and workflows.


I felt responsible for this project, and although I knew it

might be drawn-out and detail-driven work, I was motivated

by seeing our team's future with a product with a rich

design system.


I also felt in my daily work how the lack of a proper design system slowed the teamwork between the design and dev teams.

8x8 base grid

Timeline design system

Hierarchy of the process- decide what milestone we need to work on first, and what leads our decision-making process

Finding the current problems in a particular pattern (such as colours system, buttons, input fields etc.), checking the root of the problem across the system and understanding it,

readability checks

Solving and making an alternative- test how to rebuild the components/patterns, research, observing the system via that component to ensure consistency

Conclusions-  analyzing all the options we have and testing the implemented components, and finally meeting with the design team for a decision

Building and documentation- pixel perfect, states, building components and variants, documentation in a separate file

and informing the team regarding a new component in

a specific channel 

Updating the design team- ensure that all members know about changes/ new components or behaviour. Sending a link to the new/changed component and for the documentation file

Updating the dev team- make sure all changes and behaviours are understood

Documentation example for Icons

Every component is further refined for additional breakpoints as well as minimal and maximum content specifications

We focused on building organized components from the initial stage to master components to maintain consistency and internal order.

Date Picker master

Date Picker layers

Component library

The Impact 

We set clear guidelines on how to keep growing and nourishing

the design system and, most of all, to always think across the entire

system when starting work. 


The Design System can still be easily understood by any designer or developer that needs to use it.

We successfully created a look into the future for a product in non-stop growth with a strong design system, that is consistent, scalable and broad, which matches other platforms of Allseated

We created a common language between the design team and dev team, and coherence between other departments (marketing and design).

As a result, we were able to design new features more quickly, focus on more complex user interfaces, and save time for the dev team.

bottom of page