Business challenge
A trading team running on Bloomberg, WhatsApp, and manual spreadsheets
Maritime fuel trading is time-critical and margin-thin - a stale price isn't a UX flaw, it's a trading loss. When I joined Geoserve, the trading team ran their entire operation across Bloomberg, WhatsApp, and manual spreadsheets, with no single source of truth. Prices were stale by the time anyone referenced them, deal pipeline visibility didn't exist, and follow-ups got buried in email threads.
The opportunity: build one platform around how traders actually work - live commodity pricing, global port bunkering rates, active deal status, and a real-time port map, in one fast interface.
Constraints & roadblocks
Building for a domain with zero tolerance for slow or wrong
- Time-critical domain: a slow or stale interface directly costs a trader money - not a usability complaint, a revenue one.
- Three conflicting KPI sets: Senior Trader, Trader, and Sales needed fundamentally different performance signals from the same dashboard - no single view could serve all three without compromise.
- No system to extend: there was no existing product to inherit. Every token, component, and pattern had to be defined from scratch, in parallel with shipping the first module.
Discovery & research
Three user interviews, four design-defining insights
Before touching Figma, I ran structured interviews with the core users - a Senior Trader, a Trader, and a Sales lead. Each had a different workflow and different gaps in the existing system.
Four themes shaped the design direction:
Strategy
Two modules, one design system
Working with the CEO, I scoped the platform into two modules: the GeoStem trading dashboard (live pricing, port intelligence, deal pipeline) and a Voyage Optimisation Report system (weather routing, waypoint planning, delivered as a structured multi-page report). I built the design system in parallel with the first module - every component built for the dashboard became a reusable asset for voyage reporting.
Design process
From information hierarchy to shipped interface
Three-panel layout system
Ranked every data point by trader frequency and urgency. Live commodity price and active follow-ups topped the list. This became the layout architecture: left panel for market data and deal actions, centre for port pricing, right for trader updates and news. Each section independently scrollable - traders monitor all three contexts without switching views.
Live fuel price chart
A dedicated full-screen view with TradingView integration for commodity price history across Brent, Crude, and Natural Gas. Six stat cards (Open, High, Low, Prev Close, 52W High, 52W Low) with colour-coded deltas that read instantly without scanning labels.
Interactive global port map
Leaflet-based port map with a custom dark navy tile treatment. Clicking a port surfaces fuel grades (VLSFO, HSFO, LSMGO), weather conditions, top sellers, and nearby ports. Overlays panel for maritime context - ECA zones, piracy areas, storm routing, and base layer modes.
Built in Claude Code - shared with dev in 5 days
The entire UI was built in Claude Code as a fully interactive prototype - all screens, interaction states, data edge cases (empty states, loading, error, partial data), and responsive behaviour. Shared with the dev team in 5 days. Developers connected a backend to a production-ready interface instead of building UI from scratch - no UI rebuild, no guesswork on edge cases at launch.
Every screen was interactive before a single engineer touched the codebase - real data formats, real error states, real empty states. That's what made the 5-day handoff possible: there was nothing left to design once dev picked it up.
Screen 02 - Live Fuel Price
Reference screenshot recreated with AI tools - actual product details are under NDA. Happy to walk through the live product on a call.
Screen 03 - Port Map
Reference screenshot recreated with AI tools - actual product details are under NDA. Happy to walk through the live product on a call.
Outcomes
What shipped and what it changed
GeoStem replaced 4 fragmented tools with one fast interface. Deal pipeline visibility - previously non-existent - is now a single view traders check without switching tabs. And the design system built for the first module is already paying for itself: reused across voyage reporting, validation screens, and onboarding flows without a single redesign.
Learnings & growth
What this project taught me
- Interviewing three roles with genuinely different KPIs before opening Figma is what kept the three-panel layout from becoming a generic dashboard template.
- In a time-critical domain like trading, a workflow gap - like traders being locked out of entering price indications - is a business risk, not a UX nitpick. Treat it with the same urgency as a bug.
- Shipping a fully interactive prototype, not static mockups, is what actually collapses design-to-dev handoff time. The 5-day build was possible because every edge case was already resolved before engineering saw it.
Key highlights