CASE 2
Teknisk og designmæssig opgradering af DSB.dk
Dsb.dk skulle migreres til en ny teknisk platform. Det var et stort projekt som omfattede en lang række forretningsområder samt både interne og eksterne udviklingsteams. Jeg var med både til behovsafdækning, optegne ny struktur til sitet og forbedre flows. Jeg samarbejdede med UI-designer om at udvikle og ombygge nye komponenter til designsystemet for dsb.dk.
1. BEHOVSAFKLARING
Problem:
Projektet manglede indsigt i, hvilke områder slutbrugerne af DSB.dk ønskede prioriteret først.
Min rolle:
At repræsentere brugernes perspektiv i prioriteringen af forbedringer på DSB.dk.
At bidrage til afklaring af formål og prioritering af de områder, der ville have størst gavn af en opdatering.
Metoder:
- Survey til alle deltagere i DSB's brugerpanel
- Anvendelse af System Usability Score (SUS) for at etablere en fælles ramme for måling af brugerindsigter fremadrettet
Løsning:
Etablerede et databaseret grundlag for at vurdere oplevelsen af dsb.dk på tværs af områder. Deltagerne i spørgeskemaet blev spurgt, hvilke områder de oftest brugte, og hvordan de vurderede brugervenlighed og dækning af forventede funktioner på hvert område.
Svarene blev omregnet til en SUS-score, som kan bruges til at sammenligne med oplevelsen af lignende funktioner andre steder og dermed vise, om siden lever op til forventningen om at være brugervenlig.
Derudover gav undersøgelsen input til de største pains på de enkelte områder, som senere kan udforskes nærmere, når der arbejdes videre med området.
Resultater:
- Formidlede indsigter til ledelse, PO og udviklere og bidrog til beslutninger om prioritering.
- Formidlingen blev lettere på grund af karaktergivningen.
- Efterfølgende blev der gennemført en tilsvarende undersøgelse på DSB App, så der var et solidt sammenligningsgrundlag.
2. Organisering af indhold
Problem:
I forbindelse med flytning af content til en ny platform var der et ønske om samtidig at forbedre brugeroplevelsen på DSB.dk. En væsentlig del af udfordringen blev identificeret som værende relateret til navigationen.
Min rolle:
Ansvarlig for at designe en grundlæggende IA-struktur og kortlægge behovet for sidetyper og komponenter.
Metoder:
- Projektet krævede en del stakeholder håndtering, da der er mange forretningsområder i DSB, som bruger Dsb.dk som deres kommunikationskanal.
- Forretningsafklaringer via workshops mm.
- Sitemap og informationsarktitektur (IA)
Løsning:
Nyt sitemap, som tilgodeså at navigation var svær. Det vil blive nødvendigt at skære ned i indhold når der tages fat i de enkelte områder. De første områder der skulle ses på og ryddes op i var Trafikinformation og Kundeservice siderne, som blev omdøbt til Hjælp og kontakt for at tydeliggøre indholdet.
Resultater:
- Ny IA, med en opdeling af områder, så det var muligt for udviklerne at flytte content fra et område af gangen.
- Lettere for projektet at tage stilling til prioriteringer
3. Design af flow og komponenter
Problem:
For at lave en effektiv design iteration af dsb.dk havde vi brug for at tænke i komponenter og lave Designsystem.
Min rolle:
Jeg var UX designer og undersøgte det grundlæggende behov for skabeloner på tværs af siden.
I samarbejde med UI designer skabte vi et designsystem med komponenter, der kan bruges på tværs af sidetyper på dsb.dk, og sikrede et grid, der kan fungere optimalt og tilgængeligt på både mobil og desktop.
Kontekst:
Områderne dsb.dk/trafikinformation og dsb.dk/hjaelp-og-kontakt er de første områder der bliver designet
Metoder:
- Designproces - som starter med skitser på papir, som jeg altid gør, for at blive i flow og idegenerings mode, før Figma tager over.
- Iterativ prototyping i Figma. Fokus på flow og informations behov
- Behovsafklaring af komponenter på tværs af sideskabeloner for at opbygge Designssystem i samarbejde med UI designer
- Brugertest - Remote og modereret tænkehøjttest
Løsning:
Som første skridt tegnede jeg sider og skabeloner til Trafikinformation, det første område der skulle flyttes.
Disse skabeloner blev fundamentet for siderne på resten af dsb.dk. Nogle sider var dog unikke og skulle ikke genbruges, som for eksempel funktionen til at sortere i en liste over forsinkede afgange. Denne løsning blev designet specifikt til den enkelte side og løbende brugertestet.
I tæt samarbejde med UI-designer udviklede vi et designsystem med komponenter, der kan anvendes på tværs af sidetyper på dsb.dk, og etablerede et grid, der fungerer optimalt og tilgængeligt på både mobil og desktop.
Resultater:
- Et designsystem til dsb.dk, der styrkede samarbejdet og arbejdsgangene mellem UX og udvikling
- Optimering til mobilvisning, som over 60 % af brugerne benytter – især til Trafikinformation
- Færre sideskabeloner at vedligeholde for redaktørerne, hvilket gav mere effektive arbejdsgange
- DSB.dk/trafikinformation blev flyttet til et nyt design, som markant forbedrede brugeroplevelsen
- En ny måde at tydeliggøre forskellen på akutte og planlagte ændringer gjorde det lettere for brugerne at afkode informationen
- DSB.dk/kundeservice blev flyttet og omstruktureret, hvilket resulterede i en stigning i kundetilfredsheden på 6 %
Senior UX designer hos DSB Aug 2021 - Nov 2024
Fremhævede resultater
- Styrkede UX's strategiske rolle gennem systematisk måling og tydeliggørelse af brugerindsigter.
- Skabte tættere kobling mellem forretning og udvikling via workshops og visualiseringer af brugerrejser.
Vigtigste kompetencer i spil
- Drive iterative designprocesser
- Strategisk og forretningsmæssig forståelse
- Informationsarkitektur
- Brugertest (forberedelse, afholdelse og analyse)
- Stakeholder management
- Samarbejde på tværs af mange profiler