Company
xChange
Period
September 2022 - October 2023
Platform
Responsive web
Industry
Container logistics
Key deliverables
Design system, Device and platform-agnostic design system, Style Guide, Token Library, Component library, Module library, Design guideline documentation, Design system training sessions, Zero-to-one rebuild of the web platform, AAA minimum accessibility contrast ratio compliance
Outcomes
Outcomes
Results based on tracking after release.
100%
adoption rate
35%
increase in sentiment score
The challenge
Standardising design
XChange is a fast and evolving company that aims to revolutionise container logistics in the global trade. The company’s main product is a neutral platform that allows companies to trade, lease and manage container logistics by digitising and improving the underlying processes.
The company needed to move very fast, especially at the early years. This meant that a lof the design choices that were made were not systemic enough, leading to large amount of technical and design debt. This proved to be a big roadblock in terms of scaling the different products. Our objective from early on was to create a flexible system capable of evolving and growing alongside the product while being abstract enough to cover the different needs of the product teams.
To learn more: Go to xChange’s website
Discovery
Product audit and research
We started our process with a comprehensive audit of the existing products, understanding the current organisation of Figma files, the current usage of components and cataloguing any unusual artefacts.
Alongside the audit we also initiated collaborative sessions with the team leads to identify pain points among design, engineering and product management. This sessions helped us understand better the current sentiment of our consumers, the education levels for design systems and lastly any wishes that the teams might have in terms of unique components.
The last activity we performed was several workshops with the design team. The goal of the workshops was to get a better and more holistic view on how designers use the current system and how can we in the future make the handoff process easier.
After all activities were completed, we analysed and synthesised all of the data we gathered during the previous rounds. This allowed us to draft four major pain points that the current system, something that we needed to solve. It also allowed the team to draft an overall strategy, roadmap and rollout plan.
Fragmented foundations
The current foundations were using an old model of relying on numerical values instead of usage based tokens. This lead to confusion among consumers.
Custom components
A large amount of technical debt was accumulated over the years, resulting in many custom components with the same usage. This bloated both design but especially development, creating friction between the different feature teams.
No documentation
The current documentation did not cover most components/ foundations and was not used as single source of truth. Instead most consumers relied on direct communication resulting in inconsistencies across the products.
Design work
Setting up the foundations
Color tokens
For a design system to be truly scaleable and modular, a token structure is pivotal. Tokens remove the hard fixed values and abstraction that is inherent with numerical scales and instead provide a framework that is easier to use by the developers and designers alike.
Since the product didn’t support theming, we avoided the introduction of news elements as it would greatly interfere with the adoption and rollout strategy. Instead we opted for an architecture that could accommodate theming in the future, if the need came to be.
Color tokens are created based on usage.
Typography and spacing
One of the issues that we uncovered during the audit was a lack of consistency in typography and spacing. The current system did not have any any guidelines on objects scale or font usage.
For the typography we opted for using the default system fonts (e.g. San Fransisco for macos, segoe ui for windows etc.). This decision greatly reduced the performance cost for font rendering and loading while increasing accessibility and allowing for easier localisation.
The system fonts are very versatile and accessible.
Tokens were also used in creating the new typographic scale, ensuring that the structure is module and changes can be made easier.
Typography is build in a modular way through the use of tokens.
For the base spacing scale we opted out of using t-shirts sizes as they are not easily understood and not easily scaleable. Instead we created a library of tokens that work well with each other and that we can refer to when creating components or page guidelines.
Modular components
Once the foundations have been set, we move on in creating the components, starting with the most complex first. This allowed us to tackle big issues at the beginning and also start testing with out consumers (both design and engineers) earlier.
This process minimised the grey areas and streamlined the maintenance process by minimising the risk factor in newly introduced, complex components. It also helped us uncover blindspots in our building process as it required quick iterations and fixes based on feedback.
The components are distributed from the core to local, feature specific instances.
Throughout the process we strived to maintain a balance between ease of use and maintenance cost by always taking into consideration the experience of our consumers.
Another important factor that determined the modularity of the components was the use slots throughout the library. Based on our discussions with both design and engineering, we understood early on that we cannot cover every possible edge case or future requirement.
This led us to introducing the concept of slots, placeholders that could accommodate any kind of content the consumers needed. Slots dramatically reduced the time needed for the creation of new designs while also making the process very easy and efficient.
Using slots as a scaffolding mechanism.
Documentation and education
On of our main goals was to increase the level of education among our consumers while also making them comfortable supporting, maintaining and contributing with the system. To achieve this we focused on writing comprehensive documentation including both zero height articles and figma usage specifications. We also updated our storybook to better reflect the in production elements.
We also held office hours, AMA sessions and workshops to help with both the rollout and post rollout operations. This allows us to be in touch with our consumers, addressing any issues or problems that they may be experiencing.
Solution
A holistic overhaul
Examples of screen before and after the rollout of the new design system.
Before / After the rollout.
Before / After the rollout.
Next projects
Jump into more case studies.
