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.
Client
Kraken
Role
Interaction Designer
Team
Product Owner
Development Manager
Visual Designer
Front-end engineer
Duration
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.
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.
01
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.
02
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.
03
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.
04
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.
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.
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.
QUICK SWITCHING BETWEEN COUNTER PARTIES
Support time-sensitive and fast-paced negotiation. Facilitate simultaneous negotiation with several parties
UNIFIED COMMUNICATION & DOCUMENT SHARING
A unified interface for conversations and sharing of documents from the repository when adding vessels/positions.
TIMELINE OF NEGOTIATION FOR AUDIT PURPOSE
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.
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.
Learnings
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.