Industry

Logistics

Company

Transfix

Transfix:
Evolving a design system

Transfix:
Evolving a design system

Transfix:
Evolving a design system

What is Transfix?

Transfix is a logistics intelligence and marketplace platform, combining AI-powered freight matching, easy-to-use software, and expert support. It helps organizations deliver reliably, plan strategically, reduce empty miles, and optimize their networks efficiently.

My role

Product Designer

Responsibilities

  • Building and maintaining the Transfix design system

  • Define visual design guidelines across the org

  • Work with frontend counterpart to align design and code

  • Brand and marketing design

Impact

Helped secure Series B and
C through design efforts

Created a design system
for 4 designers

Decreased time between
design and code by 2x

The problems

The problems

The problems

Style guidelines for the wrong use case
The existing interface was using patterns that were designed for editorial content, not data heavy, interactive content

Fundraising efforts that prioritized design as a key criterion
A rapid overhaul of the user interface was essential for successful fundraising

No source of truth for product and engineering teams
Engineers and designers were not unified on what design patterns to use

Redesigning guidelines for data

Redesigning guidelines for data

Redesigning guidelines for data

When I inherited brand guidelines originally designed for editorial content, it quickly became clear they couldn’t support the needs of a data-driven product. To address this, I had to start from scratch, rethinking every element to prioritize legibility, accessibility, and functionality. The shipments list was a core part of the product that was used by the ops team as a decision making factor. From this list they could see everything about a shipment at a glance and be able to determine if something required critical attention.

The existing UI had color patterns that over-calibrated for critical states, and typography that was not meant for displaying long sequences of numbers.

The existing UI had color patterns that over-calibrated for critical states, and typography that was not meant for displaying long sequences of numbers.

The existing UI had color patterns that over-calibrated for critical states, and typography that was not meant for displaying long sequences of numbers.

The updated design removed much of the visual noise which resulted in quicker decision making by users.

The updated design removed much of the visual noise which resulted in quicker decision making by users.

The updated design removed much of the visual noise which resulted in quicker decision making by users.

Design as a driver for fundraising success

Design as a driver for fundraising success

Design as a driver for fundraising success

At Transfix, design played a pivotal role in showcasing our vision and reliability to investors.
By evolving the visual design from version 1.0 to 1.5, I increased the usability of the product and proved to investors that our interface supported business goals, which resulted in a successful Series B. Version 2.0 of the design system contributed to a successful Series C.

Previous designs focused too much on only the legibility of data without considering the overall screen. The new design centered around prioritization of information per row and ease of understanding metrics.

Previous designs focused too much on only the legibility of data without considering the overall screen. The new design centered around prioritization of information per row and ease of understanding metrics.

Previous designs focused too much on only the legibility of data without considering the overall screen. The new design centered around prioritization of information per row and ease of understanding metrics.

A north star for everyone

A north star for everyone

A north star for everyone

A continuous effort of improving the design system during Version 3.0 was to create documentation, and to apply new branding styles.

Examples of tabs and tab usage.

Examples of tabs and tab usage.

Examples of tabs and tab usage.

Components and documentation examples of multi-object autocomplete.

Components and documentation examples of multi-object autocomplete.

Components and documentation examples of multi-object autocomplete.

Example of in-line error states.

Example of in-line error states.

Example of in-line error states.

Properly defined utility colors removed arbitrary usage of color and made it much easier for users to understand each sentiment.

Properly defined utility colors removed arbitrary usage of color and made it much easier for users to understand each sentiment.

Properly defined utility colors removed arbitrary usage of color and made it much easier for users to understand each sentiment.

Examples of various card components.

Examples of various card components.

Examples of various card components.

Key takeaways

Key takeaways

Key takeaways

Accessibility should be addressed early

I’ve learned that spending time upfront to define clear and scalable color guidelines in a design system is crucial. A lot of confusion could have been avoided.

Simpler is better

Distributing the design system was a challenge because Sketch did not have an easy way to share a library of components at the time. I spent a lot of time trying to engineer a bunch of janky solutions when emailing a file would've done the job.

Ask for help

I took a lot of pride in my work and did not ask for help. My ego ended up costing the team time when someone else with the expertise could have solved the problem faster.

© Daiji Shikama 2024

© Daiji Shikama 2024

© Daiji Shikama 2024