SeaRates - Design System
At SeaRates, I led a two-member UI/UX design team, tasked with creating the design system for the premier international shipping tariff search engine. My approach was highly collaborative, emphasizing iterative progress with consistent input from both our design peers and the development team.
01
I started by auditing our existing UI components and design patterns, identifying inconsistencies and redundancies that needed to be addressed. From there, I listed out all the necessary components and patterns required to build a cohesive design system. With these elements in mind, I established design principles that would serve as the foundation, ensuring that everything aligned with our brand's identity and values.
02
Before the update, the primary problem was that our company's suite of web applications lacked a unified and consistent design system. This absence of a cohesive foundation in design language, guidelines, and UI pattern libraries led to inefficiencies and inconsistencies across our product, branding, and engineering teams.
03
To solve the problem, my design team and I rebuilt outdated components, gathered existing use cases, and developed new, standardized use cases. This resulted in a unified design system that enhanced consistency and efficiency across all our web applications.
04
When creating a design system for SeaRates, an emphasis was placed on developing high-quality component documentation to ensure an effective library that supports quick and consistent decision-making. Inspirations were drawn from various renowned design systems, including IBM’s Carbon, Material, Atlassian, and others, to integrate best practices, guidelines, and tools.
05
I worked on defining the anatomy of components in the design system, clearly outlining the structure and specifications for each element.
06
All interaction states — hover, focus, filled out, error, and disabled — are thoroughly covered, ensuring a robust interaction design.
07
Improved component management and usability by leveraging an atomic design approach, grouping variants with custom properties in Figma. This method streamlined maintenance and made component swapping more efficient and flexible.
08
Meticulously crafted layouts were developed to incorporate all essential elements, ensuring seamless integration into the future website. The design system was organized into specific tabs to facilitate easy navigation and usage.
09
Figma's assets feature was effectively leveraged to centralize all components. This approach facilitated rapid and uniform application across various files, greatly enhancing the efficiency of the design workflow.
