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.
Research
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
.png){kind=small}
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
1
Conflicting guidelines
and direction
2
Duplication of common components and colours
3
Inconsistencies across market websites and the Studio platform
4
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.