Kargo
Advocated for and led the initiative for Kargo's first Scalable Design System
TL;DR
Project Overview
🚨 Problem
Kargo’s internal and external products lacked a unified design system, leading to inconsistent UIs, slow design iteration, and inefficient developer handoff. Designers were manually recreating UI patterns, and brand updates were difficult to scale across products.
✅ Solution
A scalable design system in Figma, built from modular components, ensuring visual and functional consistency across all Kargo products. The system streamlined design-to-development workflows, reduced inconsistencies, and improved cross-team collaboration.
📈 Impact
30+ reusable components designed, implemented, and governed.
4x faster dev cycles—reducing implementation time from 4 weeks to 1 week.
50% faster design turnaround—enabled designers to create high-fidelity concepts in 1 day instead of 3.
Marketing team adoption for brand consistency across their materials.
Mentored my successor and created documentation to ensure continuity after my departure.
🎯 My Role
Design System Strategy, UX/UI Design, Component Structuring, Developer Collaboration, QA testing
🤝 Collaboration
Sergio M. – Frontend Engineering Lead
Kargo UX Team – Design Reviews, Implementation Support
Brief
Company
Kargo Global (AdTech Industry)
Tools
Figma
Bit.Cloud
Notion
Jira
React
Time
October 2022 - April 2023
Project Details
A Growing Product Suite Needed a Unified Design Language.
When I joined Kargo, the company was rapidly expanding through acquisitions, bringing a variety of tools and products under its umbrella. While the product suite grew, none of these tools aligned under a unified brand, resulting in inconsistent UIs, disjointed user experiences, and inefficient workflows for design and development teams.
To address these challenges, I led the creation of a unified design system to ensure consistency, streamline collaboration, and support scalability as Kargo’s product suite continued to expand.
The Problem
How Do You Create a Scalable Design System with No PM, No Roadmap, and a Growing Workload?
🧐
Conduct Component Audit
Conducted a full inventory of UI components across Kargo's products to identify redundancies, missing elements, and inconsistencies that needed to be addressed.
Prioritized components based on usage and impact.
Free and rough templates found online was being used as a reference but no guidance or system in place for following these template.
👩🏽💻
Streamline Design - Dev Sync
Worked closely with front-end developer to bridge the gap between design and implementation, using tools like Font Ninja and inspect mode for precision.
Setup Weekly 1:1 design-developer meetings to clarify expectations, address feedback, and ensure seamless implementation.
Process I Defined
1
Design Component
Design Component
|
UX team review
|
Iterations based on UX feedback
|
Dev review
|
Iterations based on Dev feedback
2
Handover to Dev
Share Figma File Link to Dev
|
Dev to implement
|
UX to review before Dev merges his code
3
Figma Team Library
Integrate Component in Figma's Design System File
|
UX Team to review the Updates
|
Define instructions for use
🤝
Implement a Structured Collaborative Workflow
Conducted weekly critique sessions to review designs and align across teams.
Created a tracking system on Notion to organize component work from design to implementation.
I setup the management of this project on Notion because work related to Design System was not part of the Design Team's sprint assignments, thus we couldn't use Jira until the components were ready for the developer to implement to bit.cloud.
The Design
From Chaos to Clarity: 30+ Components and a Shared Vision for Kargo's Design.
Key Deliverables:
30+ reusable components, including buttons, modals, inputs, and typography styles, designed and documented in Figma.
A centralized design system library accessible to UX, marketing, and creative teams for consistent branding.
A structured workflow that reduced friction between design and development, enabling faster delivery and fewer errors.
This was the first time Kargo had a shared, organized component library that the design and development teams could refer to collaboratively.
The Impact
✅ Standardized UI across all products by designing and implementing 30+ reusable components.
✅ Cut development time from 4 weeks to 1 week by eliminating design inconsistencies and streamlining handoffs.
✅ Improved cross-team collaboration between designers and engineers, ensuring seamless implementation.
✅ Designed a scalable system foundation, enabling future product growth with minimal design debt.
Impact for the Marketing Team
When the marketing team found out that we were working on a cohesive design system for Kargo, they reached out to learn more to see how this can also benefit their team and help increase efficiency in their work.
"I can already see, we can take what you guys are using and make our brand look even more consistent with our products"
- Marketing Team
Screenshot of me presenting the Design System to the Marketing team to align on how this will help them as well
Ongoing Work
Leaving Behind a Framework for Long-Term Success.
Although the design system was still in progress when I left Kargo, I took deliberate steps to ensure the project stayed on track
These efforts ensured that the design system initiative could progress seamlessly, providing Kargo with a strong foundation for long-term success even after my departure.
📑
Comprehensive Documentation
I created detailed guides and processes in Notion, outlining workflows for designing, reviewing, and implementing components.
🫴🏽
Onboarding My Successor
I personally trained my replacement, walking them through the design system framework, the Figma library structure, and the collabortion process with developers.
💪
Team Empowerment
By formalizing processes and tools, I enabled the UX and development teams to continue building and refining the design system with minimal disruption.
⚠️ This project was completed before Figma released Tokens and Variables, so they are not reflected in the designs shown here.
However, I stay up-to-date with latest Figma releases, including Tokens, Variables, and advanced component strategies and am aligned with modern design system best practices.
Redesigned for an Intuitive and Scalable Experience from Concept to Launch
Radius360x App Redesign
👋 Thanks for Stopping by!
© 2025 Naini Bansal
Credit: Framer + Adobe Illustrator + ADPList Mentors