Aalborg HK

Aalborg HK

Udarbejdet på 2. semester af Martin C, Rasmus P, Mathilde P & Neepa

Problem

Dette casestudie undersøger, hvordan man kan optimere en hjemmeside for en selvvalgt virksomhed. Aalborg HK, en håndboldklub, anvender deres hjemmeside til at formidle relevante oplysninger og tilmelde hold. Deres nuværende hjemmeside er uorganiseret, hvilket kan skabe forvirring blandt både eksisterende og potentielle brugere og gøre det vanskeligt at få adgang til vigtig information.

Løsning

Det nye website skal imødekomme disse problemer ved at tilbyde en mere overskuelig og lettilgængelig platform for besøgende og eksisterende bruger.

Min rolle i projektet

UX / UI og Frontend

Programmer der blev anvendt

1. Research

For at udvikle en hjemmeside blev der foretaget en grundig undersøgelse for at kortlægge de mulige brugere. Der anvendes segmenteringsmetoden, hvor målgruppen opdeles baseret på både objektive og subjektive faktorer. De objektive aspekter omfatter demografiske og geografiske elementer, hvor vi har analyseret relevante statistikker og lokale forhold. De subjektive faktorer inkluderer adfærdsmønstre og psykografiske egenskaber, hvor vi har undersøgt brugernes karakteristika og potentielle handlinger. Målet med denne metode er at opnå en bedre forståelse af de mulige brugere og dermed kunne tilpasse os deres ønsker og behov.

2. Brugerundersøgelse

Ved hjælp af segmenteringen fik vi en klar opfattelse af de mulige brugere, hvilket gjorde det muligt at udføre dybdegående interviews. Disse interviews bekræftede de teorier, der blev skabt under segmenteringen, og gav os ny indsigt i håndbold samt brugernes præferencer. Vi lavede en struktureret guide til interviewene for at opnå en dybere forståelse af brugerne og deres behov. Der blev efterfølgende lavet en tematisk analyse af interviews for at se om der er gentagne mønstre på tværs af interviews. Ud fra analysen blev det omsat til behov og krav.

3. Persona

På baggrund af segmentering og brugerundersøgelser blev der anvendt personas til at repræsentere de to brugergrupper. Ved at bruge personas kan der opstilles mulige situationer og scenarier for, hvordan brugerne vil interagere med siden. Dette kan føre til identificering af brugernes behov og krav, som kan omsættes til designløsninger til siden.

4. Content Inventory

For at kunne arbejde med indholdet blev Aalborg HKs hjemmeside gennemgået for at se, hvad der findes, samt hvordan siden er opbygget. Med et content inventory, blev alt indholdet samlet i et Excel-ark. Denne metode gav et klart billede af hjemmesidens nuværende struktur og gjorde det muligt at vurdere indholdet. Ved at analysere dette kunne vi finde områder til forbedring, hvilket vil hjælpe med at skabe en mere brugervenlig og effektiv hjemmeside.

5. Affinity diagram

Vi brugte FigJam til at oprette post-its, som repræsenterer både eksisterende og nye indholdsideer. Gennem brainstorming og tematisk analyse identificerede vi, hvad brugerne efterspørger. Ved hjælp af et affinity diagram blev indholdet organiseret baseret på relevans og sammenhænge.

6. Udarbejdelse af indhold

Vi oprettede et content sitemap for at definere den nye struktur for hjemmesiden. Denne metode hjalp os med at visualisere organiseringen af undersider og emner, hvilket gjorde det lettere at identificere forbindelser mellem sektioner. Vi fokuserede på at skabe en logisk opbygning, der imødekommer brugernes behov og forbedrer deres oplevelse. Content sitemap fungerer som en essentiel guide til den videre udvikling og design af hjemmesiden, hvilket sikrer en sammenhængende præsentation af indholdet. Efter oprettelsen af sitemappet blev der udarbejdet indhold, der følger den fastlagte struktur. Vi prioriterede at udvikle relevant og engagerende indhold, der adresserer brugernes behov og interesser.

7. Designfasen

Efter færdiggørelsen af indholdet undersøgte vi standard UI-mønstre for holdsider, medlemskaber og navigation, som blev taget i betragtning under udviklingen af designløsninger for Aalborg HK. Gruppen skitserede forskellige løsningsforslag til undersiderne, hvilket førte til udarbejdelsen af wireframes. Indholdet blev integreret i wireframes for at skabe et klart overblik over layout og funktionalitet. Herefter blev wireframes omsat til mockup, for at give en visuel fremstilling af hjemmesiden.

8. Think Aloud Test

Mockup’en blev omsat til en interaktiv prototype. En Think Aloud-test blev gennemført for at undersøge, om brugerne kunne navigere rundt på siden. Testen gav os indsigt i potentielle forbedringer af designet og wayfinding. Testresultaterne blev dokumenteret i en usability test report, hvor vi identificerede alvorlige problemer og forbedrede designet og wayfindingen.

9. Realisering

Det endelige design blev realiseret i Visual Studio Code, hvor dele af indholdet blev hentet dynamisk via WordPress API. For eksempel blev information om hold, træningstider og kommende arrangementer hentet dynamisk for at give kunden en fleksibel løsning, hvor de nemt kan opdatere indholdet uden teknisk hjælp.