MA
All workCase study 08 of 11

Planning a train trip in Croatia, redesigned: type a town, see every connection, its changes and the route on a map.

Client
Unofficial concept, not affiliated with HŽPP
Role
UX concept + frontend
Year
2026
Stack
Next.js, React, TypeScript, SVG

Rijeka to Osijek: two changes, the route on the network map.

Overview

A concept redesign of how you plan a train journey in Croatia. It is not affiliated with HŽPP and the timetable is illustrative, but the problems it answers are real: station names you have to spell exactly, results that hide the changes, and no picture of where the train actually goes.

01

The problem

A rail planner is used on a phone, often at the station, often in a hurry. The answer has to be readable at a glance: when do I leave, when do I arrive, do I change trains, and how long do I have to make the connection.

02

The approach

Search is instant, with no Search button, and forgiving: typing cakovec finds Čakovec. Every result has a to-scale strip of its legs, so a long wait in Knin is visible before you open it, and tight changes are flagged. The network map draws the chosen route, and tapping any station plans from or to it. Journeys are computed in the browser with the Connection Scan Algorithm over the whole day's timetable. The page works in Croatian and English, and the URL keeps the search so it can be shared.

0Stations
0Trains a weekday
0Languages
NoneSearch button
What I did
  • Phone-first UX for results you can read at a glance
  • Journey planning with the Connection Scan Algorithm, including changes
  • Accessible station combobox with diacritic-insensitive search
  • Schematic network map with route highlighting
  • Croatian and English, shareable URLs, calendar export
What shipped
  • Instant search with swap, a seven-day date strip and departure time
  • Sort by earliest, fastest, fewest changes or cheapest; direct only
  • To-scale leg strip and tight-connection warnings
  • Stop-by-stop detail with platforms
  • Planned works notice on the days they apply
  • Add to calendar and copy link
Outcome

The whole question answered on one screen: when, how long, how many changes, and where.

Next.jsReactTypeScriptSVG
Next case studyHKPTThe national register of psychotherapists, rebuilt so finding a licensed therapist is the first thing you can do.