Back To See All Works

Solio Design Language System

Creating a Design System for Unifying The Design Language of Solio

About Project

With the growth of design function in the world, new problems have arisen. These problems include keeping consistency in the design of a product, the possibility of changing elements in several parts of a product at the same time, and the lack of a common language between the design team and the product development team. With the development of design tools in recent years and the maturity of design function, design systems were created as a solution for the above issues. I’ve tried to solve similar problems with Solio design system. This project is the story of the creation of Solio’s system design.

Year

2021

My Role

DLS Designer

Problem

Solio was a small startup, and I was a solo designer when I joined the team. Our team was small, but we had big plans for it. We decided to design an MVP android application from scratch, and I was responsible for design it. We knew that the design team should be expanded in the future, but at that time we didn't have any other designer on our team. I didn't have enough time to work on the design system separately but I was aware of the importance of having it. So I decided to create the Solio DLS in parallel with the main design to keep different parts of the product consistent.

Process & Solution

Created Layered Structure

For the design of this project, I used a 4-layer structure in which the visual elements go from the smallest elements and tokens in the first layer to the largest and most complex elements in the fourth layer. This multi-layered structure can support the needs of this particular product as well as its possible expansion in the future, and at the same time give the whole design a consistent and orderly structure.

  1. Design Tokens
  2. Basic Components
  3. Complex Components
  4. Design Screens
Layered Structure of Solio DLS

1st Layer: Design Tokens

This Layer Includes color, text and style tokens. I defined a range a colors and text styles that can support the needs of designing a pleasant and colorful android application based on our brand.

Design Tokens of Solio

2nd Layer: Basic Components

This Layer Includes all base components. in order to achieve the scalability that we need for a different parts of the app I also added different states and visual variations of each component.

Some of the Basic Components

3rd Layer: Complex Components

Including complex components that created based on specific needs of a flow, page or section. each complex component is made out of basic components and design tokens. I also designed each component as flexible as possible to cover all platform/size needs in the future.

Some of the complex components of Solio

4th Layer: Design Screens

Designs screens made out of different complex components that stacked besides or below each other. Below are some designed samples of different pages of Solio app made with Solio DLS. I think design systems are living things and need to be constantly reviewed and maintained.

Some of the design screens of Solio
Other projects