Routescanner

Company

Port of Rotterdam

Time

2022 – Present

Role

Sole Designer

Monthly users

5,000 - 6,000

UI Design

User Journey Mapping

User Interviews

User Analysis

Brand Update

Product Design

Qualitative Interviews

Summary

Routescanner is a tool that helps you find the best route for your container shipment. Sort of like Google Maps, but for global container shipping! I am responsible for the product design and validating ideas for features with users.

Before After

UI Design

The Challenge

The original Routescanner interface had grown organically over time, resulting in an inconsistent visual hierarchy and interaction patterns that confused users. Mobile responsiveness was limited, and the search results page struggled to present complex shipping route data in a scannable format. Accessibility was also a concern, with insufficient color contrast and keyboard navigation issues.

What I Did

Prioritised information — Established a clear visual system with improved information hierarchy, typography, spacing, and component reusability.
Responsive design — Created responsive layouts that adapted seamlessly from mobile to desktop, working closely with the development team.
Progressive disclosure — Introduced progressive disclosure patterns to manage information density.
Accessibility — Ensured WCAG 2.1 AA compliance through careful color selection and interactive element design.

User Journey Mapping

The Challenge

New users were struggling to understand how to use Routescanner effectively, often abandoning the tool after their first visit. We needed to understand the complete user journey to identify friction points and opportunities for improvement.

What I Did

Journey mapping sessions — Initiated and facilitated collaborative user journey mapping sessions with the team.
Experience mapping — Mapped the entire experience from initial discovery through first successful route search.
Pain point identification — Identified critical pain points in the onboarding flow and proposed targeted solutions.
Onboarding improvements — Implemented contextual tooltips, an improved empty state, and a simplified first-run experience that reduced cognitive load for new users.

AI Prototyping for Complex Queries

The Challenge

The traditional search became cumbersome when users wanted to explore alternatives, compare different routing options, or analyze multiple scenarios at once. We needed a more flexible approach that could handle the nuanced, conversational nature of complex logistics planning.

What I Did

Discovery & prototyping — Initiated the discovery process and led prototyping efforts for an LLM integration that would help users conduct more sophisticated searches and comparisons.
Canvas-based approach — Implemented a canvas-based approach rather than extending the existing form interface, allowing for more natural exploration of routes and ports.
Dynamic adaptation — Designed a canvas interface that adapts dynamically based on user needs through conversational queries.
Complex comparisons — Created a prototype that demonstrates how AI can make complex logistics comparisons more accessible without overwhelming users with traditional form complexity.

Before After

Brand Update

The Challenge

Routescanner's brand felt dated and didn't effectively communicate the tool's value proposition to logistics professionals at enterprise companies. We needed to refresh the brand while maintaining recognition among existing users and aligning with Port of Rotterdam's corporate identity.

What I Did

Brand strategy — Led the brand update initiative, conducting competitive analysis and stakeholder interviews to define our visual direction.
Visual identity — Developed a refined color palette, updated typography system, and new iconography that balanced professionalism with approachability.
Brand extension — Extended the rebrand to marketing materials and product messaging, better articulating our value proposition to mid-market and enterprise logistics teams.
User continuity — Maintained brand continuity for existing users while refreshing the visual identity.

User Interview Insights

The Challenge

While we had quantitative data showing where users were struggling, we lacked deep qualitative insights into why certain interaction patterns weren't working. Feature adoption rates were lower than expected, and we needed to understand the mental models and workflows of logistics professionals to design more intuitive solutions.

What I Did

User interviews — Designed and conducted a series of semi-structured user interviews with 12 logistics coordinators and freight forwarders representing our core user segments.
Insight discovery — Uncovered critical insights about how route comparison decisions are actually made in practice, which differed significantly from our assumptions.
Interface redesign — Informed the redesign of our route comparison interface and filtering system based on user insights.
Impact — Resulted in a 40% increase in feature engagement.

Quantitative Analysis with PostHog

The Challenge

We were making product decisions based on limited data and anecdotal feedback. Without robust analytics, we couldn't measure the impact of our design changes, prioritize feature development effectively, or identify usage patterns that indicated opportunities for optimization. We needed a comprehensive analytics solution that would give us visibility into user behavior across the entire product.

What I Did

Analytics setup — Established PostHog dashboards to track critical metrics including search success rates, feature adoption, and user retention cohorts, working closely with our data scientist.
Funnel analysis — Analyzed funnel drop-offs and session recordings to identify several quick wins that improved conversion rates.
Data-driven approach — Combined quantitative data from PostHog with qualitative user research to develop a data-driven approach that now informs our product roadmap.
A/B testing — Enabled validation of design hypotheses through A/B testing before full rollout.