Company
xChange
Period
May 2023 - August 2023
Platform
Web
Industry
Container logistics
Key deliverables
User research, User flows, Wireframes ,Mockups, Prototypes, Responsive design
Outcomes
Outcomes
Results based on tracking after release.
65%
decrease in support tickets
24%
increase in payments collection
45%
decrease in invoicing disputes
Summary
Revolutionising finances in the logistics industry
XChange vision is to revolutionise the logistics of global trade. Even though the container was a large innovation that paved the path for globalisation, the surrounding process were not standardised or innovated. With this in mind xChange set out to create a neutral infrastructure that connected all logistics companies and created economic opportunity.
When talking about trade and logistics, finance is a central pillar to it since it covers most vital parts of transactions. With this project we aimed to improve invoice management and to rethink the information architecture based on our users needs. xChange’s financial product offers the tools needed to manage transactions and more importantly invoices.
To learn more: Go to xChange’s website
Discovery
Invoices are very complex
Invoices page before the update.
What initiated the project was mainly the large number of support tickets being created by customers. The invoices management system was created many years ago and it was largely left untouched while regularly introducing new features to it. This led to a large amount of both design/dev debt while it also increase the frustration levels of its every day users.
In order to better understand the paint points and frustrations of our users and to set a strategy, we conducted multiple interviews with both internal stakeholders and consumers.
After the research phase was completed we gathered and synthesised the data in order to discover any patterns that we can use. Based on our analysis we create three major pain points we needed to solve:
No easy access to information
Invoices are managed solely through a table, a pattern that is very common for data heavy products. The main pain point here was that it was never design with accessibility or ease of search in mind.
This led to user needing to go through multiple pages or back and forth until they find the information they wanted.
Lack of context
The current visual representation of the invoices did not cover many of the invoices types or statuses that were already in use by the system. This led to confusion and frustration for the users (e.g. partial payed was a common payment method, and since the current visualisation didn’t support it, a user would have to manually track it).
Invoice layout is hard to scan
An invoice is a data heavy document and for container logistics even more so. An average number of pages for a typical invoice could be 15 and more.
It was also difficult to read since the lettering was very small to minimise the amount of pages.
Design work
A seamless connection between design and development
Before initiating the design work, we started by aligning with the engineers on what is viable and how can we improve the back-end. This process helps us find tech constraints early on and eventually de-risk the project.
By collaborating and bringing in engineering early on, we were able to scope the project, review feasibility and reduce the any grey zones / answer any questions.
During this phase we also created the user flows, hmw’s and some early sketches for possible solutions.
Solution
Final outcome
Accessible information
The first point we aimed to solve was the access to information and parsing through large amounts of data and line items. To achieve this we create set of filters that could help users search the database quickly and find the line items they need based on a set parameters.
The filters and search functions were created based on the feedback we received from both internal and external stakeholders.
The newly introduced filters help the user to sort large amounts of data.
Contextualising invoices
The second part of the solution focused on the lack of context surrounding the individual invoices. Most of the information required were already provided by the back-end but never utilised.
Based on this we added new data columns while updating existing ones like the status. This solution would greatly improve the information displayed and provide more context per line item.
Additional context by categorising invoices based on type and payment status.
Functional layout
The last part of the project was updating the invoices themselves. This was a larger effort since it required work on both the digital versions and also the printing material.
To do this we introduced several new types of invoices based on their usage. We also designed them to be modular to increase consistency and standardise formatting (much like the container itself). This effort greatly decreased the amount of pages for a single invoice while improved the ability to scan a document quickly.
Print material overhaul to accommodate a modular structure.
Next projects
Jump into more case studies.
