Ruter
Creating a fast and smooth user experience for planning your public transport journeys in Oslo and surrounding areas.
Ruter manages the public transport system in the area surrounding Norway’s capital. Over a period of time, I was working on visual design and user experience on the ruter website, changing small elements and larger blocks based on user behaviour from Google Analytics and frequent user testing on real customers. In this project, we were working with one primary focus area at a time, one of which was to redesign the journey planner.
Seamless design
The new journey planner was a part of a bigger redesign of the Ruter website, focused on modernising the visual style as well as optimising the user journey from the start when you’re looking for information about travelling, through planning your journey and to having completed it. In this work, we looked at everything from the size of the input fields, to the flow between pages, hierarchy and illustrations.
One of the major changes we made was to create the journey planner without a CTA button – once you have entered your starting point and destination, the search will automatically execute and send you to the results page. If you want to adjust your results, that will also happen just as seamlessly.
Accessible for everyone
Ruter’s services is available for everyone who needs them. It is a requirement by law in Norway to create all websites according to accessibility standards, but accessibility is extra important for Ruter as their target audience is everyone visiting and living in and around Oslo.
Accessibility was a key point throughout this design process and something we had to keep in mind the whole time. When user testing the solution, we made sure to talk to a diverse group of users of different ages and genders, as well as frequent travellers and those only using public transport every once in a while.
Specific elements that we paid extra attention to were creating clear error messages and empty states, sufficient colour contrast between text and backgrounds, as well as adding micro-animations as visual feedback to the user after having completed an action.
Diving into the UX details
“What happens if you do a journey search right before midnight and the results are sorted in descending order based on arrival time?”, “How can you display four different platforms on the map while still making it clear they’re all a part of the same stop?” – these are just some of the many intricate questions we had to ask ourselves and find solutions to during this process. We had to make sure we designed for all the different scenarios and edge cases that might happen during a journey search, and check that it all made sende for the real users.