Design forslag til baagoe.info

Forslag til redesign for baagoe.info. Opgaven var projekt 1 i modul 1 på multimediedesigner uddannelsen, MMD. Projektet blev udført efterår 2019. Opgaven bestod af at give et forslag til redesign, evaluering af den eksisterende hjemmeside og rapportere resultater i en rapport og præsentation. I mit tilfælde var hjemmesiden baagoe.info

Den fulde titel på opgaven var “Projekt 1: Evaluering og re-design af en hjemmeside”.

I dette redesign og denne evaluering deltog:

  • Rasmus Gyde Andersen
  • Nick Varming
  • Max Festersen Hansen
  • Fiona Elvine Anine Sibeko

I vores opgavebesvarelse har vi udarbejdet en prototype i Adobe XD, og en klient-rapport i Adobe Indesign.

Design processen

Forberedelse

Dagen grupperne blev sammensat, skrev vi en gruppekontrakt, hvor vi som gruppe beskrev regler og konsekvenser for ikke at overholde disse. Kontrakten blev underskrevet af alle gruppemedlemmer. Her bestemte vi også at gruppelederen skulle være Max Festersen Hansen.

Inden vi startede på projektet, udarbejdede vi et Gantt skema, hvor vi planlagde arbejdsdage og tidsfrister. Vi opdaterede løbende skemaet med vores status.

Gantt skema for projekt 1 for multimediedesignerudannelsen på UCL i efteråret 2019
Gantt skema taget kort før punkt 4 i skemaet.

Analyse

Som indgangsvinkel til projektet startede vi med at besøge hjemmesiden individuelt for at danne vores eget indtryk af hjemmesiden.

Usability analyse

Vi udførte 2 usability analyser for at undersøge hjemmesidens brugervenlighed.

Vi vurderede hjemmesiden på baggrund af NUG, Nobanet Usability Guidelines. Denne standard er udviklet på UCL for at vurdere brugervenligheden på hjemmesiden på en overskuelig måde. Vi udførte testen individuelt, og sammensatte derefter vores indsigter, efter åben diskussion. NUG besvarelsen kan ses på google docs, via. dette link.

Yderligere definerede vi 113 regler på baggrund af Nielsens & Tahirs bog Homepage Usability. Disse regler anvendte vi også for at definere brugervenligheden på baagoe.info.

Materiale fra undervisningen

Vi anvendte vores viden om typografi og HTML5 fra undervisningen.

Målgruppeanalyse

For at definere målgrupper for baagoe.info, anvendte vi Minerva-modellen for at finde et passende segment baseret på overensstemmelser mellem interesser og værdier fra segmenterne og baagoe.info.

Fortolkning

Fra analysen fandt vi en lang række af potentielle problemer på hjemmesiden og definerede målgrupper.

Vi begrænsede os til at fokusere på 5 problemer.

  1. Koden på hjemmesiden var forældet i forhold til HTML5 standarden.
  2. Navigationen på hjemmesiden var diskursiv.
  3. Indhold på hjemmesiden var i mange tilfæld manglende eller mangelfuld i forhold til målgruppens interesser.
  4. Typografien på hjemmesiden var i mange tilfælde inkonsistent og overholder ikke de regler vi på MMD havde lært.
  5. Hjemmesiden var ikke udviklet efter principperne for C.R.A.P..

Målgruppen definerede vi som værende primært i det rosa segment og sekundært i det violette.

Eksperimentering

Vi eksperimenterede med personaer, usability test og skitser.

Personaer

På baggrund af den definerede målgruppe, og målgruppeanalysen, udarbejdede vi 2 persona.

  • Grethe. 51 år. Dansker. Gift. Mobilfrisør. Interesseret i historiske romaner og familie. Repræsenterer det rosa segment.
  • Hansi. 47 år. Tysker. Gift. Automekaniker. Interesseret i fodbold, savværk og vandreture. Repræsenterer det violette segment.

Usability test

Vi definerede scenarier på baggrund af personaerne. Hvert scenarie fik også defineret succeskriterier.

Vi startede med at gennemføre en pilottest, hvor vi skuespillede som en persona, for at bekræfte at testen potentielt kunne virke i praksis. Vi rettede testen til på baggrund af resultaterne herfra.

Vi ønskede at gennemføre en test for den eksisterende side, og efterfølgende prototypen i alle vigtige stadier. Vi nåede dog kun at gennemføre testen på den eksisterende side for en person der matchede Grethe personaen.

Skitsering (Sketching)

Vi tegnede skitser for alle sider vi ønskede at redesigne. Det endte med at dække alle eksisterende sider.

Skitserne blev tegnet på et whiteboard.

På baggrund af resultaterne fra usability test rettede vi skitserne til.

Udvikling

Eksperimenteringen gav os indsigterne vi endte med at bruge som baggrund for redesignet. Herefter blev designet udviklet.

Redesign

Link til redesign: https://tinyurl.com/y4ze5l7x.

Design forslag til en ny forside på baagoe.info.
Design forslag til en ny forside på baagoe.info.

Rapport

Download rapport.

Rapporten er udviklet i Adobe Indesign. Se den herunder:

Klient-rapportV5