HSL.fi

Helsinki Region Transport is the organization in charge of public transport in the Greater Helsinki area. In 2019, over 390 million trips were made using HSL’s services.

Visit HSL website

Screenshot of the HSL.fi homepage

Background

HSL wanted to refresh HSL.fi, a website that serves over 1.7 million customers in the Greater Helsinki Area.

HSL had made a strategic choice to bring all of their offering (main site, journey planner, online card top-up, and city bikes) under one website. Previously, different teams had developed their services independently, which made it harder to utilize synergies between services and ultimately made it difficult for customers to find the relevant information to them.

My role

I worked on multiple projects related to HSL.fi renewal as a UI/UX designer, including the main site and the online card-top up. In addition to those, I gave input regarding the journey planner and city bikes, projects that I had been previously involved with as a designer.

I was also partly responsible for building the HSL Design System in Figma, which is being utilized across different teams and helps designers to collaborate more efficiently and transparently.

Solution

Our team created a new website with a modular structure, which enables the HSL.fi to function as a platform for multiple services and teams. From the customer’s perspective, the user can find all of their information from one place, instead of multiple services with inconsistent user experience.

Design methods used during the project included journey mapping, facilitating workshops, user interviewing, usability testing, UI/UX design and prototyping solutions.

Mobile screenshots of the new website.
Over 70% of the customers browsed the site using a mobile device. Our goal was to make the site intuitively navigable on every device.
Screenshot of the HSL app page.
Content page promoting the HSL app and its features.
Screenshot of the profile page and card top-up.
Customers can top up their HSL card from the profile page.

A great emphasis was placed on the personalization of the content and adaptability for the customer’s individual needs. Extensive customer research that included quantitative surveys and qualitative interviews, revealed that HSL’s customers mostly wanted to see information related to areas that they live in or travel to and routes that they most often use. These findings acted as a guiding principle during the whole design process.

For the less frequent customers, such as tourists or car owners, we also wanted to provide a smooth experience. The content on the site is designed so that every customer group can easily find the relevant information to them.

Screenshot of the customer favorites.
Favorite locations and routes can be added from the customer’s profile page.
Angle shot of website blocks.
Modular blocks used on the new website.

Results

The new website was launched in late 2020 and is constantly being improved according to customer feedback. A survey conducted in December 2020 proved that the new site was a success; the score for finding information effortlessly across different categories was 4/5 (median).

← Back to home

Let’s connect!

Get in touch via email or LinkedIn, and let’s discuss how I can help you.