Argo
The complex world of international trade finance has many moving parts. Each party (and there are 3). Needs a secure and simple way to do business. Creating a seamless experience for something that, for the most part, has been done using more traditional communication methods.
Problem
With international trade needing 3 separate parties we needed a way to allow each party to see where they are in the process. Focusing particular interest in if said party needs to take action.
Kanban gives you an "at a glace" look at the status of tasksDiscovery
Effectively we needed to communicate with all parties involved the status of each of the transactions. This naturally could be done via notifications, but I felt it was important for each of the users to have a quick/clear indication of how things were going.
Some users would have multiple transactions open at once, and being able to see the status of each, but more importantly if they needed to take action, with a glance was the optimum solution.
I started by looking at how statuses were shown elsewhere, in other applications. But it wasn’t until I was looking at my workload that a possible solution could be something similar to a Kanban board.
The card provides key information for users to make an informed decisionThe Card
With the idea of using a Kanban style board. It was time to create the cards that would show the information about an on going transaction. As mentioned a lot of the customers of Argo have multiple transactions open at the same time.
This meant that we not only did we have to distinguish each transaction, but also provide the information required for the user to make a decision before taking action.
We settled on the following data points;
Transaction number
Status
Next Steps
Transaction type, buying/selling, and from whom.
Brief breakdown of the goods.
Cost
Payment/delivery date.
Colour is associated with a transaction, continuing as a theme in all screens pertaining to it.Distinguishing transactions
With multiple transactions it was important to come up with a way to distinguish between each.
Initially we looked at displaying the transactions in order, but upon further discovery I thought it might be a good idea to “theme” each transaction, that way we could associate it with a particular feature/symbol/colour.
This theme would then permeate throughout the transaction, so anywhere a customer was working on said transaction, a distinct indicator would be present.
This theme would be set by the customer each time they setup a transaction, but rather than giving free reign we would have a set number of options to choose from.
The card provides key information for users to make an informed decisionThe Final Card
And here it is…the final design we approved off. As you can see the colour not only helps distinguish between each separate transaction, but also gives helps to separate the information that is presented.
The most important information is toward the top, with tertiary information underneath.
You may also notice that we opted to us a texture behind the primary information to help soften the large colour block. We also added a slight transparency behind the “next” section to help bring this forward.
Let see it in its full context below.
Final Design
Here are the screens that used the cards. I’ve put emphasis on showing the “Kanban” style board. Which added all parties involved as to the progress of each transaction. I have also included the screens to show the customisation of each of the transaction cards. That included not only custom labels, but also the ordering of the information.
Results
Before introducing this view a fair amount of support was dedicated to helping both Importer and Exporter navigate the requirements for each transaction. This dramatically reduced these support costs.
Surprisingly we also saw that the speed of which support agents were able to correct potential issues, as they too were given a similar view within the admin of the product.