Helsingborgs Hamn

Utmaningen

Som en av norra Europas ledande hamnar ville Helsingborgs Hamn spetsa till sitt erbjudande och lyfta externwebbens informationsstruktur. Helsingborgs Hamn är en kommunal verksamhet och initiativet till att göra om externwebben kom med kravet på tillgänglighet som började gälla september 2020.

Externwebben hade med åren blivit rörig när mer och mer information lagts till. Känslan av Helsingborgs Hamns tydliga erbjudanden hade försvunnit och detta hade lett till att många av deras kunder och användare istället vände sig till kundtjänst för att ta reda på vad de inte hittade. Hamnen är också en viktig del av staden Helsingborg och regionens näringsliv vilket gör att deras uppdrag och närvaro behöver synliggöras på webben.

Målet blev att göra en bättre struktur för informationen, minska antalet samtal till kundtjänst och uppnå kraven för tillgänglighet.

Arbetsmetod, process & lösning

Projektet inleddes med en förstudie som innefattade två workshops som handlade om syfte, mål, användare och deras behov. Det resulterade i en behovskarta och en sitemap.

Workshops

Under vår första workshop hade vi Helsingborgs Hamn i fokus. Vilka är Helsingborgs Hamn? Varför behövde man en ny hemsida och vad är målet med att göra en ny externwebb? Hur skulle hemsidan stötta verksamhetsmålen? Genom den första workshopen blev det tydligt för projektgruppen vilket syfte och mål den nya hemsidan skulle ha.

Målet och syftet med den nya hemsidan blev att:

• Synliggöra hamnens erbjudande för sjötjänster, landtjänster och kryssningsfartyg.
• Modernisera externwebben och informationsstrukturen så att de som söker information hittar den på hemsidan istället för att behöva ringa till kundtjänst.
• Behålla de nöjda kunderna och öka deras förtroende genom att lyfta hamnens styrkor.
• Visa upp den fysiska hamnen för nyfikna Helsingborgsbor och underhålla en bra relation med Helsingborgs stad.
• Förbereda externwebben för att integreras med nya tekniska plattformar i framtiden.

Under vår andra workshop hade vi användaren i fokus – både från ett externt och internt perspektiv. Vilka är de och vilka behov har de. Ett av syftena till en ny webb var det röriga innehållet. Vad är det för information som de olika användargrupperna söker och vilka funktioner behöver den nya hemsidan för att stötta dem?

Workshopen mynnade ut i tre tydliga erbjudanden som den nya hemsidan behövde stötta:

• Sjötjänster
• Landtjänster
• Kryssningstjänster

I samtalet kring användarna kom man också fram till flera funktioner som skulle se till att minska belastningen på kundtjänst och istället leda användarna in till bra information på den nya hemsidan. Ett behov som nästan alla målgrupper hade var att se realtidsinformation om vad som pågår i hamnen.

Resultat av förstudien

Insikterna samlade vi i en behovskarta, vilket vi ofta använder för att visualisera vilka användarna är, deras behov samt lista eventuella lösningar/funktioner till dessa behov. I övningen ingår även att prioritera de målgrupper som är viktigast för externwebben. Dessa lösningar och funktioner grupperade vi sedan utifrån projektmål och erbjudanden. Därefter placerade vi in dem i en sitemap. En sitemap beskriver hur innehållet ska hänga ihop och länka till varandra för att det ska bli en logisk struktur.

Eftersom projektet inte hade så stor budget hoppade vi direkt till design av hemsidan. Några skisser med blyerts på papper fick ligga till grund för innehållet på varje sida. Därefter designade vi för att externwebben skulle uppfylla tillgänglighetskraven med färg och struktur.

I samband med designarbetet startade utvecklingen. Det var en tajt deadline på bara ett par månader men genom ett välplanerat och strukturerat arbete – både från Consid och från kundens sida kunde vi lansera sajten som planerat i mitten av september.

Den tekniska lösningen

• Ett krav från kunden var att vi fortsatte använda deras nuvarande CMS system vilket är WordPress. Vi på Consid var väldigt nöjda det med då WordPress ger oss kraftfulla funktioner och full frihet att bygga den webbplats kunden behöver. WordPress är både gratis och ovärderligt, vilket passade bra för detta projekt då kunden inte hade en stor budget. Kundens tidigare hemsida låg också i WordPress vilket underlättade en del migrering och val av plugins mm. Vi har skapat ett specifikt tema som ska uppfylla kraven för WCAG 2.1.
• WordPress underlättar mycket av det redaktionella arbetet för redaktörer och gör det lättare för kunden att skapa en hemsida som hela tiden är uppdaterad och levande.
• Kunden sparade även tid och pengar på att installera gratis tillägg/plugins för WordPress. Det ger en utökad funktionalitet på hemsidan och dessa plugins kan sen modifieras för att få till det utseendet kunden vill ha.
• Med den senaste versionen av WordPress följer det med ett nytt blocksystem vid namn Gutenberg som underlättar för oss att skapa nya blocks med integrationer till andra system. Man kan med sin JavaScript-kunskap bygga nya blocks med hjälp av React. Ett av dessa blocken är synliga på startsidan där vi visar vattentemperatur, vattenstånd, byvind och medelvind där vi hämtar data från Viva. Med hjälp av det nya blocksystemet kan vi bygga komponenter som kan användas på alla sidor, vi kan även bygga återanvändbara block/layouts.
• Vi skapade även tester med hjälp av Cypress. Cypress underlättar vårt jobb som utvecklare då nyutvecklade komponenter kan testas och säkerställa att de är tillgänglighetsanpassade med hjälp av Cypress tillgänglighetsanalysverktyg.

Resultatet

Tillsammans med Helsingborgs Hamn arbetade vi fram en ny hemsida som inte bara lever upp till tillgänglighetskraven för WCAG 2.1 utan också i design förmedlar känslan av ”Sveriges största hamn”. Sajten har fått en ny struktur som ska tjäna alla våra målgrupper, innehållet har setts över och översatts med hjälp av både Consids copywriter och Helsingborgs Hamns grymma team. Resultatet är en webb som sätter användaren i fokus och bidrar till ökad kunskap om Helsingborgs Hamns erbjudande.

Zandra Lindell på Helsingborgs Hamn berättar mer om projektet och samarbetet:

”Consid har varit en både lyssnande och utvecklande partner. Partner är kärnordet. Consid-teamet har verkligen förstått vårt behov och vilja. Byggandet av den nya sajten blev en resa som var utmanande, lärorik och riktigt rolig. Framförallt är vi glada och stolta över resultatet. Nordens bästa hamnsajt? Jag tycker det! Plattformen är satt för en levande webbplats som bara kommer att bli bättre och bättre.”

Om Helsingborgs Hamn

Hamnen är en av Sveriges största färjehamnar, en containerspecialist och en av norra Europas ledande hamnar. Containerfartygen har destinationer över hela världen och på land har de förbindelser till framförallt södra Sverige. Färjor mellan Helsingborg och Helsingör transporterar varje år drygt 7 miljoner passagerare och nära 2 miljoner fordon över ett av världens mest trafikerade sund.