Designing B2B Platform
Commercial Shipping
Responsive web
Project Overview
B2B platform
Singapore based startup
Nov - Dec 2018
Team
Team size: 2
Role: Product Designer
Deliverables
Information Architecture
Task flow
High-fidelity Wireframes
Click-through Prototype
Tools
Sketch
Invision
X-mind
Problem Statement
How might we help shipowners simplify the chaotic multi-channel process of reviewing and finalizing chartering contracts?
Domain Background
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.
The Solution
A chat integrated workflow to facilitate contract negotiation, centralized communication, document sharing and audit.
Product vision
Democratize shipping industry
Reduce cost
What it means?
Standardization
Transparency
How we achieved it?
Unified workflow
Change tracking
Design Process
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.
Secondary Research
Document Review
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
Business Goals
Proposed Solution
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.
Proto-persona
Information Architecture
Task Flows
4. Ideation
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.
Ideation
Low-fidelity Wireframes
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.
Information Grouping
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.
Click-through Prototype
Product Demo
Solution Validation
Challenges
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.
Next Steps
Usability Test
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.
Learnings
Needs of domain expert users are different from regular users.
01
Use dense forms to support glanceability.
03
Lack of information is bigger problem than information overload.
02
Inaccurate data in wireframes distracts domain experts during design reviews.
04
Allow for manual review before critical actions.