Responsive web

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.png

Secondary Research

Document review.png

Document Review

Sessions with experts.png

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.png

Document of Understanding

Business goals.png

Business Goals

Proposed solution.png

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.png

Proto-persona

Infromation architecture.png

Information Architecture

task flow.png

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.png

Ideation

Low-fidelity prototype.png

Low-fidelity Wireframes

Domain expert feedback.png

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.png

Information Grouping

Information Flow.png

Information Flow

Domain expert feedback.png

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.png

Click-through Prototype

Product Demo.png

Product Demo

Solution validation.png

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.