Magisk jul

Magisk jul

Udarbejdet på 1. semester af Christian, Mathias, Mathilde & Neepa

Problem

Dette casestudy omhandler at gruppen skal udvikle et mindre website for Skulpturparken i Blokhus Magisk jul. På deres nuværende hjemmeside er indholdet ikke organiseret optimalt, hvilket kan skabe forvirringer for potentielle besøgende med at danne et overblik over arrangementets aktiviteter, tidspunkter og udstillinger.

Løsning

Det nye website skal løse disse udfordringer og skabe en mere struktureret og brugervenlig oplevelse for besøgende.

Min rolle i projektet

UX / UI og Frontend

Programmer der blev anvendt

1. Research

For at kunne udvikle en hjemmeside, har vi lavet research og kigget på hvem de potentielle brugere kunne være. Vi har anvendt metoden segmentering, hvor vi har segmenteret ud fra de objektive og subjektive kriterier. Under de objektive kriterier inddeles den i demografiske og geografiske forhold, hvor der blev set på statistiske data om potentielle brugere og stedlige kriterier. Under de subjektive kriterier blev den inddelt i adfærd og psykografiske forhold, hvor der blev set på de potentielle brugeres egenskaber og mulige adfærd. Formålet med dette er at kunne få en forståelse af potentielle brugere og imødekomme deres behov.

2. Brugerundersøgelse

På baggrund af segmenteringen fik vi en idé om, hvem de potentielle brugere er, hvilket gjorde det muligt for os at foretage et kvalitativt interview for at underbygge de teorier, der blev udviklet under segmenteringen, samt at tilegne os ny viden inden for julearrangementer og brugernes præferencer. Der blev udarbejdet en interviewguide med det formål at opnå en dybere forståelse af brugerne. Interviews blev transskriberet, hvor der efterfølgende blev lavet en tematisk analyse, her skulle vi analysere og beskrive gentagne mønstre på tværs af interviews. Dette omsættes til behov og emner der kunne være relevante at have med når der skulle udarbejdes indhold.

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.