SATO UI DESIGN SYSTEM
Scope: Information Architecture, Research, Visual Design & Testing, Implementation Supervision
Client: Reservio
Create a design system from scratch with no design source files in a team of 5? Crazy it might sound, but that was exactly what we managed to accomplish at czech-based startup Reservio. There is a company legend of a Sato Urobi - an employee of the year who can do it all. So there it was how it all started with a name - Sato UI...

NXT
PRV
Sato UI 🚀


Goal: Create flexible design system that incorporates new branding
Introduce design into the fabric of the company. Create hand-off process between design and development
Challenges
Create design library and components from scratch and visual system that reflects new branding and flexible enough to iterate on the system fast
1
Team
1 designer, 2 developers,
2 top managers,
1 part-time designer
2
Interviews with Stakeholders
Information Architecture
Visual Audit
Research and Mapping
Research and Planning
Design & Development
Basic Principles
UI Kit & Styleguide
Components Library
Feedback
Implementation
Syncing Design & Development
Handoff Processes
Lean approach for Design System
Promoting System in a Team
Research & Planning
Early on we were looking for low-maintenance approach suitable for a small team that would not take years to build a design system. The goal was to implement it fast and allow quick iterations as the process was also going hand in hand with rebranding.

Create components from scratch and make an easy structure that reflect new branding and flexible to iterate on the system.
Early on there were multiple ways we tried to assess the structure of the design system and get feedback from all stakeholders to determine the structure of design system and prioritise parts.
Toolbox
Low-fidelity prototypes,
Miro Boards,
Stakeholders Interviews & Presentations,
Brainstorming sessions
UX was also very important part of the process of development of Sato UI. And users are us, our own team.
Design & Development
At first design principles were defined and basic design inventory.
The challenge was to evaluate existing design patterns without any source files. We started by defining design principles in verbs, to emphasise and encourage actions. That way even in even during discovery phase it also reflected the main principles of simplicity and relevance.
It was clear that atomic structure would be the best option for Reservio. Atoms and basic rules translated into UI kit that became a foundation of Sato UI design system.
Key learning
Team communication and engagement is a key. Getting everyone onboard and excited
about creating a design system is a process too, which requires as much dedication as visual design or research.
The system is still very young, but it was important for us to adapt it to lean principles of product development and iterate quickly. That allowed to test new visual language on the go.
With the help of part-time external designer components library was created from scratch and basic patterns defined for all products.
We approached design system as a product and used same lean approach as in development of the products
Impact & Outcome
and still in progress 🛠️

Higher consistency in products faster prototyping and reduced time for design check
Team is more engaged in design system and design-development interaction is improved
Whats next -- prototyping and
testing design tokens
Related Projects
Nice to meet you!
Let's create something together!
Nice to meet you
Let's work together! Share your project
or idea and I'll get back to you asap!