Handex
Complex transactions require multiple steps, from multiple parties. Keeping track of these is imperative to a successful transaction.
Problem
With complex, multistep processes, forms, documents and alterations there needs to be a seamless way to keep track of all what has been done, and what needs to be done.
Users need a single space to view progress, see uploaded documents or contracts, and view submitted forms.
Complex processes, require clear indications.Discovery
With so many points of interest for this view, we needed to be careful not to overwhelm users with information. It was imperative to keep a strict hierarchy. We needed show to multiple points of information;
Brief overview of the application
This would show the basic details of the transaction that was taking place. We knew that there would be multiple sub-views within this page so having an anchoring point for the user to constantly be able to view would be ideal.
Current state of the application
Trade transactions have long timelines. With multiple steps that need to be completed. Having a clear idea of what step the user is on is imperative to the users cognitive load.
State of overall progress
Not only does the user need to know where they are in the process, but also how that translates to the application as a whole. It’s important to show just how far along they are.
Wireframes
Knowing what we wanted on each of the screens, it was important to create the necessary wireframes to support our assumptions.
1. State header
Using a clear header to how the current state of the application was paramount here. It would always be visible to allow the user to always know what state the application was in.
2. Application overview
Next was the brief overview of the application, deciding to show the most important information. This was important as users would often have several ongoing transactions or applications. We wanted users to quickly establish where they were. This information was decided on the ease of cognitive load. Therefore the Importer/Exporter was chosen as the first of these elements. As users had established relationships with these importers/exporters, their name seemed fitting. Other important information included the product, contract value, and date of application.
3. Application timeline
We then had to show the user where they were within the application process as a whole. We opted for a timeline here, with steps that would be crossed off upon completion. It was important to allow this list to be dynamic, as different transactions had different steps, sometimes more, sometimes less. We used a vertical list to allow this to work.
4. Sub-navigation
Finally was the navigation for the application itself. As mentioned it is a lengthy process and therefore each of the stages needs to be navigated to effectively. Ultimately ending up on a horizontal style tabular navigation. It would allow for users to flick through each section, very much like they would a contract, or paperwork pertaining to a transaction.
Final Design
The final product provided users with clear, and consistent view of there transaction. The timeline allowed users to understand the process (one that had previously been paper based). And with the separate views for each of the section of a transaction allowed us to not overwhelm a user with long form content.
