Icelandia
Redesign of the City Sightseeing buses in Reykjavik, so tourists can find their way around the city more easily.
About the project
Through TRY Dig, I redesigned the interface for the tourist buses in Iceland. We added real-time tracking, built a design system for more consistent design and easier handover, and cleaned up the visual hierarchy.
The problem
The old solution had two big problems. Buses, stops and routes were all the same red, so they were hard to tell apart on the map.
On top of that, the wait time was based on the timetable, not on where the bus actually was. If the bus was scheduled for 14:15, it said “9 minutes” at 14:06, no matter where the bus was. That caused a lot of frustration.
Insight
We started by looking at the use of colour and what users complained about. The feedback was clear: the red colour scheme made it hard to tell buses from stops.
Design system
The design system was meant to provide a clear hierarchy and reusable components.
- Buttons and links: three sizes and three variants (primary, secondary and outline), with an optional icon. Links come standalone and inline, with matching hover and focus states.
- Map: separate states for each zoom level, so buses, stops and routes stay readable however close you zoom.
- Alerts: error (for example a closed stop), warning (for example slippery roads) and info (for example accessibility). They can apply to the whole service or a single stop.
- Icons: new icons for bus and stop, easy to tell apart on every screen size. That was the main problem in the old solution.
Real time
The biggest change was moving from fixed departure times to real time. Instead of counting down to a scheduled departure, the map now shows where the bus is relative to the stop you picked.
We had to think carefully about how to show time when traffic and delays come into play. That is why the alerts in the design system exist: they report delays and larger incidents.
Result
- Clear distinction between buses, stops and routes
- Accurate arrival times in real time
- Consistent experience on mobile and desktop
- A design system that can be built on
Technical
The design system is built in Figma, with components for both mobile and desktop. The developers received documentation with component specs and all states.
Learnings
A few clear moves can change a lot. When buses and stops got their own colours and times were based on real time, the service became both easier to use and more trustworthy.
The redesign is live now. See the live map.