As part of Forto's strategic rebranding initiative, I helped launched a design system for SHIP, Forto’s platform for managing and optimizing customer shipments.
Senior Product Designer
Brand Designers, Developers
Tokens, Component library, Documentation, Theming, Developer handoff
SHIP hadn’t been updated in over five years. With Forto’s strategic rebrand, we needed a design system that could modernize the platform, align with the new identity, and scale with fast-evolving product and user needs.
We delivered a scalable design system with one-to-one mapping between design and code, reusable components, and full theming support. It improved delivery speed across teams, reduced UI inconsistencies, ensured effortless brand alignment , and streamlined collaboration between design and engineering.
To bring the system to life, we focused on establishing solid foundations that could scale, from tokens and typography to the smallest UI primitives. The goal was to ensure visual consistency, design flexibility, and technical feasibility across the product.
I built the entire component library in Figma and worked closely with developers to maintain parity in Storybook. Every design decision was made with implementation in mind, enabling faster development and fewer design-to-code mismatches.
Beyond the system itself, I documented usage, onboarded teams, and ran training sessions to drive adoption. This ensured that both designers and engineers could work faster, more confidently, and with a shared source of truth.
After finalizing Forto’s refreshed brand assets for SHIP, I translated key design decisions into centralized design tokens using Figma variables. This created a single source of truth for core values like color, spacing, and typography.
I structured the token system to enable effortless updates. Changing a single variable cascades across all components automatically. This scalability reduces maintenance overhead, speeds up design iteration, and ensures brand consistency at every touchpoint.
As part of setting up the foundations, I scoped each variable in Figma to specific properties such as text, fill, or stroke to remove ambiguity in the system. This ensured that designers could only apply variables where they were intended to be used.
The result was a cleaner, more intuitive variable structure that reduced misuse, guided better decisions, and made the design process faster and more consistent.
With the foundations in place, I designed the first layer of reusable UI primitives, creating over 50 components and more than 200 variants including buttons, chips, icons, and inputs, serving as the core building blocks of the system.
For designers, this enabled faster workflows by removing the need to build components from scratch. For developers, these primitives directly mapped to modular, developer-ready components in code via Storybook, reducing rework and minimized misalignment between design and engineering. These base elements became the starting point for everything that followed.
Once the primitives were in place, I focused on building core components that powered key workflows across the SHIP platform, from basic cards and modals to advanced tables and shipment lists. These components were composed from primitives, structured using Figma variants, and designed with accessibility in mind to support real product needs.
These components power the SHIP platform's core experiences today and are structured to scale with future product verticals like Forto’s transport management system. Designers could work faster with ready-made, consistent building blocks, and developers could ship UI confidently with Storybook-backed components that mirrored design.
To ensure the system was adopted correctly, I created comprehensive documentation covering component usage, token and variant logic, and interactive states along with practical how-to resources to support both design and development workflows. This included live Figma documentation, usage dos and donts, and links to matching Storybook components in code.
I also ran hands-on training sessions for designers and developers, o drive adoption and unblock teams faster, I introduced weekly design system office hours to give designers and developers a direct support channel. This helped reduce onboarding time, minimized support questions, and ensured consistent usage across teams.
Our workflow leveraged tools such as Figma’s Dev Mode, Figma's Component Playground, Token studio to sync variables to Github, and Storybook to maintain consistency between design and code libraries.
As a core contributor to the UI Platform team, I worked closely with engineers to ensure every component in Figma had a 1:1 match in code.
This reduced back-and-forth during implementation, eliminated ambiguity, and made handoff feel invisible.
Accelerated shipping for 2 product teams by cutting feature delivery by half the time it took without the system.
Improved design efficiency with reusable components and over 90% reuse rate.
Improved design–dev alignment through 1:1 parity between Figma and Storybook, leading to clearer handoffs and fewer implementation misalignments.
Deepened my expertise in design systems by architecting scalable structures using new Figma features, working with web technologies including TailwindCSS & ShadcnUI.
