top of page

Commercial Shipping - Chartering

From concept to final responsive-web product design in 42 days

The client came to us with their product idea. They wanted to validate their solution, design, and build a marketplace for commercial shipping. The challenge was to do it all in an extremely strict timeline. In this project, we had to get creative and go outside our usual process to succeed at the task set before us.




Interaction Designer


Product Owner

Development Manager

Visual Designer

Front-end engineer


42 days

Overview of the project phases

Due to the particularly short timeframe of the design phase, we had to take some unconventional paths to get to the finish line. We consolidated the initial discovery and user research phase by conducting an intensive week-long product workshop and co-designing session with all stakeholders including subject matter experts. To shorten the visual design phase, we closely collaborated UI engineer to identify and design only the essential screens and unique UI elements for web and mobile.

Design process.png

Understanding commercial shipping and user pain points

Through the intensive stakeholder workshop and knowledge sessions with 3 expert users (SMEs), we established an overview of prevalent industry practices and challenges that users face while looking for and negotiating freight contracts. Below are the main insights we learned.


The small players struggle

The industry is dominated by giant corporations that have ongoing long-term freight contracts. Smaller players rely on their professional and personal networks to get freight contracts.


Lack of standardized practices

The corporations impose their own protocol throughout the contract negotiation and operations. Smaller players need to continuously switch and adapt their processes based on who they are dealing with.


Contract negotiations are extremely fast paced and time sensitive

Users negotiate rates and terms with multiple parties at a time to get the best deal requiring urgent and immediate involvement is constantly.


Multiple channels of communication

Communication, sharing of information, and exchange of documents happen through multiple channels – phone calls, text messages, email, and various Instant Messaging platforms, making it difficult to keep track. It also poses a huge problem when any contract needs to be audited later.

User persona

Based on the knowledge sessions with domain experts, we defined two proto personas.

Persona - Broker.png

Defining core-feature and MVP

During the intensive stakeholder workshops we mapped out the modules and core feature of the product. We focused on the scope of the MVP and determined the primary user tasks.

Modules and core features

In collaboration with the product owner and development manager, I created a mind-map to create identify and document the different modules and features.

Mindmap - Karken.png
Mindmap - marketplace.png

Task flows

In the co-design session with 3 expert users, product owner and engineering manager, we identified the primary task flows necessary in the MVP.  We iterated over the task flows to optimize the order of steps and data input/output in each step. We focused on the tasks of a Ship Owner/Charterer since they have the most complex requirements and decided to derive the tasks for Cargo Owners and Brokers based off of them.

Add a ship and publish an open position

To start using the platform, the Charterer must add their ships on the platform and publish their availability for taking cargo - Open Position - in the Marketplace.

Contract negotiation and finalization

After publishing an open position, Charterer can view and select matching cargo parties to negotiate the deal with. The negotiation can be initiated with several counter parties at a time and requires active and immediate involvement of all parties. The whole process is lengthy, involves complex interactions, exchange of data and document and ends with the Charterer finalizing the contract with one party.

Information Architecture

The mind map and the task flows formed the basis of the Information Architecture.


We co-created the IA for the MVP keeping in mind future modules and expansion plans.

Being a data heavy domain, we spent time to document the data input and output through the different modules, their flow and relationship. It also helped the engineering managers to identify the functional specs and mark areas for further investigation during requirement grooming.

Getting contract negotiation right

The most critical piece of the whole product was the contract negotiation and finalization. It was challenging because of two reasons:

1. It was long and complicated, involved multiple parties, exchange of data and documents.

2. Everyone did it their own way - there wasn't one way of doing it.

We went through several iterations of the task flow and designs in the co-design and design phases, gathering input and feedback from SMEs the whole time.

Refining the task flow through several iterations 

From sketches to high-fidelity wireframes

Key Solution Elements

As we iterated through designs and brainstormed ideas, we came up with these key solution elements to address user pain points.


Support time-sensitive and fast-paced negotiation.  Facilitate simultaneous negotiation with several parties


A unified interface for conversations and sharing of documents from the repository when adding vessels/positions.


A time-stamped record of all negotiations for each open position for easy tracking and auditing when necessary.

Clickable wireframe prototype

We created a clickable prototype with the high-fidelity wireframes to demo the product to potential undustry users and collect feedback.

Visual design guideline

While we were collecting feedback on the critical task flows, we started visual design for the simpler screens and form to set the visual style and guideline.

Style - 2.png

Final web designs

During this phase, we closely collaborated with the front-end engineers to identify the essential screens and unique UI elements for web and mobile. By creating high-fidelity mockups for a limited number of screens allowed us to shorten this phase. But, it demanded a deeper understanding of the user flows and design decisions from the engineering team. It also meant providing more support, clarification, and adjustments to the engineering team during development.

Mobile designs

Due to the limited amount of time and complexity of interactions, we decided to limit the functions and features available on the mobile. We prioritized time-sensitive functions on the mobile and kept complex interactions available on the web.


01 Expert users have very specific needs

Instead of ease of use and minimalism, domain experts look for efficiency and accuracy. While designing the forms for contract main terms, we addressed this need through creating dense multiple column forms.

02 SMEs are crucial for domain heavy projects

Commercial shipping is complicated and technical domain. Even if we had more time at our hands, we wouldn't have been able to capture accurate functional specs and understand data flow without the knowledge sessions with the SMEs.

bottom of page