View In-Depth Case Study
At Acowale, the mission is clear: to connect and empower every stakeholder in the commerce ecosystem—be it Financials, Business Owners, Manufacturers, Vendors, or Consumers. With a vision of creating user-friendly, end-to-end solutions, Acowale aims to be the go-to platform where businesses thrive and consumers discover anything they need with absolute trust.
Acowale was launched in 2020 as a non-profit initiative to support small businesses to sustain them through challenging times of pandemic. Now, they are a product based company creating consumer-business based platforms which had a sales of 100k INR in first week of launch.
INTRODUCTION
Scroll to read the process (OR)
RESEARCH PHASE
What goes behind in making a Design System?
Building on the foundation laid by ADes 2.2, our mission was clear: identify and alleviate the frustrations experienced by users to evolve into ADS 3.3. While ADes 2.2 provided a solid starting point, it became evident that we needed to dig deeper to create a truly scalable and intuitive system.
INSPIRATION FROM THE BEST
To elevate our approach, I turned to industry leaders like Shopify, Apple, Atlassian and Google Material UI, drawing insights from their robust design systems. Microsoft's Fluent Web UI System also provided invaluable guidance. However, it was the adoption of Atomic Design principles that proved to be the game-changer. This methodology transformed how we structured our components, making the system not only comprehensive but also adaptable and scalable.
WHY DID WE NEED A NEW DESIGN SYSTEM?
As Acowale’s SaaS products rapidly expanded, it became clear that our existing design system, ADes 2.2, needed an upgrade. We were at a crossroads—our design-centric, visually appealing component library needed to evolve to keep pace with the demands of a fast-growing product ecosystem. While designing the Acowale Business MVP Product, we uncovered several key issues in ADes 2.2 that necessitated a significant revamp for ADS 3.3.
ADes 2.2 managed Light and Dark Modes as separate pages, a theoretically sound approach that, in practice, led to inefficiencies.
# ISSUE 2 - DESIGN SYSTEM SCALABILITY
As the product line expanded, accommodating more components, patterns, and features became increasingly difficult.
#ISSUE 3 - CHANGES IN BRANDING AND IDENTITY
Acowale’s rebranding introduced new guidelines that our design system needed to reflect.
KEEPING IT SIMPLE YET IMPACTFUL
Tailwind CSS Code Snippets within the ADS 3.3
When ADes 2.2 released, we did not have the Variables feature at that time.
However, Atomic Design Principles really helped me to ensure scalable elements by using nested components, and using component properties to simplify variables. We started by creating different properties to be a changeable aspect of the component. This allowed us to control things like -
- Layers you can hide or show (icons, text, forms)
- Changing Style of a component (By swapping instances)
- Text Strings ( By changing in each Properties bar)
This helped us to speed up prototyping by saving on those extra clicks which easily gets frustrating.
Swapping Button Properties to change the Style
Changing Text Strings for easier Customization
UPDATE #1
UPDATE #2
Managing different versions of a component became much easier.
UPDATE #3
Rebranding of Acowale involved in a changing of colors, typography and overall visual style.
RESULTS
# DOCUMENTATION: ARCHIVES - CHANGE LOG
It is so important to always leave information behind. It provides insights into the evolution of the design system, including changes, updates, and version history of the design system over time.
COMMUNICATION ↔ COLLABORATION
While working on this project, having everyone on the same page was a necessity.
We worked hard, played hard. We had many activities which really kept us going even on the most toughest days.
Snippet of Channel Log to document changes in the Design System
Fun Friday Event @Acowale
WHAT’S NEXT?
As a UX Designer in a startup, I understand that there would be more designers that the company would hire in the future. I understand the importance of constant iteration in design systems. The system is still evolving, driven by technology, user behavior, and industry trends. I'm eager to see how it maintains design consistency and improves workflows for our growing team.
