Market & Context
Voyage Control had earned its place as a critical logistics platform across construction, ports, venues, and events. But while its back-end power grew—integrating with APIs, managing crane time, syncing with Procore and Navis—the front-end stayed still. The industry was evolving. Clients were demanding interfaces that matched the sophistication of the systems underneath. And with competitors pushing sleeker UIs and enterprise buyers expecting clarity and polish out of the box, the platform’s aging experience was becoming a liability. For a product that prided itself on real-time precision and operational orchestration, the UX had to keep pace—or risk falling behind the momentum it had helped create.
Brand & Product Limitations
The UI felt stuck in a different era—dense, outdated, and cluttered with competing elements that made even basic tasks feel harder than they should. Users were forced to hunt for key features buried under legacy patterns, and once they found them, the workflows were often unclear or inefficient. On mobile, the experience broke down entirely: screens weren’t responsive, inputs felt clunky, and essential controls were hard to reach or interpret. For a brand trusted by global infrastructure players and Fortune 500 contractors, the visual design simply didn’t carry the same weight. The product worked—but it didn’t feel like the leader it had become.
Strategic & Technical Barriers
Under the hood, Voyage Control was burdened by legacy architecture—an aging Angular codebase, riddled with hardcoded UI and brittle components that made change expensive and slow. There was no formal design system, which meant patterns were inconsistent across products, and every screen felt like it had been designed in isolation. Worse, the platform hadn’t been built with cross-industry flexibility in mind. What worked for a port terminal often failed on a construction site—or collapsed entirely in an event venue. Scalability suffered, responsiveness was unpredictable, and component reuse was minimal. The result? A system that was powerful in theory, but inflexible in practice.
Human & Organizational Challenges
Internally, the team was stretched thin. There was limited design expertise in-house and a growing pile of frontend work no one had time—or clarity—to fully own. Priorities shifted often, driven by the needs of large enterprise clients with custom requests. This created a kind of feature sprawl: bespoke functionality built for one site or sector that made the overall product harder to maintain, navigate, or evolve. Without a strong design system or product strategy, the app had become a patchwork of good intentions and tactical fixes. And with internal bandwidth maxed out, there was little time to step back and rethink the foundation.
Discovery & Strategy
We kicked off with a deep dive into the core friction points—running UX audits, dissecting analytics, and mapping the user flows that were dragging people down. Through discovery sprints and structured workshops, we surfaced pain points from every angle: subcontractors on mobile, port dispatchers under pressure, venue coordinators juggling move-in chaos. We quickly saw the bigger picture—this wasn’t just a design problem, it was a coherence problem. Too many industries, too many one-off paths. So we segmented by vertical, clarified use cases, and defined what “great” needed to look like across the board. The outcome? A clear strategy that unified the experience without flattening it.
Concept Development
Rather than designing three different apps for three different industries, we developed a unified system built on modular, flexible components. We restructured the information architecture from the ground up—simplifying navigation, streamlining workflows, and aligning feature sets across verticals. A new design system became the backbone: scalable, legible, and purpose-built to adapt across construction sites, port terminals, and global event venues. We introduced patterns that prioritized action over configuration—guiding users through complex logistics tasks with intuitive flows and visual clarity. The goal wasn’t just usability. It was adaptability at scale.
Design Execution
We rebuilt the interface using a component-first philosophy in Figma, grounded in a clear visual grammar: atomic components, tokenized styles, and a responsive grid system that adapts from jobsite tablets to office desktops. The UI is calm and unintrusive, with light, desaturated backgrounds that make space for complexity without overwhelming the user. We used contrast with intent—deep greens for primary actions, crisp labels for clarity, and layout logic that guides the eye in predictable, intuitive flows.
The booking flow was redesigned to feel like a linear track, not a maze. Breadcrumb-style progress indicators keep users oriented, while form fields are grouped and spaced with precision to minimize friction. Visual hierarchy is subtle but effective—icons support, never distract; typography carries meaning through weight and spacing, not color alone. We created dedicated components for key vertical-specific needs: hoist scheduling, gate assignments, site contacts—each adaptable by role and location, but always consistent at the system level.
Accessibility was foundational. Every component passes contrast standards, every control is easily reachable on mobile, and every piece of feedback is contextual and inline. What used to feel like a stitched-together back office tool now feels like a single, thoughtful system—built for speed, clarity, and scale.
Build & Integration
While we didn’t write any code, precision in our design handoff made the build phase seamless. Every component was documented, tokenized, and mapped to a scalable React system that would eventually replace their aging Angular frontend. We worked in tight loops with Voyage Control’s engineering team, delivering annotated Figma files backed by dev-ready specs and implementation notes. Design tokens handled spacing, color, and typography across the system, ensuring consistency at scale. We also built a flexible component library that served as the foundation for a full design system handoff, complete with usage guidelines and edge-case behaviors.
This wasn’t just a Figma export. It was a blueprint for long-term evolution. The new React frontend wasn’t a lift-and-shift—it was a refactor grounded in system thinking, where each element had a purpose, a state, and a context. The result? A front-end stack that finally matched the complexity and sophistication of the platform’s back end.
Collaboration & Workflow
The entire engagement ran async—by design. With teams spread across London, Toronto, and Los Angeles, we built a rhythm around clarity, not proximity. Weekly check-ins created space for big-picture alignment, while everything else lived inside Figma: component documentation, flows, edge-case handling, and feedback. We treated comments like code reviews—thoughtful, specific, and always tied to the system’s goals. No meetings for the sake of meetings, no throw-it-over-the-wall handoffs. Just structured collaboration across time zones and disciplines.
Design worked the way logistics should: tight loops, clear roles, no confusion.
The redesign didn’t just modernize the look and feel—it brought structure to complexity. Voyage Control’s users now move through the platform with clarity and confidence, no matter their industry or location. Internally, the product team has a scalable system to build from, grounded in consistent components and clear design logic. What was once fragmented is now coherent.
Since launch, the platform has continued evolving across React, using the system we designed as its foundation. The design isn’t just holding up—it’s unlocking velocity. Teams aren’t debating layouts or reinventing patterns. They’re shipping.
At Metamodern, we don’t just rethink product UI—we engineer clarity at scale. If your logistics feel broken, disjointed, or held together by duct tape—we build the system that makes it all click.
From tangled UX to frictionless flow—this is why they called us
More projects.
(2010-2025)
