Transforming Voyage Estimation into a High-Impact Daily Workflow Tool

OpenOcean STUDIO – A next-generation maritime platform designed to provide real-time actionable insights with a unified commercial and operational view. Trusted by ship owners, operators, and managers, it aims to streamline maritime operations with accurate voyage estimations and data-driven decision-making.

The existing Voyage Estimator tool lacked visibility and usability. It was outdated, with minimal adoption, and was a major reason for potential clients choosing competitor software that offered more modern, user-friendly estimation tools.

Client

Ninety Percent of Everything (90POE)

Areas

Maritime

Enterprise UX

Accessibility

Services Provided

Product Design, UX Research, Stakeholder Management, UX Strategy, Design Systems

Tools used

Figma, Jira, Heap Analytics, Miro

voyage estimator image
voyage estimator image

Summary

90POE aimed to build a comprehensive commercial management platform for maritime operations, and an improved Estimator tool was essential to achieving this goal. Without an effective estimator, the platform remained incomplete, and users resorted to third-party tools to fulfill their needs.

Challenge
  • Users faced complex workflows

  • Excessive data input requirements

  • Inefficient navigation

  • Missing key features, making voyage estimation cumbersome and ineffective.

Challenge
  • Users faced complex workflows

  • Excessive data input requirements

  • Inefficient navigation

  • Missing key features, making voyage estimation cumbersome and ineffective.

Challenge
  • Users faced complex workflows

  • Excessive data input requirements

  • Inefficient navigation

  • Missing key features, making voyage estimation cumbersome and ineffective.

Role & Team
  • Collaboration: 12 months with a team of 6 Developers, 1 Head of Product, 2 Product Managers

  • My role: Product Design and Discovery, Product Vision and Strategy, UX/UI

Role & Team
  • Collaboration: 12 months with a team of 6 Developers, 1 Head of Product, 2 Product Managers

  • My role: Product Design and Discovery, Product Vision and Strategy, UX/UI

Role & Team
  • Collaboration: 12 months with a team of 6 Developers, 1 Head of Product, 2 Product Managers

  • My role: Product Design and Discovery, Product Vision and Strategy, UX/UI

Results
  • 400% increase in adoption after the UX overhaul

  • 200% Growth in page views, indicating higher engagement

Results
  • 400% increase in adoption after the UX overhaul

  • 200% Growth in page views, indicating higher engagement

Results
  • 400% increase in adoption after the UX overhaul

  • 200% Growth in page views, indicating higher engagement

Research methods conducted

To inform design decisions with clarity and confidence, I employed a mixed-methods research approach. This included qualitative insights through direct user interviews, quantitative data from product analytics (Heap), and strategic market context via competitive benchmarking. Each method surfaced distinct patterns, helping prioritize user pain points, align with business goals, and identify opportunities for differentiation.

User Interviews

Understanding user frustrations and needs.

User Interviews

Understanding user frustrations and needs.

User Interviews

Understanding user frustrations and needs.

Analytics via Heap

Identifying pain points through behavioral data.

Analytics via Heap

Identifying pain points through behavioral data.

Analytics via Heap

Identifying pain points through behavioral data.

Competitive Benchmarking

Evaluating leading competitors’ estimation tools.

Competitive Benchmarking

Evaluating leading competitors’ estimation tools.

Competitive Benchmarking

Evaluating leading competitors’ estimation tools.

Key findings & Pain points

Through user research and data analysis, we surfaced both functional gaps and usability barriers affecting overall efficiency. Key findings revealed broken workflows, scattered interfaces, and unmet feature expectations. On the critical side, users struggled with dense navigation structures, overwhelming data presentation, and input processes that introduced avoidable friction. These insights directly shaped design priorities and informed system-level decisions.

💡 Key findings

Data Accuracy Issues

Users needed to manually adjust data significantly before it was actionable.

Data Accuracy Issues

Users needed to manually adjust data significantly before it was actionable.

Missing Functionality

Users frequently left the platform to use third-party tools, leading to workflow inefficiencies.

Missing Functionality

Users frequently left the platform to use third-party tools, leading to workflow inefficiencies.

Overwhelming Interface & Navigation Challenges

Information was scattered, causing cognitive overload and inefficient workflows.

Overwhelming Interface & Navigation Challenges

Information was scattered, causing cognitive overload and inefficient workflows.

🚨 Critical Pain Points Identified

Complex Navigation

Users struggled to find key functions quickly

Complex Navigation

Users struggled to find key functions quickly

Data Overload

Users felt overwhelmed by unnecessary metrics

Data Overload

Users felt overwhelmed by unnecessary metrics

Inefficient Input Process

Long forms caused errors & friction

Inefficient Input Process

Long forms caused errors & friction

Insights & Project alignement

User segmentation and behavioral insights directly informed our design strategy. Operators were divided based on contract and vessel type, revealing distinct workflows and data priorities. These findings enabled targeted UI customization, where the interface adapted dynamically to each persona’s operational needs. Mapping value against process complexity helped align design impact with business goals—ensuring that high-value, high-friction tasks were prioritized in both functionality and UX clarit

Operators were divided into
  1. Voyage Charter & Time Charter users, depending on contract type.

  2. Vessel-Specific Operators (e.g., tankers, wet cargo, etc.), each requiring different key data points.

Customization

UI adapted dynamically based on the persona’s contract type and vessel responsibility.

Wireframing & Information Architecture

We began with low-fidelity wireframes to map missing functionalities, clarify user flows, and test navigation logic early. Collaboration with PMs and the Head of Product ensured alignment on business goals and system constraints. The focus was on surfacing critical voyage KPIs in context, demonstrating how operational changes directly influence business outcomes. The resulting IA simplified complex workflows while maintaining scalability across contract types and vessel responsibilities.

1. Initial Wireframes

Drafted to map out missing functionalities and refine navigation.

2. Collaboration with PMs & Head of Product

Defined business objectives and scalable solutions.

3. Goal

Present essential KPIs in an intuitive way, demonstrating how changes in voyage execution impact key business metrics.

Key UX Decisions & Solutions

Following wireframe testing and synthesis of user insights, we translated findings into concrete UX decisions. Each solution directly addressed usability challenges uncovered during research, balancing simplicity, visibility, and interaction flow. These changes were instrumental in driving clarity, efficiency, and user trust across the platform.

1

Collapsible Sidebar for Advanced tools

Allowed users to refine voyage details and view additional metrics without cluttering the main interface.

2

Essential KPIs on the Main Screen

Displayed only the most relevant KPIs needed for quick decision-making, while additional detailed information was accessible in an expandable right-side toolbar. This ensured users could focus on key insights without being overwhelmed by data overload.

3

Step-by-Step Input Forms

Replaced large input lists with guided, actionable steps to reduce cognitive load and improve accuracy.

Final mockups

1. Estimate creation flow

1. Streamlined Categorization

Information was grouped into logical sections, ensuring all essential details were accessible without excessive scrolling. Users could now complete an estimate in a structured, intuitive flow.

2. Flexible Input Approach

Advanced and optional fields were moved to a secondary scroll, allowing users to focus on core details first and refine their inputs later as they gained more clarity on the execution plan.

3. Real-Time Route Visualization

A dynamic map visualization was introduced, automatically generating the vessel’s route based on the entered ports. This provided immediate feedback on the estimated voyage path, enhancing decision-making.

1. Estimate creation flow

1. Streamlined Categorization

Information was grouped into logical sections, ensuring all essential details were accessible without excessive scrolling. Users could now complete an estimate in a structured, intuitive flow.

2. Flexible Input Approach

Advanced and optional fields were moved to a secondary scroll, allowing users to focus on core details first and refine their inputs later as they gained more clarity on the execution plan.

3. Real-Time Route Visualization

A dynamic map visualization was introduced, automatically generating the vessel’s route based on the entered ports. This provided immediate feedback on the estimated voyage path, enhancing decision-making.

1. Estimate creation flow

1. Streamlined Categorization

Information was grouped into logical sections, ensuring all essential details were accessible without excessive scrolling. Users could now complete an estimate in a structured, intuitive flow.

2. Flexible Input Approach

Advanced and optional fields were moved to a secondary scroll, allowing users to focus on core details first and refine their inputs later as they gained more clarity on the execution plan.

3. Real-Time Route Visualization

A dynamic map visualization was introduced, automatically generating the vessel’s route based on the entered ports. This provided immediate feedback on the estimated voyage path, enhancing decision-making.

2. Estimate main screen

1. Collapsible Estimate List

Instead of a table view, estimates are housed in a left-side navigation panel, enabling users to quickly switch between estimates for faster comparisons and decision-making.

2. Key KPIs Always Visible

Essential KPIs remain in the header, ensuring users can instantly track how adjustments impact decision-making and comparisons.

3. Unsaved Changes Functionality

Users can fine-tune estimates or experiment freely without autosaving. This allows drafts to be shared internally before committing changes. If unsatisfied, they can discard edits and revert to the last saved version.

2. Estimate main screen

1. Collapsible Estimate List

Instead of a table view, estimates are housed in a left-side navigation panel, enabling users to quickly switch between estimates for faster comparisons and decision-making.

2. Key KPIs Always Visible

Essential KPIs remain in the header, ensuring users can instantly track how adjustments impact decision-making and comparisons.

3. Unsaved Changes Functionality

Users can fine-tune estimates or experiment freely without autosaving. This allows drafts to be shared internally before committing changes. If unsatisfied, they can discard edits and revert to the last saved version.

2. Estimate main screen

1. Collapsible Estimate List

Instead of a table view, estimates are housed in a left-side navigation panel, enabling users to quickly switch between estimates for faster comparisons and decision-making.

2. Key KPIs Always Visible

Essential KPIs remain in the header, ensuring users can instantly track how adjustments impact decision-making and comparisons.

3. Unsaved Changes Functionality

Users can fine-tune estimates or experiment freely without autosaving. This allows drafts to be shared internally before committing changes. If unsatisfied, they can discard edits and revert to the last saved version.

3. Right sidebar tools

Advanced Tools Panel

A right-side expandable toolbar provides optional refinement tools for fine-tuning estimates without losing context. Users can adjust parameters and see real-time impact side by side. The toolbar is customizable based on vessel type, charter type, and fleet, ensuring adaptability to different user needs and workflows.

3. Right sidebar tools

Advanced Tools Panel

A right-side expandable toolbar provides optional refinement tools for fine-tuning estimates without losing context. Users can adjust parameters and see real-time impact side by side. The toolbar is customizable based on vessel type, charter type, and fleet, ensuring adaptability to different user needs and workflows.

3. Right sidebar tools

Advanced Tools Panel

A right-side expandable toolbar provides optional refinement tools for fine-tuning estimates without losing context. Users can adjust parameters and see real-time impact side by side. The toolbar is customizable based on vessel type, charter type, and fleet, ensuring adaptability to different user needs and workflows.

4. Side by side comparisson

Comparison Mode

Users can create duplicate estimates to test different scenarios on the same route. With unsaved changes functionality, they can modify an estimate, take snapshots at key stages, and compare them side by side to determine the best outcome based on metrics.

4. Side by side comparisson

Comparison Mode

Users can create duplicate estimates to test different scenarios on the same route. With unsaved changes functionality, they can modify an estimate, take snapshots at key stages, and compare them side by side to determine the best outcome based on metrics.

4. Side by side comparisson

Comparison Mode

Users can create duplicate estimates to test different scenarios on the same route. With unsaved changes functionality, they can modify an estimate, take snapshots at key stages, and compare them side by side to determine the best outcome based on metrics.

Outcomes & Metrics

The redesign was met with strong adoption and positive user feedback, reinforcing the platform’s value and positioning it as a unified maritime solution. Stakeholder input highlighted improved visibility, usability, and decision-making confidence.

1

400%

increase in adoption after the UX overhaul.

2

200%

Growth in page views, indicating higher engagement.

3

Less use of 3rd party tools

Users relied less on third-party tools, reinforcing 90POE as an all-in-one maritime platform.

“ We found that the dynamic Voyage Estimator capability, which we’ve very much constructed with 90POE, allows us the visibility to assess which options we’re going to trade into—not only on a vessel basis but very much on a book basis. We can see all the different ships within the different classes and assess what we consider to be the best option and the best decision. ”

– Angus Douglas, Director of Chartering, Zodiac Maritime

Thanks for reading! Reach out if you want to chat👋

Case Studies

voyage estimator image

Transforming Voyage Estimation into a High-Impact Daily Workflow Tool

Redesigned the core voyage estimation experience, driving 400% growth in adoption, 200% more engagement, and full WCAG 2.1 AA compliance.

Ninety Percent of Everything (90POE)

Maritime

Enterprise UX

Accessibility

voyage estimator image

Transforming Voyage Estimation into a High-Impact Daily Workflow Tool

Redesigned the core voyage estimation experience, driving 400% growth in adoption, 200% more engagement, and full WCAG 2.1 AA compliance.

Ninety Percent of Everything (90POE)

Maritime

Enterprise UX

Accessibility

voyage estimator image

Transforming Voyage Estimation into a High-Impact Daily Workflow Tool

Redesigned the core voyage estimation experience, driving 400% growth in adoption, 200% more engagement, and full WCAG 2.1 AA compliance.

Ninety Percent of Everything (90POE)

Maritime

Enterprise UX

Accessibility

thumbnail Image

Redesigning Candidate Management into a Fast, Unified Workflow

Drove 3x faster uploads, 30% quicker workflows, and high beta user satisfaction across 600+ surveys.

Workable

HR Tech

SaaS

Workflow Optimization

thumbnail Image

Redesigning Candidate Management into a Fast, Unified Workflow

Drove 3x faster uploads, 30% quicker workflows, and high beta user satisfaction across 600+ surveys.

Workable

HR Tech

SaaS

Workflow Optimization

thumbnail Image

Redesigning Candidate Management into a Fast, Unified Workflow

Drove 3x faster uploads, 30% quicker workflows, and high beta user satisfaction across 600+ surveys.

Workable

HR Tech

SaaS

Workflow Optimization

thumbnail Image

Boosting Hertz's online sales by redesigning Booking Engines

Redesigned Hertz's web & mobile websites, driving 347% more time spent per visit and a 38% drop in mobile bounce rates.

Hertz Autohellas

Travel tech

E-commerce UX

Conversion Design

thumbnail Image

Boosting Hertz's online sales by redesigning Booking Engines

Redesigned Hertz's web & mobile websites, driving 347% more time spent per visit and a 38% drop in mobile bounce rates.

Hertz Autohellas

Travel tech

E-commerce UX

Conversion Design

thumbnail Image

Boosting Hertz's online sales by redesigning Booking Engines

Redesigned Hertz's web & mobile websites, driving 347% more time spent per visit and a 38% drop in mobile bounce rates.

Hertz Autohellas

Travel tech

E-commerce UX

Conversion Design

© 2025 Raphael Diftopoulos. All Rights Reserved.

Last updated on July 1, 2025

© 2025 Raphael Diftopoulos. All Rights Reserved.

Last updated on July 1, 2025

© 2025 Raphael Diftopoulos. All Rights Reserved.

Last updated on July 1, 2025