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.
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
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.
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
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.
What We Found
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
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
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,
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
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.