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.
Design system Team lead
Conceptualizing and planning the system
Getting business buy-in
Design principles workshop
Motion & interactions
Ayelet Cohen Vardi, Senior FE Engineer
Matan Rosen, UX designer
Eliyahu Zazon, UX writer
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.
Redefine and streamline the process and workflow across all teams in Freightos.
Unify all of Freightos products and user experience in order to create trust in the brand and the product.
Help Freightos scale fast in a super competitive trillion-dollar industry.
Improve the overall user experience in all of Freightos’ products and create a new and aesthetically pleasing look for the users.
- Competitive analysis
- Tools research
- Literature review
- Success indicators and KPIs
- Interface inventory
- Prioritized components list
- 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.
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.
Several iterations helped us find the right number of colors and shades.
There are 3 types of colors:
- Primary – the dominant color that the user sees most in our product.
- Semantic – error, success, warning, information. These colors are based on very firm research about the psychology of signals.
- 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.
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.
Involve stakeholders from the start. A design system is a product that touches all aspects of the company.
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?