Making of Dorsome: The Design System of Dukaan

Shourya Dubey
Dukaan Design
Published in
5 min readFeb 22, 2023

--

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,

  1. We were unknowingly using two sets of pills which were only different in terms of padding.
A meme image that shows confusion in choosing the correct button. Both of these buttons seem similar visually but have differnt padding values.
The confusion was real!

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.

This is a banner image that shows different elements used in Dorsome.
Introducing Dorsome: The design system of Dukaan

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:

  1. Seller Web
    The part of the platform used by sellers to list and manage their products, track sales and manage their business.
  2. Buyer Web
    The part of the platform used by customers to browse and purchase products.
Seller Web
This image shows buyer web of Dukaan.
Buyer Web

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.

Atomic Design Approach

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.

Index of Dorsome that shows how we have differentiated the components using the Atomic Design approach.
Navigating Between the Pages
A GIF that shows a quick view of the structure of our Figma file.
Quick View of the structure of our Figma file

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:

This image shows the benefits of using nested components and boolean properties in Figma that are customization, reuse and development.
Benefits of using nested components and boolean properties in Figma
Boolean & Nested instances in action

Key Features

Dorsome includes three key features that help us to build cohesive and effective digital experiences:

  1. 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.
  2. 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.
  3. 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.
GIF that shows quick view of our Figma file.
Quick View of our Figma file

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

--

--