Product Overview

Around 90% of everything we eat, wear, or use is shipped by the trillion-dollar freight industry. But freight sales are stuck in the ‘90s, lacking automation and transparency. Freightos brings freight online, with technology that helps some of the world’s largest freight companies, retailers, manufacturers, and small businesses automate freight shipping.

The problem

As Freightos scaled in a highly-competitive area, years-old pain points in its processes and execution held it back, leading to major issues in process, workflows and user experience.

My role

Design system Team lead
Conceptualizing and planning the system
Getting business buy-in
Design principles workshop

Team

Ayelet Cohen Vardi (Senior FE Engineer & RnD Manager), Matan Rosen (UX designer), Eliyahu Zazon (UX writer)

Tools

Sketch, Zeplin, StoryBook, Catalog, Jira

Our goals

Efficiency

Redefine and streamline the process and workflow across all teams in Freightos.

Consistency

Unify all of Freightos products and user experience in order to create trust in the brand and the product.

Scalability

Help Freightos scale fast in a super competitive trillion-dollar industry.

UX/UI

Improve the overall user experience in all of Freightos’ products and create a new and aesthetically pleasing look for the users.

Research

  • Interviews
  • Competitive analysis
  • Tools research
  • Literature review

Plan

  • Success indicators and KPIs
  • Roadmap
  • Interface inventory
  • Prioritized components list

Execute

  • Design principles workshop
  • New UI kit design and specs
  • Components documentation
  • Development guidelines

Research Key Learnings

  • Miscommunication between teams.
  • Slow delivery of features and HUGE backlogs.
  • Messy infrastructure.
  • Too much time pixel-pushing and painstaking visual QA.
  • Wasted hours of back-and-forth between design and development.
  • Design and development inconsistency.

Design principles workshop

Design principles are the tool to manifest the purpose of the product through design. They are strongly attached to the brand’s characteristics. We embarked on this journey starting with an off-site day and several follow-up meetings to find and shape our principles.

Roadmap

The roadmap is essential in communicating the product strategy to all stakeholders. It’s a high-level plan that shows how all the epics, features, and tasks come together to achieve the design system goals.

Interface inventory

Auditing the product is crucial in documenting all inconsistencies, and map out component types to pinpoint their location. The goal is to have a categorized list for all the old components when the time comes to replace them.

Typography

We used “Open Sans” as our only font after trying different pairings. We decided to go with one font type for the sake of consistency and to create a visual hierarchy using different weights, colors, and sizes.

Open sans has excellent legibility characteristics in its letterforms.

For type scaling we used the major thirds system.

Colors

Several iterations helped us find the right number of colors and shades.

There are 3 types of colors:

  1. Primary –  the dominant color that the user sees most in our product.
  2. Semantic – error, success, warning, information. These colors are based on very firm research about the psychology of signals.
  3. Accent – colors that are used to emphasize some UI elements, or to highlight some information.

Accessibility plays a huge role when it comes to colors, and we followed the WCAG 2.0 guidelines for contrast accessibility as much as we could.

Iconography

Icons are simple representations of actions and statuses within our product. They are easy to recognize and remember, visually pleasing, and consistent in style and sizes.

For ease of use and consistency’s sake, we decided to categorize the icons. This gave each icon a meaning and defined its use.

Components library (sneak peek)

View Freightos design system

Main Takeaways

Team effort

Involve stakeholders from the start. A design system is a product that touches all aspects of the company.

Move quickly

There is no shame using an existing UI framework to get things out the door. It’s a matter of company budget and resources.

Patience is a virtue

Be patient. A design system is a dynamic and evolving product that’s never truly done.

Strict or loose

Decide on the system’s flexibility. Is it strict, requiring a special process to update or add components or is it more of a guideline?