2025 - Aug
Mobile
Responsive Web
Case Study
Overview
Ocean Hub is a B2B maritime platform designed to connect shipping-related companies with each other and with ship owners through a single, structured digital environment. The platform addresses one of the industry’s key challenges: fragmented communication across ports, suppliers, and service providers.
At the center of the product is the One-Click Planner, a feature that streamlines voyage planning and supplier coordination. By defining a route from one port to another, the system automatically connects relevant companies — including food suppliers, fuel providers, and equipment vendors — with ship owners who need their services.
The goal of the project was to create a centralized, transparent, and efficient communication ecosystem for the maritime industry.
Role & Approach
I worked on Ocean Hub as a product designer, shaping the experience from structure to high-fidelity UI:
Industry Analysis: Understanding how maritime companies and ship owners communicate and collaborate
UX Strategy: Designing flows that support multi-party interaction and decision-making
Information Architecture: Organizing routes, ports, and company data into clear, logical structures
UI Design: Creating a professional, enterprise-level interface suitable for B2B users
Responsive Design: Ensuring usability across screens commonly used in operational environments
The approach focused on clarity, trust, and efficiency, essential for professional maritime communication.
One-Click Planner — Core Feature
The One-Click Planner acts as a bridge between companies and ship owners.
Users define a journey by selecting a starting port and a destination. Based on this route, the system:
Identifies ports along the voyage
Connects relevant companies operating in those ports
Creates a structured list of service providers offering food, fuel, ship tools, and other maritime services
This enables companies to present their services efficiently, while ship owners receive relevant, route-based offers without manual outreach.
Communication & Collaboration
Ocean Hub is built to support two-way communication:
Companies can showcase their services, respond to voyage-based requests, and connect with potential clients
Ship owners can review suppliers, compare options, and communicate directly within the platform
This reduces dependency on fragmented emails, calls, and spreadsheets, replacing them with a centralized digital workflow.
Key Features
Route-Based Matching
Suppliers are matched to voyages automatically, increasing relevance and reducing noise.
Company Discovery
Maritime businesses can explore and connect with other companies across ports and regions.
Transparent Selection
Ship owners choose suppliers based on preferences, offerings, and operational needs.
Centralized Communication
All coordination happens within one platform, improving efficiency and traceability.
Responsive Web Experience
Optimized for desktop and tablet use in professional environments.
High-Fidelity Wireframes
High-fidelity wireframes simulate real operational use cases involving multiple stakeholders. Screens were designed to manage dense information while remaining scannable and intuitive.
Special focus was placed on tables, filters, and summaries that support quick evaluation and communication between companies and ship owners. These wireframes provided a solid foundation for validation and development.
Primary Color Palette
#132D99 — Core structural color for navigation and key UI elements
#0040FF — Action-oriented accent for interactions and highlights
#527DFF — Supporting tone for informational states and emphasis
The palette conveys reliability, precision, and technological confidence.
Secondary Color Palette
#FFFFFF — Background surfaces and content containers
#6D6D6D — Secondary text and supportive information
#000000 — High-contrast text and critical UI elements
Neutral colors ensure clarity while keeping focus on communication and data.
Typography
FiraGo was selected for its clarity and modern technical tone, making it ideal for data-heavy B2B interfaces.
Font sizes used:
14 / 18 / 22 / 24 / 32 / 44 / 50
Font weights used:
Light, Regular, Medium, SemiBold
This range establishes strong hierarchy across dashboards, lists, and action elements.
IBM Plex Sans supports system text and secondary content with a neutral, professional character.
Font sizes used:
14 / 22
Font weights used:
Light, Regular
Together, the typefaces create a consistent, enterprise-grade typographic system.
Outcome
Ocean Hub transforms how maritime companies and ship owners interact by replacing fragmented communication with a centralized, route-driven platform. The One-Click Planner simplifies coordination, increases transparency, and enables faster, more informed decision-making across the maritime ecosystem.
The result is a scalable B2B solution built for connection, efficiency, and operational clarity.
