The challenge
As one of northern Europe’s leading ports, the Port of Helsingborg wanted to sharpen their offer and lift the external web’s information structure. The Port of Helsingborg is a municipal operation and the initiative to redo the external web came with the requirement for accessibility, which came into force in September 2020.
The external web had become cluttered over the years as more and more information was added. Their clear offer had disappeared which had led many of their customers and users to turn to customer service to find out what they could not find. The port is an important part of the city of Helsingborg and the region’s business community, which means that their mission and presence need to be made visible on the web.
The goal was to make a better structure for the information, reduce the number of calls to customer service and achieve the requirements for availability.
Working method, process & solution
The project began with a feasibility study including two workshops dealing with purpose, goals, users and needs. It resulted in a “needs” map and a sitemap.
Workshops
During our first workshop, we had the Port of Helsingborg in focus. Who are they? Why did they need a new website and what is the goal of making a new external website? How would the website support the business goals? Through the first workshop, it became clear to the project group what purpose and goals the new website would have.
The goal and purpose of the new website was to:
Make the port’s offer visible for sea services, land services and cruise ships.
Modernize the external web and information structure so that those looking for information can find it on the website instead of having to call customer service.
Maintain the satisfied customers and increase their confidence by raising the port’s strengths.
Show the physical port to curious Helsingborg residents and maintain a good relationship with the city of Helsingborg.
Prepare the external web to be integrated with new technical platforms in the future.
During our second workshop, we had the user in focus – both from an external and internal perspective. One of the purposes of a new website was to erase the messy content. What kind of information are the different user groups looking for and what features does the new website need to support them?
The workshop resulted in three clear offers the new website needed to support:
Maritime services
Land services
Cruise services
In the conversation about the users, they also came up with several functions that would lead the users to good information on the new website. A need that almost all target groups had was to see real-time information about what’s going on in the port.
Results of the feasibility study
We gathered the insights in a “needs” map, which we often use to visualize who the users are. The exercise also included prioritizing the target groups. We then grouped these solutions and functions based on project goals and offers, as we placed them in a sitemap. A sitemap describes how the content should be connected and linked to each other in order for it to be a logical structure.
Since the project did not have a large budget, we jumped directly to the design of the website. Some sketches with pencil on paper were used as a basis for the content on each page. Then we designed it so that the external web would meet the accessibility requirements.
In connection to the design work, the development started. It was a tight deadline of just a couple of months, but through well-planned and structured work – both from Consid and from the customer’s side, we were able to launch the site as planned in mid-September.
The technical solution
A requirement was that we continued to use their current CMS system, which was WordPress. Consid were very pleased with that as WordPress gives us powerful functions and full freedom to build the website the customer needs. WordPress is both free and invaluable, which was a good fit for this project. The customer’s previous website was also in WordPress, which facilitated some migration and selection of plugins etc. We then created a specific theme that will meet the requirements of WCAG 2.1.
WordPress facilitates much of the editorial work for editors and makes it easier for the customer to create a website that is constantly updated and alive.
The Port of Helsingborg also saved time and money by installing free add-ons/plugins for WordPress. It provides an extended functionality on the website and these plugins can also be modified to get the look they want.
The latest version of WordPress comes with a new block system called Gutenberg, making it easier for us to create new blocks with integrations to other systems. With JavaScript knowledge, you can build new blocks with the help of React. One of these blocks is visible on the start page where we show water temperature, water level, village wind and mean wind where we retrieve data from Viva. With the help of the new block system, we can build components that can be used on all pages and we can also build reusable blocks/layouts. We also created tests using Cypress.
The result
Together with the Port of Helsingborg, we developed a new website that not only lives up to the accessibility requirements for WCAG 2.1 but also conveys the feeling of “Sweden’s largest port” through the design. The site has a new structure that will serve all target groups, the content has been reviewed and translated with the help of both Consid’s copywriter and the Port of Helsingborg’s team. The result is a website that puts the user in focus and contributes to increased knowledge about the Port of Helsingborg’s offer.
Zandra Lindell at the Port of Helsingborg about the project and collaboration:
“Consid has been both a listening and developing partner. Partner is the key word. The Consid team really understood our needs. The construction of the new site was a journey that was challenging, educational and really fun. Above all, we are happy and proud of the result. The Nordic region’s best port site? I think so! The platform is set for a live website that will only get better and better. ”
About the Port of Helsingborg
The Port of Helsingborg is one of Sweden’s largest ferry ports, a container specialist and one of northern Europe’s leading ports. The container vessels have destinations all over the world and on land they have connections to southern Sweden in particular. Every year, ferries between Helsingborg and Helsingör transport just over 7 million passengers and close to 2 million vehicles across one of the world’s busiest straits.
