← All work

Case study · UI Design · Travel

Designing a map-led road-trip planner.

My first UI project: a desktop planner that helped travel agents build UK road trips, with maps I cut down from raw OpenStreetMap data and restyled by hand.

The screens use placeholder content.

ProjectThe Explorer's Road, UK road-trip brand
EngagementFreelance, through DFD Solutions
RoleUX/UI Designer
PlatformDesktop web app for travel agents
PeriodAug 2020 to Apr 2021
01 · The challenge

Plan a UK road trip for people who barely know the UK.

Agents built itineraries for customers who often knew little about the UK. The map was how they understood the route.

London
1
2
3
4
5
6
7
Edinburgh
Seven map sectionsAlong the A1, London to Newcastle
LaterEdinburgh joins the offering
PlanningPick counties, places to stay and attractions for customers who barely know the UK.
InformationHotels and tickets come from outside providers, live.
MappingThe map is how agents understand where things are.
02 · Simplify, then style

Strip the map before you style it.

The OpenStreetMap exports had far more layers than the planner needed. I removed them in Illustrator, then restyled what was left to the brand.

Raw export, many layers (illustration)
The styled map in the planner
1 · ExportOpenStreetMap sections as DWG files
2 · StripRemove every layer the map does not need
3 · RestyleApply the brand guidelines to all seven maps
03 · Data first

Design around the provider data.

Hotels and tickets loaded live from outside providers. I read the JSON with the developers, so I knew the data before I decided how to show it.

Hotel aggregatorTicket reseller
Field names are illustrative. The card is one of the real screens.
04 · Version one

Useful with static maps.

The plan was an interactive map. Version one used static images, so the list, the step bar and the saved trips carried the choices.

Static map artworkSelectable section listSaved 3, 5 and 7 day trips
05 · Beyond the platform

One visual language, outside the planner too.

Marketing videoPuts the brand in front of agents and customers.
Attraction ticketsCustom tickets in the same visual language.
Walkthrough videosShow agents how the planner works.
06 · What I learned

Two lessons I take to any product.

Check the data first.

Live provider data taught me to read APIs and JSON. Since then I check what data exists before I design how to show it.

Where I found the discipline.

My first UI project, my first agile team, and my first time working with developers overseas.