UI design & design system—


Making it easier to book long distance bus journeys with a step-by-step journey planner and booking process based on a design system.

Nettbuss is the largest bus company in Norway, and the second largest across all of Scandinavia. They want to make it more lucrative to choose travelling by bus rather than by plane – offering destinations all over Scandinavia at reasonable prices and extra comfort levels.

Design system

We approached this project by building up a design system while working on the visual design and flow of the journey planner. Each and every element for the journey planner were designed and developed, and then put together into larger blocks, which were in turn used to build up page templates. This process was based on the principles around atomic design.

Nettbuss’ visual style guide was primarily created for print and didn’t contain any information about design for digital devices. This required some work to be done on how to bring the branding and the style of the printed materials into a digital world. This included tweaking the primary colour to more accurately reflect how it look like on the buses, as well as choosing a typeface and new icons for digital use.

Journey planner

I collaborated with another designer on the journey planner and we were able to split the UX and UI design between us. I was in charge of the visual design while he focused on the flow, but we used each other for feedback and discussions along the way. We created a journey booking process where each step had one focused task to be completed at a time. This way, the user won’t be overloaded with lots of different decisions all at once, which will in turn lower the threshold to complete the booking process.

Destination pages

We also worked on creating destination pages which were supposed to help introduce you to using bus as a means of long-distance travelling. This was particularly done with consideration for visitors entering the website through Google, where they wanted bus journeys to be displayed as a relevant option.