Norwegian Public Roads Administration

The Trafikk app communicates critical road and traffic information, where an unclear label or a low-contrast detail can make a journey less safe. Inconsistent components and fragmented patterns made the service harder to read and learn.

Night-time use was also common, but there was no dark mode. The goal was a visual refresh rooted in Norwegian simplicity, on a scalable and accessible foundation that works in any light.

I started by analysing the current experience screen by screen, then benchmarked it against local services (Nav, Ruter, Oslo kommune, Vipps, Yr, VY), transport apps (Google Maps, Uber, SAS, Waze) and products from other industries (Airbnb, Duolingo, Spotify, Revolut).

Each review ended in key takeaways and tags such as clear information, type hierarchy and brand expression, which gave the team a shared vocabulary for what the new experience needed.

I worked with other designers and stakeholders in a collaborative workshop to explore ideas and align on goals. Using brand values and user feedback as guiding principles, I refined concepts through iterative reviews until we could lock a direction that balanced Statens Vegvesen’s identity with people’s need for clarity and accessibility.

I created several UI directions for the Trafikk app, from early concepts to refined screens, and tested them with different user groups to check readability and inclusivity. Feedback from each round shaped the next, until one direction clearly stood out.

I redefined the core elements, including colour, typography, spacing and design tokens, to match the new direction, creating a cohesive, mobile-first design system.

Variables made the system adaptable in code, and semantic tokens made dark mode part of the foundation rather than a separate layer. Every component was built to be reused and to adapt between themes, so teams can apply them consistently.

I redesigned each component around how people perceive and interact with information, establishing a clear hierarchy, making interactions intuitive and keeping things simple to reduce cognitive load. Data visualisations for road and traffic information were redesigned to be clearer at a glance.

Dark mode was integrated at component level to support comfortable use in low light, so the experience stays consistent and familiar in any conditions.

I worked with the tech team to get the components developed in a React Strict DOM setup, so the library stays flexible and maintainable.

Road status also had to read clearly on the map. Striped lines mark stretches with a status, such as closures, roadworks and risk of closure, while solid lines mark stretches without one, such as national tourist roads and private roads. Routes, blocked routes and ferry routes each have their own style, in both light and dark.

Map markers follow the same logic. Each one pairs a familiar road-sign icon with a label coloured by status, so closures, roadworks, mountain passes, ferries, height and length limits, rest areas and charging stations can be told apart at a glance, on both light and dark maps.

A design system that makes traffic information clear, accessible and consistent across platforms, with dark mode for night-time driving and a scalable foundation for future updates. It also set a benchmark within Statens Vegvesen, inspiring other teams to adopt similar standards.