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.
Responsibilities
Design system Team lead
Conceptualizing and planning the system
Getting business buy-in
Design principles workshop
Motion & interactions
The team
Ayelet Cohen Vardi, Senior FE Engineer
Matan Rosen, UX designer
Eliyahu Zazon, UX writer
The challenge
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.
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:
- 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.
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.
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?