Projekt 1: Redesign af hjemmeside
Har du lyst til at afprøve vores Figma prototype inden du læser videre?
Så har du mulighed for det her!
Til vores første projekt fik vi til opgave at udføre et redesign af en selvvalgt hjemmeside.
Vores gruppe valgte at lave et redesign af Studiebolig-odense.dk.
Vi blev inddelt i tilfældige grupper á fire personer, og projektet strakte sig over flere faser, som vi selv skulle opbygge strukturen af.
Vores endelige aflevering bestod af:
– 2 omgange af brugerteste.
– Figma prototype.
– En klientrapport.
– En pitch for vores underviser Anni og 3. semester.
Undervejs i processen, skulle vi også inkludere følgende:
– Redegør kort og klart for de væsentligste problemer, som vi har afdækket.
– Formulerer forslag hvordan de højest prioriterede problemer.
– Redesign af landing page og selvvalgte undersider af hjemmen.
– Argumenter for jeres løsninger og konklusioner.
– Anvende relevante metoder og indsigter baseret på research omkring brugeradfærd og UI.
– Udarbejde mindst en primær persona.
– Udarbejde Mock ups.
– Udarbejde Styletile.
Kick-off og projektvalg
På kick-off-dagen skulle vi først vælge en hjemmeside, som vi ønskede at arbejde med.
Vi valgte at arbejde med Studiebolig-Odense.dk
Vi udarbejdede en gruppekontrakt med klare roller og retningslinjer.
Jeg valgte at lave en kalender for at skabe overblik over processen. Kalenderen skulle fungerer som et overblik, men viste sig senere at mangle præcision og detaljer.
Til næste projekt vil jeg prioritere at lave en mere detaljeret plan fra begyndelsen som inkluderer både opgaveformulering og hvordan det skal strikkes sammen.
De første skridt
Som vores første reelle fase af vores projekt, testede vi den eksisterende hjemmeside på studerende fra skolen. Vi havde forberedt et testscript, som kan ses herunder.
For at få bredere indsigt delte vi os op i to hold for at gennemføre flere tests.
Det gav os et bredt overblik hurtigt, over hvad der fungerede på den originale hjemmeside – og hvad der ikke gjorde.
Undervejs faldt vi over en plakat fra studiebolig-odense.dk med en farvepalette, som vi forsøgte at arbejde videre med senere i projektet: karrygul, pastelblå og rødlige nuancer.
Farverne fungerede godt på plakaten, og vi var nysgerrige på, hvordan de kunne oversættes til digitalt design.
Personaer og styletyle
Det var også i denne fase, hvor vi udviklede vores styletile og personaer.
På baggrund af vores research og interviews formulerede vi to personaer:
– Sofie, som er tilflytter til Odense, som vores primær persona
– Marcus, som har boet på Fyn hele sit liv, som vores sekundære persona.
Vi brugte vores personaerne til at målrette designet og prioritere funktioner.
Jeg påtog mig opgaven at visualisere vores persona, og jeg havde misforstået hvordan man brugte InDesign, så vores personaer er faktisk lavet i InDesign (Haha!).
Jeg har nu et bedre overblik over hvad InDesign bruges til, og jeg regner med at jeg fremover vil bruge Figma eller Photoshop til at visualisere personaer.
Idegenering
Inden vores første arbejdsdag på Figma prototypen, havde vi alle forberedt idéer hjemmefra.
Det gav en god base for at bygge videre på hinandens input.
Vi arbejdede med typografi, farver og struktur – og ligesom vores brugertestpersoner, blev vi hurtigt enige om, at den oprindelige hjemmeside fremstod rodet og uoverskuelig.
Dagen endte med et mockup, som var et produkt af vores individuelle ideer – strikket sammen, som vi nu var klar til at visualisere i Figma.
Iteration og farvevalg
Til vores tredje møde begyndte vi på vores hi-fi prototype i Figma. Vi begyndte at eksperimentere med farver og logo.
Her blev det tydeligt, at farverne fra plakaten ikke fungerede i praksis – udtrykket blev rodet og barnligt.
Efter et par diskussioner, valgte vi at skifte til en mere afdæmpet palette med blå nuancer, hvid, sort og grå.
I samme omgang fik vi opdateret vores styletile.
Feedback fra Studiemakker på tværs
Tre dage før aflevering var vores prototype næsten klikbar.
Vores studiemakker på tværs- gruppe havde planlagt et feedbackmøde, og vi fik værdifuld input, som vi nåede at implementere. Det betød dog, at vi ikke fik gennemført anden brugertest i samme omfang som planlagt.
Vi nåede kun at teste på to personer i vores brugertest nr 2, hvor vi havde planlagt minimum 4 personer.
Til næste gang håber jeg at det er muligt at have vores prototype klar til at teste anden gang tidligere i processen, så vi havde bedre tid til at foretage de sidste rettelser.
Se min post om mit andet møde med studiemakker på tværs- gruppe her
Klientrapport
Næste dag, gik vi i gang med at samle klientrapporten i InDesign.
Vi var i tvivl om sprogtone og teori, men valgte at skrive rapporten i et klart og forståeligt sprog, suppleret med et dokument, hvor vi listede de begreber og teorier vi havde anvendt.
Senere fandt vi ud af, at det ikke var nødvendigt – det vigtigste var at vise, at vi havde tænkt over det.
Vi brugte også rigtig meget tid på at lære InDesign endnu bedre at kende i fællesskab.
Klientrapporten fik vi feedback på d. 31/10.
Vores største kæpheste her var for meget brødtekst og at vi kunne have gjort InDesign endnu brugervenlig for klienten i opsætningen.
Vi havde dog brugt et fornuftigt sprog og fik ros for vores forside og at have fokuseret på “sælge” vores redesign samt vores måde at sammenligne før og efter redesign.
Klik på billedet og se vores klientrapport!
Pitch for 3. semester og Anni
Vi sluttede projektet af tirsdag den 21. oktober, hvor vi skulle pitche for Anni, som vi skulle forestille os som klient.
Derudover var der også 3. semester MMD studerende, som kunne give os feedback.
Vi havde forberedt en PowerPoint dagen før, men efter min mening, synes jeg at processen var lidt rodet.
Nogle ønskede at improvisere, mens jeg havde brug for at vide præcis, hvad der skulle siges.
Under pitchen fik vi feedback på både design og præsentation, og det var en god øvelse i at formidle vores arbejde, hvor vi på samme tid kunne blive inspireret af de andre grupper.
Refleksion
Dette projekt har givet mig mere indsigt i, hvor vigtigt det er med planlægning og tydelig opgavefordeling.
Jeg har fået mere erfaring med både Figma og InDesign og føler mig bedre klædt på til næste til næste gang.
Jeg har også lært, at jeg har brug for mere forberedelse – især når det gælder præsentationer.
Til næste gang vil jeg forsøge at arbejde mere fokuseret fra starten og sikre, at jeg har tid til at finpudse de dele, der kræver ekstra opmærksomhed.
Jeg vil også på forhånd sætte mig endnu bedre ind i de programmer, jeg bruger.