Problem
With a team of 21 designers, it was becoming increasingly difficult to maintain a cohesive and consistent user experience and visual design across all platforms for the 6+ products offered by Digikala. The speed of task delivery in the design team was not up to par with the demands of a fast-paced company like Digikala. These challenges posed a significant obstacle to the design team's productivity and efficiency. Thus, it was clear that a solution needed to be implemented to streamline the design process and ensure a unified design language across all Digikala products.
Process & Solution
To achieve the goal of developing a design system based on product screens that considers functionality, user experience, and visual design, we recognized the need for a structured approach. We began the creation process by following a series of essential steps that ensured we stayed on track towards our objective:
1. Analysing Product Screens:
Our first step was to thoroughly analyse the product screens and identify the core components, visual elements, and interaction patterns used across all screens. We extracted all used components, patterns, and interactions from the designed screens.
2. Defining a Hierarchy:
We then created a hierarchy and defined the relationships between the components by benchmarking famous design systems and borrowing useful ideas. We based our structure on the Atomic design theory and established three layers:
- Core
- Theming
- Complex Components
1st Layer: Core
The Core layer of our design system is made up of the fundamental components, text styles, and layer styles. To ensure scalability for various products, we added multiple visual variations of each component, providing flexibility for the design team to choose the appropriate style for a specific product. Consistency is critical for all Digikala products, and the Core layer plays a vital role in maintaining a unified design language across them.
2nd Layer: Theming
The Theming layer is in charge of handling the color themes of various products and implementing them in the Core library. This alters the visual appearance of the Core layer components to correspond with the product's visual identity.
3rd Layer: Complex Components
The third layer of the Digikala design system consists of intricate components tailored to each product line or area within a product. These complex components are formed by combining various core components and color themes. To cater to different platform and size requirements, each complex component was designed in multiple sizes and views. This layer facilitates the creation of distinct and personalised experiences for each product while ensuring consistency and coherence across the entire Digikala product line.
3. Establishing Guidelines:
We set up guidelines for using the design system that included best practices, naming conventions, and documentation to ensure that all team members understood how to use the system and contribute to its ongoing development and improvement. To support other team members and develop new components and documentation, we formed a small team of two designers. The team will work on refining the design system over time. A request form and a Slack design channel were also set up to collect new component requests and reports of component bugs.
See it in Action
Here are some recent examples of different products designed using the Digikala design language system.
Design systems are essential to maintain consistency and cohesiveness in a product line's visual identity. However, they are not static; they are living things that need to evolve and adapt to the changing needs of the products they serve. To keep the design system up-to-date and relevant, it requires regular review and maintenance.
At Digikala, we recognise the importance of maintaining our design system, and for that, we created a dedicated design-ops team. This team is responsible for reviewing and updating the design system regularly, ensuring that it remains effective and aligned with the current product design needs. They also address any issues or bugs identified by the team members and fix them promptly.
The design-ops team works in collaboration with the designers and other team members to gather feedback and suggestions for improving the design system. They also analyze the usage data and keep track of the system's performance to identify areas for improvement. This ensures that the design system remains flexible and scalable, allowing us to adapt to new design trends and technologies as they emerge.
In addition to reviewing and maintaining the design system, the design-ops team also provides support and training to the team members on how to use the system effectively. They create documentation, conduct workshops, and provide one-on-one training to help team members understand the system's capabilities and how to leverage them.