Forto delivers tech-driven solutions to streamline global logistics, and I contributed to building a design system for its SHIP platform, a tool designed to manage and optimizing customer shipments.
Senior Product Designer
Foundation library, Component library, Documentation & training, Dark mode, and Developer handoff
Lead Product Designer
Developers
Within the first 3 months, the design system achieved 84% coverage and 94% adoption, enabling faster prototyping, improved handoff, and a 50% reduction in time to ship new features.
As Forto grew and launched a strategic rebrand, we needed a scalable and adaptable design system aligned with the refreshed identity to modernize SHIP, a platform untouched for over five years, and support evolving user needs and product goals.
We built a scalable design system with one to one mapping between design and code, reusable components, and theming support. The system reinforced brand consistency while improving efficiency across design and development.
Once the new brand assets were solidified during the SHIP platform redesign, I documented these design decisions as design tokens using Figma variables.
I designed a scalable architecture that allowed core values like color, spacing, and typography to be centrally managed.
To establish Forto's scalable design system, we adopted Figma's new variables for design tokens. I created a flexible structure that enabled simplified updates by allowing single-variable changes to automatically cascade through all components, resulting in an adaptable and maintainable system.
When creating variables, I defined specific scope for each one, limiting their use to designated properties. This eliminated ambiguity in the design system and made variable collections more intuitive, enabling designers to apply variables consistently and work more efficiently.
With the foundational elements of our design system in place, we moved on to crafting the core components. The process began with the simplest building blocks, such as, atomic elements like buttons, icons, and chips. These were then combined to create more complex components, including cards, sheets, modals, shipment list, etc.
With over 50 core UI components and more than 200 variants, we've built a robust design system that supports the Ship platform and is structured to scale with future platform expansions, including the upcoming transport management system.
I ensured the documentation covers key aspects, including detailed component usage guidelines, explanations of component variants and states, and supplementary how-to resources to support teams.
To drive adoption and offer personalized support, I introduced dedicated design system office hours, providing a direct channel for teams to get hands-on guidance and quickly resolve implementation challenges they might be facing.
I enabled theme switching by expanding our color token system to seamlessly integrate dark mode, aligning with Forto's refreshed brand identity while maintaining WCAG 2.1 AA accessibility standards and ensuring optimal text legibility.
As a core contributor to the UI Platform team, I support developers in implementing scalable components and design patterns. Our workflow leveraged tools such as Figma’s Component Playground and Storybook to maintain consistency between design and code libraries.
