Projekt 1 – Re-design af hjemmeside

d. 04 / 10 / 2024

Projektbeskrivelse

Projektet har til hensigt at forbedre en eksisterende hjemmeside ved at identificere og løse problemer gennem redesign. Grupper af fire medlemmer starter med at udføre en brugertest for at finde de største problemer på hjemmesiden. Herefter udarbejdes en prototype af et redesign, der adresserer de identificerede problemer, og løsningerne præsenteres gennem redesigns af forsiden samt udvalgte undersider.

Re-designet understøttes af research inden for aktuelle designtrends, brugeradfærd, målgruppeanalyse samt udvikling af personaer og scenarier. Efter redesignet udfører gruppen en ny brugertest for at justere prototypen baseret på feedback fra brugerne.

Derudover afleverer gruppen en klientrapport, der opsummerer resultaterne og forklarer, hvordan redesignet vil løse problemerne for klienten. Projektet inkluderer også en 2-minutters markedsføringsvideo, hvor der er fri kreativitet i indholdet, så længe fokus er på projektet.

Projektet foregår fra tirsdag den 24. februar til ??, og afsluttes med en pitch, hvor gruppen præsenterer deres redesign for medstuderende og studerende fra 3. semester den 8. oktober 2024. Forløbet afsluttes med feedback fra underviser Andrea.

Gruppekontrakt

I forbindelse med kick-off til projektet skulle vi udarbejde en gruppekontrakt, samt finde en projektleder. Vi blev enige om, at Johanne skulle være vores projektleder.

I gruppekontrakten aftalte vi, at vi skulle opretholde en åben og ærlig kommunikation, hvor vi altid skulle kunne søge hjælp hos hinanden. Vi aftalte også et mødetidspunkt og fastlagde, hvornår vi hver især blev nødt til at gå tidligere eller lignende. Et andet punkt i kontrakten belyste også gruppens mål mod projektet. Her blev vi enige om, at det vigtigste punkt var at imødekomme alle projektets krav og så måtte kvaliteten komme i anden række.

Plan for projekt

Fra starten af projektet udarbejdede Johanne et udkast til en tidsplan for vores arbejde. Hun tog udgangspunkt i de elementer, vi skulle aflevere, og arbejdede baglæns: Hvad skal der til for at kunne lave markedsføringsvideoen og klientrapporten? Prototypen. Hvordan laver vi prototypen? Vi skal gennemføre brugertests og research. Det betød, at vi begyndte med at identificere målgruppen osv.

Vi mødtes i gruppen dagen efter for at justere tidsplanen, hvorefter vi gik i gang med arbejdet. Det var en fordel at have en tidsplan fra begyndelsen, da den hjalp os med at bevare overblikket gennem hele forløbet og sikre, at vi ikke kom bagud i forhold til afleveringsdatoen.

Billede af vores tidsplan, hvor vi dag for dag ændrede – til *, så vi kunne bevare overblikket.

Målgruppe

Ud fra research, svendborg skakklubs eksisterende hjemmeside, deres sæsonkalender og FIDE (Den internationale skak-organistation) fandt vi frem til målgruppen, vi ville arbejde ud fra:

Den primære målgruppe for svendborgskak.dk/skakklubben Tårnet er primært mænd 50+ med en interesse for skak, både på begynderniveau og avanceret niveau. Målgruppen er både dem, der spiller skak som fritidsaktivitet, og dem, der ønsker konkurrence.

Med målgruppen fastlagt og defineret kunne vi fortsætte vores arbejde.

Brugertest 1 + resultater

For at kunne starte vores redesign af vores valgte hjemmeside, svendborgskak.dk, skulle vi udføre nogle brugertests. Ud fra research kunne vi fastlægge Svendborg skakklubs målgruppe, nemlig mænd med en alder på 50 eller ældre. Herfra fandt vi to testpersoner, der passede til målgruppen, som vi testede hjemmesiden på. Vi valgte at benytte os af en usability test med think aloud.

De fire trin i usability testing er:

Udarbejdelse af testplan: Definér omfang, rekrutter brugere, identificér mål og fastlæg metrics.
Facilitér testen: Vær neutral, noter observationer, og lad brugerne dele deres tanker.
Analyser data: Se efter mønstre og identificér problemer.
Lav en testrapport: Opsummér resultaterne og foreslå forbedringer.

Vi gav testpersonerne tre forskellige opgaver, der omhandlede navigationen på hjemmesiden.

Find ud af hvad et medlemskab for en pensionist koster

Find ud af hvordan man tilmelder sig
Find et telefonnummer for klubben

Testpersonerne kunne efter moderat besvær besvare første og sidste spørgsmål, men ingen af testpersonerne kunne finde ud af, hvordan man tilmeldte sig klubben. Desuden fik vi en masse indsigt i testpersonernes oplevelse af hjemmesiden i post-interviewet. Her fortalte de blandt andet, at hjemmesiden generelt var forvirrende, at det var svært at finde de rette kontaktoplysninger på klubben og at hjemmesiden fremstod uddateret og kedelig.

Vores evaluering/ umiddelbare problematikker ud fra resultater

Ud fra vores resultater kunne vi nu definere de mest alvorlige problematikker på svendborgskakklub’s hjemmeside:

For det første oplevede vi, at jeres hjemmesiden er udfordrende at navigere i. Flere brugere fandt det svært at finde den information, de ledte efter.

For det andet fandt vi, at hjemmesiden mangler et moderne og visuelt indbydende udtryk. Brugerne efterspurgte et mere professionelt og moderne udseende, så den afspejler klubbens engagement og fællesskab bedre.

Derudover fremstod siden ikke tilstrækkeligt imødekommende eller informativ for nye medlemmer. Der mangler klar og tilgængelig information for dem, der kunne være interesserede i at blive en del af klubben,

Persona + scenarie

På baggrund af vores research og brugertest kunne vi fastlægge en persona med et tilhørende scenarie.

Wireframe, moodboard og styletile

Wireframe

For at lave et skelet til vores hjemmeside udarbejde vi nogle wireframes. Først en grov lo-fi wireframe på tavlen og derefter i hi-fi wireframe Figma.

Moodboard

I vores brainstorm til hjemmesidens redesign lavede vi et moodboard. Vi valgte at gå efter et sofistikeret, skakbræts-inspireret tema i lysebrune nuancer. Gennem vores research fandt vi blandt andet ud af, at “off-white is the new white”. Derfor gik vi med et colour scheme, der kunne passe til off-white.

På baggrund af vores moodboard og wireframes kunne vi begynde at lave en style tile. Vi fastlagde redesignets farver, skrifttype og knapper, samt udarbejdede en Tone of Voice.

Prototype 1. version

Da vi havde fastlagt, hvordan vi ville opsætte vores redesign, gik vi i gang med arbejdet. Vi mærkede, at vi havde forberedt os godt, hvilket gjorde processen med prototypen overskuelig og ligetil. Opsætningen af redesigns forløb hurtigt, og vi samarbejdede effektivt. Selvom det var en udfordring at arbejde i Figma, da ingen af os havde erfaring med det før, hjalp vi hinanden, og vi nåede rigtig godt i mål.

Forside

Underside – praktisk info

Kalender

Kontakt:

Nyt medlem?

De forskellige komponenter

Den endelige prototype

Andreas og Joy havde onsdag d. 2 været til møde med ‘Studiemakker på Tværs’ og fik feedback fra de studerende på 3. semester. Her foreslog de småændringer, men synes generelt vores projekt var fint og gav mening.

Efter feedback fra brugerne i den anden brugertest konkluderede vi, at der ikke var behov for ændringer i vores redesign af hjemmesiden. Vi brugte dog tid på at finjustere detaljer, knapper og æstetik i vores prototype. Med disse justeringer på plads var vi nu klar til at begynde arbejdet med klientrapporten.

Klientrapport

Med prototypen på plads kunne vi begynde at udarbejde vores klientrapport. Vi startede med at lægge en plan for indholdet og opbygningen af rapporten. Thea arbejdede i InDesign på sin computer og udviklede layoutet i samme stil som vores prototype, mens de øvrige gruppemedlemmer skrev afsnit til de forskellige elementer i rapporten.

Herefter satte vi tekststykkerne ind i dokumentet og rettede til i indholdet, så det hele gav mening. Det var i starten en udfordring at lave rapporten, da vi hidtil havde haft en anderledes – og mere faglig tilgang til opgaven med redesignet, men nu skulle vi omstille os, så klientrapporten henvendte sig direkte til en egentlig klient. I vores arbejde med prototypen havde brugertests og research fyldt meget, men i klientrapporten skulle vi undlade sådanne detaljer.

Trods udfordringerne kom vi godt omkring opgaven, og fik lavet en fin klientrapport, vi er tilfredse med.

Markedsføringsvideo:

Feedback Padlet

Efter at have fremført vores pitch for Andrea og vores medstuderende fra vores eget hold og tredje semester, fik vi feedback via Padlet. Et udpluk af feedbacken vises nedenfor.

Hvad er godt?

Meget overskueligt
Super flot præsentation
Salgsorienteret

Hvad kan være bedre

Elementerne i footeren er ulæselig
Lidt mere luft (designmæssigt)
Tydeliggør sideskift

Præsentationsteknik

Kom så tæt på at bruge al tiden som muligt. Hop gerne ud af præsentationen
Brug pladsen
God fordeling mellem jer

Feedback på klientrapport – Underviser (Andrea)

Savner struktur i zip-filen. Inddel det i mapper
Pas på med de negative ord om klienten i markedsføringsvideoen
Manglende figma i zip-filen
Link til prototypen går ind på hele figma-filen og ikke kun prototypen, som det burde være.
link til prototypen på hver side.
Manglende BEM
Godt at kalde den ‘Forslag til redesign af hjemmeside’
God indholdsfortegnelse
Forskel i “luft” mellem elementerne på siderne.
Savner mere konkret under de tre primære fokuspunkter. Er det designmæssigt eller teknisk, at navigationen ikke fungerer?
Overskrifterne skal være konsekvente. Hvilke er forklaringer og hvilke er løsningsforslag? Og hvilke sider er en tilføjelse?
Da det ikke er en meget lang rapport, så ikke en konklusion til sidst, men hellere et oplæg til at tage kontakt for klienten. Hvorfor skal de kontakte os?
Link til prototypen til sidst
Kalenderen skal have et lille logo af en kalender, hvor man kan springe hurtigere i år og måneder.
Navn, E-mail og Telefon med fed

Vi fik også feedback på vores klientrapporten af Andrea. Herunder ses de vigtigste punkter.

Ikke tilstrækkelig BEM.
Der er forskel i “luft” mellem elementerne på siderne
Da det ikke er en meget lang rapport, så ikke en konklusion til sidst, men hellere et oplæg til at tage kontakt for klienten. Hvorfor skal de kontakte os?
Overskrifterne skal være konsekvente. Hvilke er forklaringer og hvilke er løsningsforslag? Og hvilke sider er en tilføjelse?
Godt at kalde den ‘Forslag til redesign af hjemmeside’
Link til prototypen går ind på hele figma-filen og ikke kun prototypen, som det burde være
Savner struktur i zip-filen. Inddel det i mapper

Refleksion

Projektet har været super spændende og en god læringsoplevelse. Vi har virkelig øvet os i samarbejde, planlægning og brugercentreret design. Brugertestene gav os indsigt i, hvad målgruppen faktisk har brug for, og hjalp os med at gøre hjemmesiden nemmere at bruge. Det med at lave wireframes og prototyper viste også, hvor meget detaljerne og udseendet betyder. Feedback fra vores studiemakkere og underviser gjorde, at vi kunne finpudse projektet endnu mere.

Jeg har helt klart lært meget om design, teamwork og kommunikation undervejs. Fremover vil jeg prøve at have bedre styr på filstruktur og præsentation. Jeg er mega stolt af både processen og det, vi endte med at lave som gruppe!