Creating a Design System to Modernise a New Product
Modernise Shesha’s visual Identity and create a scalable design system that could support its transition into a standalone product
Role
Lead designer
Timeline
2 Months
Team
2 Designers
Tools
Figma
OVERVIEW
Building A Modern Design System that Will Unify a New Tool
Shesha had been in development for nearly 10 years. As it prepared to become its own independent company, the product's outdated UI was holding it back—giving users and potential clients a poor first impression of what was actually a powerful low-code platform.
IMPACT
Achievements
Since the partial rollout of the new design system to the public. We have seen a 42% increase in GitHub user participation.
Shesha now looks and feels like a modern, professional product, matching the quality of the platform underneath. Creating a strong visual identity.
Developers can now reference a single source of truth, reducing back-and-forth and implement inconsistencies. Creating a faster design-to-development handoff process.
PROBLEM
Brand Guidelines Without a System
When I joined, the team had brand guidelines and a UI Kit that documented fonts, colours, component styles, and input styles.
However, These were constructed several years ago. As it prepared to become its own independent company, the product's outdated UI was holding it back. This was giving users and potential clients a poor first impression of what was actually a powerful low-code platform.
While it defined how the UI looked, it lacked:
Modernised & responsive component foundations
Unified & robust Icon library for a growing component library
component behaviour that mapped to real product scenarios
Defined visual direction and component standards
APPROACH
Understanding How We Got Here?
We divided and conquered, conducting a full audit of Shesha's existing UI and evaluating how it impacted the overall user experience. After evaluating, I started reviewing existing UI across products to see where patterns repeated, broke, or were being improvised.
This helped in identifying what actually needed to be standardised. Furthermore, It was important for us to run usability tests and held in-depth discussions with developers to understand their pain points.
Outdated Visual Trends: The layout, components and inputs were designed with outdated UI trends that needed to be updated with the new trends that will help Shesha come to the ever evolving future.
Inconsistent Design Language: Too many contributors over the years meant inconsistent fonts, typography, spacing, and iconography across the platform.
Limited Icon Library: The existing icons couldn't support Shesha's custom components, forcing designers and developers into awkward workarounds.
The original component kit was useful for the time it was created. However, there was issues that needed to be addressed, especially with the scale that Shesha was growing.
The Current Icon library that was being funneled by ANT Design, a React component.
SOLUTION
A Shared System Teams Could Actually Use: Modernised component library
The result was the company's first design system since launching as an independent company. It is currently being used across web, mobile and internal tools. It standardised core interactions and visual foundations while remaining flexible enough for growth within Shesha and the product needs.
Enhanced existing Ant Design components with Shesha's visual language. Avoided unnecessary rework by keeping what already worked well.
Unified typography & colour system
Standardised fonts, type scales, and colour tokens to eliminate inconsistencies across the platform.
Bespoke icon library
I proposed and led the creation of a custom icon set specifically designed for Shesha's unique components and use cases.
CONCLUSION
Key Takeaways: What I Learned
Not everything needs to be rebuilt from scratch.
We avoided unnecessary rework by identifying what already worked and modernizing it instead of starting over.
Constraints breed creativity.
Shesha's technical limitations forced us to think creatively about component design and iconography, which ultimately made the system stronger.
Design systems are never done.
They evolve with the product. The best systems are built to adapt, not to be static.
This was my first experience contributing to a design system at scale, and it taught me how to balance design ideals with technical realities. Working closely with developers helped me understand the importance of building components that are not just beautiful, but practical and maintainable.
I also learned that good design systems aren't about perfection—they're about creating a shared language that helps teams move faster and more confidently.
Next project
Elevating Internal Feedback Experience