Making of Dorsome: The Design System of Dukaan
Since our launch in 2020, we have crafted over 30,000+ UI screens for our seller dashboard 🚀
At Dukaan, speed is our moat. However, designing at speed comes with its own challenges in terms of design consistency.
For instance,
- We were unknowingly using two sets of pills which were only different in terms of padding.
2. Our old design system lacked proper documentation. As our team grew, familiarising the new folks with our design principles and with our UI became challenging.
3. To use an existing component in a new design, we had to scan through all the relevant designs, copy the required components, and then use them.
Sounds irritating, right? It was indeed time-consuming and a significant flow break.
This made our design process quite cumbersome. Thus we went back to the drawing board and rethought our design system from scratch to make our process faster, robust & scalable!
Say Hello to Dorsome
The seller-side design system of Dukaan!
Dukaan empowers brands like VU Televisions, HealthXP, Style Up, and thousands of other Direct to Consumer brands worldwide.
As an e-commerce enabler, we strongly believe that a well-designed product is what separates us from the competition and thus this is what we are striving for!
This is why we have created Dorsome, a comprehensive design system that helps us build consistent and cohesive interfaces across our platform.
Creating a seamless UX, period!
At Dukaan, we have a diverse range of products and services, and in order to maintain consistency in each of these, we need to make sure that designs are consistent throughout.
Furthermore, to achieve consistency, we need to create three design systems: one for the seller web experience, one for the buyer web experience, and one for the mobile app experience.
More context on the buyer and seller sides of our platform:
- Seller Web
The part of the platform used by sellers to list and manage their products, track sales and manage their business. - Buyer Web
The part of the platform used by customers to browse and purchase products.
Creating three design systems for the various verticals of the Dukaan platform is no small task. It requires careful planning, research, and collaboration between designers, developers, and other stakeholders.
Building one brick at a time!
Dorsome, the first of the three design systems that we have built, is just the beginning. It covers the seller side of our platform and it represents our commitment to design and our dedication to delivering the best possible experience to our users. And we are excited to see where this journey will take us as we build out the other design systems in the future.
More on the process and features of the Dorsome Design System is below.
From Concept to Reality
After a lot of brainstorming, it was clear that we did not want to make our design system overwhelming.
We wanted to make our system extremely easy to use, navigate and implement; thus, we went ahead with the idea of “Atomic Design.”
Dorsome consists of five levels: atoms, molecules, organisms, pages, and add-ons.
The idea behind the atomic design is to start with the most minor, essential UI elements and build up to more complex and functional components. This helps ensure a consistent and cohesive user experience across a product or website.
Apart from our ideology and structure, we also wanted the process of making the design system to be top-notch. Luckily, when we were planning to build the system, Figma launched two beta features — nested instance and boolean.
Using nested components and boolean properties in Figma was leverage for us since it provided several benefits:
Key Features
Dorsome includes three key features that help us to build cohesive and effective digital experiences:
- Consistency
Dorsome helps ensure consistency in the design and user experience of the Dukaan platform by providing guidelines and standards for the design and use of components. - Scalability
Dorsome is designed to be scalable, allowing us to add new components and features as needed easily. This helps us ensure that the Dukaan platform can continue to grow and evolve over time. - Collaboration
Dorsome is built with the consultation of our tech team. We have used a standard nomenclature with which both designers and developers are comfortable, helping us to work together effectively.
The Next Leap
This is the first of three design systems we plan to build from the bottom up. Apart from that, we know that the job with Dorsome still needs to be done! However, we are committed to it, and with time we will update it to make the best use.
The future of design at Dukaan is bright, and we can’t wait to see what it holds.
🔥 Stay tuned for more insights into how we are designing the future and present of e-commerce!
🚀 PS: We are going to make our design system available on the Figma community soon.
🔗 Check out Dukaan
🔗 Check out our Instagram page
