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.
- Design Tokens
- Basic Components
- Complex Components
- Design Screens
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.
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.
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.
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.