top of page
Kargo Design System Hero Image.png

Design System | Product Management

Unifying Kargo’s design language:
The challenge of consistency across products

Context:

​​When I joined Kargo, I quickly noticed a growing problem: UI inconsistencies across products. Each in-house and external tool seemed to have a different design language, creating a fragmented user experience.
 
While the marketing team had a basic guideline for Kargo’s branding (such as color schemes), it wasn’t integrated into the design or development workflows. A rudimentary Figma file and an incomplete bit.cloud component library were in use, but these tools often caused more confusion than clarity. Designers and developers were stuck in endless cycles of back-and-forth to reconcile mismatches, which slowed down product delivery.
 
With Kargo’s rapid growth, this ad-hoc approach wasn’t sustainable. A unified design system was essential for scaling efficiently and creating a consistent experience across products.
Specs:


Project Scope
 
Establish a Design System

Tools

Figma, Bit.Cloud, Notion

Role
 
Product Designer and Manager

Team
(4) UX Design Team
(1) Frontend Developer


Project Duration

August 2022 - June 2023
Empathize

How do you build a design system from scratch with no PM and a small team?

The challenge wasn’t just technical; it was also organizational. While the need for a design system was obvious, there wasn’t a dedicated product or project manager to oversee the effort. Additionally, the existing design resources were incomplete and inconsistent.
Main Challenges to Overcome:​
  • No dedicated leadership: This was a UX team initiative, so there was no formal project or product manager. I took on the role of organizing and managing the effort.

  • Incomplete tools: The existing Figma file and bit.cloud components were basic and didn’t align, which created a gap between design and development as there was no single source of truth.

  • Team bandwidth: Designers and developers were juggling this initiative alongside their regular work.

 

Other Bumps Along the Road:

  • Build alignment between the design and development teams.

  • Learn design systems on the fly, since this was new territory.

  • Advocate for the value of this initiative across teams, including marketing.

The stakes were high: we needed to create a scalable, reusable design system to support Kargo’s growing product portfolio, but there was no blueprint for how to start.

Laying the foundation:
Building a scalable design system, step by step

I took the lead in organizing the initiative and began laying the groundwork for the design system:
  • Collaborated with the front-end engineer to define how the design system would integrate with the existing development workflows in bit.cloud.

  • Audited existing components across all Kargo products to identify inconsistencies, overlaps, and gaps in functionality.

  • Created a process for collaboration:

    • Split component design work across the UX team.

    • Established weekly meetings to review progress, hold design critiques, and get team buy-in for decisions.

    • Used Notion to track component progress and ensure alignment between design and development.

  • Documented components: Designed components in Figma and prepared them for review with UX team members.

  • Advocated for cross-team adoption: Presented the initiative to the marketing team, showing how the design system could also resolve their consistency issues.

This approach helped create momentum within the team and a clear roadmap for the design system.
Design Systems Presentation to Marketing Team.png
Screenshot is showcasing me presenting the Design System to Kargo's Marketing Team

A collaborative design effort that unified
30+ components

During my time at Kargo, we designed and documented 30+ reusable components in Figma, including buttons, inputs, modals, and layout grids.
 
Each component was:
  • Reviewed through a team critique process to ensure quality and alignment.

  • Approved by the UX team and prepped for developer implementation in bit.cloud

This was the first time Kargo had a shared, organized component library that the design and development teams could refer to collaboratively.

Leaving behind a framework for long-term success

While the design system was still a work in progress when I left Kargo, I made significant progress in laying the foundation for future success:​
  • Established a scalable review and documentation process that the team could continue using after my departure.

  • Created a roadmap for completing the remaining components and integrating them fully into bit.cloud.

  • Fostered a culture of collaboration between design and development, reducing friction and improving communication.

A project in motion:
Progress and early wins at Kargo

Although the design system wasn’t fully live when I left, the initiative had already made a tangible impact:
  • Designed and documented 30+ components in Figma, laying the groundwork for a unified system.

  • Improved collaboration between designers and developers, reducing implementation inefficiencies.

  • Earned buy-in from the marketing team, ensuring the design system could benefit other departments beyond UX.

View Other Projects

Artboard.png

Finect

UX/UI design of an End-to-End Mobile App  for self financial management.

3 Device Mashup-center justified-02.png

Kaus

Designing a Responsive Website for an Insurance Company

bottom of page