Designing B2B Platform
Singapore based startup
Nov - Dec 2018
Team size: 2
Role: Product Designer
How might we help shipowners simplify the chaotic multi-channel process of reviewing and finalizing chartering contracts?
Commercial shipping is a 14 Trillion dollar sector. It accounts for 80% by volume and 50% by value of the exports and imports in the EU. The industry is dominated by giant corporations, each imposing their protocols on all parties involved during deal negotiations and throughout the operations. While it makes their internal processes simpler, it results in a lack of industry-wide standard protocols and processes.
A chat integrated workflow to facilitate contract negotiation, centralized communication, document sharing and audit.
Democratize shipping industry
What it means?
How we achieved it?
This project is under a Non-Disclosure Agreement. Therefore, this case study will only discuss the design process without going into details of research findings, product features and actual designs. This case study focuses on the Chartering module of the product.
1. Understanding the Domain
I started the project by getting familiar with the workings of the shipping domain and existing practices. Getting acquainted with the basic technical terms was necessary to understand the business logic and workflows.
Additional pain points identified from this phase:
Broker or charters often share outdated documents by mistake.
In case of any conflict, backtracking the changes based on negotiations is cumbersome.
Sessions with Experts
2. Aligning with the Product Vision
The next step was to get on the same page with the product owners regarding the product vision and business goals and spend time understanding the proposed solution. Doing this ensured that the business goals do not get sidetracked during the design process.
The product vision informed the decision to include modules and features in the product.
Document of Understanding
3. Collaborative Workshop
In the week-long collaborative workshop with product owners, domain experts, and the development manager, we finalized the scope, the high-level product structure and next steps. The business goals identified in the previous phase guided the scope of MVP.
My next step was to sketch concepts for the Chartering module and define the basic structure of the interface - laying down the foundations of interaction patterns for the whole product. There were multiple iterations with feedback from domain experts.
The feedbacks comments:
Helped in refining interaction pattern - prioritizing switching between counterparties over open positions.
Highlighted the need of separating out term negotiation conversations from charter party negotiations.
Domain Expert Feedback
5. High-fidelity Wireframes
In this step, I created screen-by-screen high-fidelity wireframes for primary task flows. The key aspect of this step was to identify what information to display on each screen, information grouping and its flow between screens. I worked closely with the development manager to ensure all feature functions were correctly captured. There were multiple iterations with feedback from domain experts.
Domain expert feedback highlighted the need for:
A single long and dense contract form instead of multi-step wizard, so that all information can be reviewed in one place.
Accuracy of data in the wireframes to verify business logic and information flow.
Domain Expert Feedback
6. Click-through Prototype
The last step was to create a clickable prototype of the primary task flows using Invision. The product owner used the prototype to demonstrate the solution to industry leaders for validation and feedback.
1. Unifying the workflow of contract negotiation, modification, review and finalization
Finalizing a chartering contract entails the following:
Negotiation with multiple counter-parties.
Agreement to a time-bound conditional contract with the selected counter-party.
Exchange of documents between the parties.
Review and modification of contract clauses.
Finalize the agreement within the stipulated time frame.
Since there is a lack of industry-wide protocol, combining them into a single workflow that makes sense and does not miss any critical step required multiple iteration and refinement.
2. Reducing the number of inputs in contract form
Due to a lack of standard practices, determining the minimal amount of information to be captured through the contract form to generate a basic contract was tricky. New input fields were requested at every review with domain experts. As no patterns in required information emerged, we resorted to adding an open free text field to provide additional information that needs to be included in the contract.
3. Ensuring data accuracy
The domain experts provided us with sample technical calculations to understand the business logic and information grouping. They expected the see accurate calculations in the wireframes. This was an extremely tedious job and required special attention through multiple versions of wireframes.
Validate the input fields and their sequence in the contract forms to optimize the forms for efficiency and accuracy.
Analyze User Behavior from Web Analytics
Analyze user behavior data identify the patterns and fine tune the workflows for contract negotiation and confirmation.
Needs of domain expert users are different from regular users.
Use dense forms to support glanceability.
Lack of information is bigger problem than information overload.
Inaccurate data in wireframes distracts domain experts during design reviews.
Allow for manual review before critical actions.