Context:
Loadsmart is a logistics and freight technology company building digital solutions to move cargo more efficiently. As the product suite expanded, many tools were developed without the involvement of designers, leading to fragmented and inconsistent user experiences. There was no shared design language, no documented component library, and no visual or functional coherence across teams.

The design system initiative originally began as a proposal to create two distinct systems: one for internal tools and another for customer-facing products. They were named Sula and Miranda, as a playful tribute to the Brazilian singer Sula Miranda, known as the “Queen of the Truck Drivers.” Eventually, the two systems were unified under a single name: Miranda Design System, honoring the logistics spirit while simplifying communication across the company.

Project Overview

Objective:

To create a centralized, scalable, and well-documented design system—Miranda DS—that would unify the user experience across all Loadsmart products, speed up the design and development process, and lay a foundation for future growth. The goal was not only visual consistency, but also functional clarity, accessibility, and better collaboration between designers and developers.

Duration:
2021–2022

My Role:

• Initiated and led the creation of Miranda DS across the entire product suite

• Audited existing products and components, identifying inconsistencies and priorities

• Designed foundational tokens and reusable components from scratch

• Created documentation for usage, behavior, and guidelines

• Facilitated alignment between design and front-end teams

• Structured the governance model for maintaining and evolving the system

Key Contributions:

• Launched Loadsmart’s first official design system, including tokens, components, and documentation

• Unified the visual language across multiple product teams

• Created prioritization frameworks (e.g., Effort vs. Value Matrix, rollout waves) to guide the system’s development

• Led collaboration with engineering to implement components in code and build system-wide adoption

• Established a scalable governance model for continuous evolution of the system

Fragmented Experience:
Many Loadsmart products had been originally built without the involvement of designers, resulting in inconsistent layouts, unclear visual hierarchy, and UI elements that didn’t follow accessibility or usability best practices.

No Shared Design Language:
Designers often recreated components from scratch or inherited outdated patterns, leading to duplicated work and visual inconsistency across products.

Lack of Documentation:
There was no centralized documentation for design standards, which made onboarding, collaboration, and scalability difficult.

Slow Handoff and Implementation:
Without clear specs or shared tokens, handoffs between design and development were error-prone and required frequent clarification or rework.

The Problem

Component Audit:
Started by mapping all existing UI elements across Loadsmart’s products to identify overlaps, inconsistencies, and opportunities for consolidation.

Foundation First:
Defined the core design foundations including:

• Typography scale and font tokens

• Spacing system

• Color palette (brand, status, neutrals)

• Iconography system

• Border radius and weight standards

• Tone of voice alignment

Prioritization by Value:
Created an Effort vs Value matrix to align priorities across design and engineering, defining MVPs for rollout (Waves 1–3).

Component Creation and Documentation:
Designed and documented reusable components (inputs, buttons, banners, tooltips, etc.), ensuring accessibility, responsiveness, and clarity.

Cross-Team Collaboration:
Led conversations with frontend engineers to define handoff process, set technical specs, and begin phased implementation across products.

Governance Process:
Structured a workflow for ongoing component requests, using tools like Jira and Notion to triage, approve, and evolve the system continuously.

The Process

The Solution

A Scalable Design System:
Built a system of tokens, components, and patterns that could be reused across products, enabling faster iteration and a more unified user experience.

Design & Engineering Alignment:
Created a shared language between design and code through well-documented tokens, rules, and usage examples.

Governance & Maintenance:
Established a sustainable process for maintaining and improving the design system over time, based on user needs and product roadmap.

The Impact

Operational Efficiency:
Driving the Miranda Design System project led to a 54% reduction in project time, a 60% reduction in design-related costs, and a 57% increase in overall design and development efficiency.

Process Innovation:
Developed new operational workflows centered on speed, scalability, and consistency—making accessibility a built-in standard rather than an afterthought.

Improved Collaboration:
Bridged the gap between design and engineering through shared definitions, reducing friction and misunderstandings.

Cross-Team Collaboration:
By coordinating closely between design, engineering, and product teams, I helped establish a shared language and improved alignment across the entire product lifecycle.

Consistency Across Products:
Miranda DS became the central reference for designers and developers, improving UI consistency across all Loadsmart interfaces.

Faster Design and Dev Cycles:
Product teams shipped faster with ready-to-use, validated components and visual standards.

Scalable Infrastructure:
The system was built with flexibility and growth in mind, supporting new products and features with minimal overhead.

• Start with Foundations:
  A strong foundation of typography, spacing, and tokens makes component development smoother and more scalable.

• Work Cross-Functionally:
  Collaboration with engineering from the beginning was key to successful implementation.

• Balance Value and Effort:
  The prioritization matrix helped align design vision with engineering capacity, keeping the system lean and impactful.

• Evolve, Don’t Perfect:
  Launching an MVP with clear governance allowed the system to grow organically based on real needs.

Learnings

Thank you