Navigating user experience on land, at sea, and in the air

Unified UX language for Fintraffic

We formed a joint design system team with Fintraffic and worked closely together to define the target state for the design system’s value creation for both development teams and application users. We selected pilot services for the design system to anchor the design system in teams’ actual everyday needs and used various methods to gather insights into existing ways of working and how the design system could deliver value. 

Through this work, we were able to better understand what kind of a design system would bring the biggest benefits in Fintraffic’s case. For example, the varied technologies used across Fintraffic’s systems meant that a solution tied to a single front-end framework wouldn’t be feasible, while Fintraffic’s organisational structure meant that aligning work across operating areas would need to be a key focus area.

As the foundations of the unified user experience, we defined design tokens and platform-agnostic visual properties that can be kept in sync between design and code. Based on the common foundations we crafted a component library using Figma. This library serves as a comprehensive repository of reusable design elements, ensuring that designers have high-quality assets easily at their disposal. This ensures that designers can focus on specific problems rather than getting bogged down in repetitive tasks. To complement the component library, we developed a dedicated documentation site that guides teams through the adoption, usage, and contribution processes of the design system. This makes communication across roles and teams more straightforward and the intent behind design clearer to everyone. 

Our joint effort with Fintraffic on the unified UX language has equipped UX designers, developers, and project owners with tools that elevate shared understanding, enhance efficiency, and raise the overall quality bar for Fintraffic’s digital applications and services.

Governance model for design

Together with Fintraffic, we created a basis for the continuous development of the design system, anchored in the everyday reality of the organisation. We defined governance structures and processes for the maintenance, development, and day-to-day operation of the design system that would serve both immediate and future needs. Recognising that Fintraffic services serve very different use cases and are at very different lifecycle stages, we focused on how development teams could identify the most appropriate ways for them to use and contribute to the design system.

In a co-creation process with Fintraffic’s teams, we designed the system to be extensible, with centralised ownership but shared responsibility. These choices were made to anchor the design system to the realities of teams’ work, rather than having a centralised team working in a silo on imaginary user needs and creating a restrictive design system disconnected from everyday work. 

Our objective was to create just enough processes to help pragmatically solve everyday situations – like what to do when a team has a UX need they can’t solve on their own. We emphasised communication in a multivendor environment. For example, the design system’s Slack workspace hosts designers and developers from several different vendors, aligning on questions arising from day-to-day work.

Design system in code

Solita has supported Fintraffic with ongoing development. Together, we’ve built and scaled Fintraffic’s design system in code, basing our work on framework-agnostic Web Components to best support existing teams and products built on a variety of different front-end frameworks. This gave us a way to quickly scale a system that teams could start to leverage early, whether their applications were built using React, Vue, Angular or something else. The code implementation is kept in sync with the design in Figma using shared design tokens.

Having a repository of ready-made components easily available eases the front-end development workload of teams and frees up their time: instead of developing the same buttons and menus over and over again, teams can focus on application-specific problems, while improvements to shared components can be managed centrally.

The design system has contributed to a more open culture for the design of Fintraffic applications. Demand for the design system has been strong, and it has already been implemented in almost all Fintraffic operating areas in a wide variety of systems and environments.