Projekt 1: Re-design af hjemmeside

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 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 udarbejdes fra tirsdag den 24/9-4/10 2024, 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 d. 21/10 2024.

Gruppekontrakt

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

Jeg havde det godt med at blive tildelt rollen som projektleder, da jeg godt kan lide at have ansvar og det overordnede overblik.

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

Efter første dag valgte jeg at blive på skolen et par timer efter de andre tog hjem. Jeg ville gerne have et overblik fra begyndelsen af projektet og med min tildelte rolle som projektleder, tænkte jeg det var fint at få taget hul på det logistiske med udarbejdelse af tidsplan. . Jeg 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: 

  1. Udarbejdelse af testplan: Definér omfang, rekrutter brugere, identificér mål og fastlæg metrics.
  2. Facilitér testen: Vær neutral, noter observationer, og lad brugerne dele deres tanker.
  3. Analyser data: Se efter mønstre og identificér problemer.
  4. 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:

Torben Jensen, 63 år gammel, folkeskolelærer (8-16 arbejde), gift, har to voksne børn, søger nye fællesskaber.

Behov: 

  • Torben Jensen vil gerne finde et sted, hvor han kan spille skak med ligesindede, der er på samme niveau som ham. 

Udfordring: 

  • Torben Jensen ved ikke, hvordan han skal melde sig ind i den lokale skakklub Tårnet. 
  • Han ved desuden ikke, hvem han kan ringe til for at få hjælp.
  • Han kan have brug for hjælp til at navigere i digitale platforme, da han er mindre vant til teknologi.
  • Han er interesseret i skak, men tilbageholdende med at melde sig ind i en klub, da han frygter, at hans niveau ikke er højt nok og at han ikke kan hamle op med de erfarne spillere.

Scenarie:

Torben beslutter sig for at kigge nærmere på Tårnet skakklub. Han besøger deres hjemmeside, men bliver hurtigt forvirret over de mange informationer og links. Han prøver at finde et sted, hvor kan han sende en mail så han kan melde sig ind, men må opgive, da han ikke kan finde ud af, hvor han skal finde de rette oplysninger.

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 en farvepallette, der kunne passe til off-white.

Styletile

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

 

Underside –  kalender

 

Underside – kontakt

 

Underside – Nyt medlem?

 

De forskellige komponenter

 

Brugertest 2 + resultater (efter re-design) og 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

Efter at vi var færdige med de mere krævende opgaver, som prototypen og klientrapporten, gik vi i gang med at lave markedsføringsvideoen. Vi havde fra starten valgt at prioritere de andre dele af projektet, da videoen gav mulighed for mere kreativ frihed, og vi vurderede, at de andre elementer var vigtigere at fokusere på først. Jeg tog initiativet til at lave videoen, da jeg har erfaring med iMovie, og gik i gang med processen.

Vi besluttede os for en enkel tilgang, hvor videoen bestod af en gennemgang af den gamle hjemmeside, akkompagneret af “kedelig” musik og optagelser af vores gruppemedlem Andreas’ skuffede reaktioner. Derefter fulgte en montage, hvor hjemmesiden blev forbedret, med spændingsmusik i et højere tempo, og videoen sluttede af med en forløsende scene, hvor den nye, flotte hjemmeside vises frem, ledsaget af Andreas’ glade reaktioner og munter musik.

Jeg synes, det var en rigtig god oplevelse at lave videoen, og vi havde det sjovt under hele processen.

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 fra underviser

Mandag d. 21 oktober fik vi også feedbackfra vores underviser Andrea, som ses opsummeret nedenfor:

  • Manglende struktur i zip-filen – bør inddeles i mapper.
  • Undgå negative ord om klienten i markedsføringsvideoen.
  • Figma-filen mangler i zip-filen.
  • Prototypelinket peger på hele Figma-filen i stedet for kun prototypen.
  • Prototypelink bør være tilgængeligt på hver side.
  • BEM-metodologien mangler.
  • Positivt at kalde rapporten “Forslag til redesign af hjemmeside”.
  • God indholdsfortegnelse.
  • Forskelle i “luft” mellem elementer på siderne.
  • Mere konkretisering af de tre primære fokuspunkter (designmæssigt eller teknisk?).
  • Overskrifter skal være konsekvente (forklaringer vs. løsningsforslag, tilføjede sider).
  • Rapporten bør afsluttes med en opfordring til at tage kontakt, i stedet for en konklusion.
  • Prototypelink skal være med til sidst i rapporten.
  • Kalenderen skal have et lille logo og mulighed for hurtigere navigation i år/måneder.
  • Navn, e-mail og telefonnummer skal stå med fed.

Refleksion

Jeg synes projektet har været en generelt positiv oplevelse for mig. Jeg følte, at gruppedynamikken fungerede rigtig godt, og der var en god stemning og kommunikation mellem os alle. Jeg synes det fungerede fint at have rollen som projektleder og dermed ansvaret for, at vi fulgte tidsplanen og bevarede overblikket gennem hele forløbet. 

Dog var der tidspunkter, hvor projektet føltes lidt tidspresset, især det at vi skulle aflevere flere forskellige elementer som hver især krævede tid og energi at fuldføre. Tidsplanen hjalp os dog med at komme i mål, og det var en stor fordel at have en klar plan fra starten af projektet.

Jeg har lært meget gennem arbejdet med projekt 1, både fagligt og samarbejdsmæssigt. Specielt føler jeg, at jeg er blevet bedre til at bruge de forskellige programmer, vi arbejdede med, herunder Figma og InDesign. Det var første gang, jeg arbejdede ‘rigtigt’ med Figma, og selvom det til tider var udfordrende, oplevede jeg en stor udvikling i mine færdigheder undervejs.

Alt i alt er jeg tilfreds med, hvad vi opnåede som gruppe, og jeg føler, at vi afleverede et projekt, som både levede op til de faglige krav og mine egne forventninger.