Den smagløse Café

Projektmål:

Målet for dette projekt er, at hver gruppe gennemfører en systematisk og grundig heuristisk evalueringog på grundlag heraf udarbejder en re-design samt en klient-rapport.

1)Udfør en heuristisk evaluering (Shneiderman’s 8 Golden Rules)

2)Redegør kort og klart for de væsentligste problemer, som analysen af hjemmesiden har afdækket.

3)Formuler forslag til, hvordan de højest prioriterede problemer kan løses.

4)Vis i form af re-designs af landing page og selvvalgteundersider af hjemmesiden, hvordan gruppen vil implementere de anbefalede løsninger.

5)Udfør en brugertest på jeres løsninger (testplan, test scriptog brugertest).

6)Argumenter for jeres konklusioner og løsninger.

7)Anvend relevante metoderog indsigterbaseret på research til at understøtte udviklingsproces og argumentation for løsninger på de fundne problemer.

Valg af hjemmeside

Vi kiggede rundt på nettet for at finde en hjemmeside vi kunne lave et redesign af. Vi kom frem til “Den Smagløses” hjemmeside.

(Link til den oprindelige hjemmeside) https://densmagloesecafe.dk

Brug af analyser og Brugertests

8 golden rules

Vi bruge også analysen 8 Golden Rules og vi fandt ud af at hjemmesiden ikke var naturlig at navigere rundt i. Ikonerne var genkendelige nok, det var bare ikke et naturligt i forhold til hvad man forventer i forhold til en café. Man kan ikke finde den vigtigste information på forsiden, hvilket er her de fleste bruger vil kigge først. Når en bruger er inde i et menupunkt, kan de ikke se hvor de befinder sig og det er en udfordring for brugeren. Der var ikke meget information på hjemmesiden, hvilket var en udfordring, da brugerne så ikke vidste hvad de skulle kigge på/efter. Vi fandt ud af at knappen ‘find os’  ikke havde noget indhold og åbnede op til en blank side.

C.R.A.P

Vi analyserede hjemmeside med med C.R.A.P analysen i forbindelse med re-design for at identificere stærke og svage punkter. Vi fandt ud af, at visse elementer, såsom kontraster mellem tekst og billeder, kunne forbedres for bedre læsbarhed. På “hoved” siden er der en gentagelse af farver, skrifttyper og ikoner, mens andre sider mangler denne konsistens, hvilket kan forvirre brugere om ejerskab. Der var begrænset tekst på siderne, hvilket gjorde det svært at vurdere elementernes sammenhæng. Under “Om Caféen” er teksten pænt formateret til venstre med passende afstand, men andre elementer, som knapper, var placeret mere midt på skærmen, hvilket kan skabe forvirring. En mere ensartet placering af elementer med passende afstand kunne forbedre brugeroplevelsen.

Målgruppe

Minervamodel

Da vi var inde på caféen observerede en blanding af 18-60-årige, primært stamkunder, der var fortrolige med personalet. De havde et åbnet sind og kreative, fælleskabsøgende, sætter pris på mangfoldighed. Vi placerede dem i det grønne segment og det rosa.

Conzoom-model

Vi valgte at bruge Conzoom-modellen på virksomhed. Conzoom er et segmenteringsværktøj, som bruges til at målrette ens markedsføring. Modellen er opdelt i 9 livsstilsgrupper.

Persona

Brugertest

For at finde frem til det bedst mulige re-design lavede vi en brugertest på 5 forskellige personer. Vi brugte “think-aloud” testen, denne test er især god hvis man skal teste brugeroplevelse styrker og svagheder. I “think aloud” testen får man også et bedre indblik i brugeren tankeprocesser og en bedre forståelse for hvordan de interagerer med produktet man tester.

Herunder kan der læses om nogle af de vigtigste problemstillinger der blev fundet.

Problemstillinger

• Mangel på information
• Information spredt over andre sider.
• Knapperne virker ikke
• Forskellige skrifttyper
• Forskellig designstil
• Manglene Menukort

Mål:

• Vores mål blev at samle den information på én side for at gøre det overskueligt for brugere.
• Holde den røde tråd ved brug af ens skrifttype og størrelse ligeledes samme farver og stil.
• Skabe funktionsdygtige knapper, så brugere kan nå frem til ønsket information alle steder på siden.
• Tage ind til caféen og skrive menukortet af, så der kan komme et menukort med i vores re-design

Wireframes

Vi startede derefter ud med at lave forskellige wireframes hver især. Dette gjorde vi for at få en ide i forhold til looket.

Eksempler på wireframes ses nedenunder

(Nu var vi jo lige begyndt på uddannelsen så jeg tror ikke vi havde helt fat i hvad wireframes er, der er i hvert fald kommet massere af design på allerede. Vi fik massere af information og læring i hovedet, så at holde styr på hvad det hele var, det var faktisk overvældende og nogengange lidt rodet i ens hovede)

Moodboard

Herefter gik vi igang med at lave et moodboard. Dette gjorde vi for at finde stilen til vores redesign.

Styletile

Herefter udarbejdede vi et styletile for at videreudvikle stilen og for at få styr på farvevalg og koder, teksttyper og størrelse. Vi fik også designet menuen.

• Skrifttyper skal være den samme på alle sider, det gælder også for brødtekst, overskrifter og ikoner.
• Holde sig til ens farver på hjemmesiden så den røde tråd holdes.
• Footeren og navbaren skal gå igen på alle sider da dette skaber genkendelighed og en god brugerrejse.
• Ikoner som viser at caféen har er på de sociale medier Facebook og instagram
• Billeder fra caféen er med til at skabe stemning på hjemmesiden og er med til at få cafeens Tone Of Voice frem på hjemmesiden.

Derefter gik vi igang med at lave prototypen.

De fleste dage mødtes vi på skolen men vi havde også hjemmearbejdsdage hvor vi arbejdede sammen over Figma.

Som i kan se så bestod arbejdet nogle dage af at spise snacks og drikke kaffe. Mums!

Vores færdige re-design

Brugertest af re-design 

Vi testede vores redesign af hjemmeside, og testpersonerne havde stort set ingen kritik. Der var små stavefejl som vi fik rettet. Ellers syntes testpersonerne at den var mega fed, nem at bruge, og hurtig til at give vigtig information. Åbningstider og adresse er let tilgængelige, og hjemmesiden matcher godt stemningen på stedet.

Link til re-design: https:https://www.figma.com/proto/tvN42GYBJ31PMbjkuxP8c6/Hi-fi-prototype?page-id=0%3A1&node-id=2-3&starting-point-node-id=2%3A3&mode=design&t=P9zyn5zJ4s69XUMz-1

Klientrapport:

En del af opgavebeskrivelsen gik også ud på at vi skulle skrive en akademisk repport. På dette tidspunkt var vi ret tidspresset. Rose besluttede sig for at tage kampen op med Indesign som rapporten skulle skrives i. Vi ville helst have lavet det sammen men vi lærte at man i Indesign ikke kan lave fællesdokumenter. Vi andre lavede et fælles dokument hvor vi skrev indholdet til rapporten og sendte det til Rose. Herefter rettede vi den igennem sammen både design og indhold.

Fremlægningsdagen

En del af projektbeskrivelsen var også at vi skulle holde et oplæg omkring hele vores re-design projekt for resten af klassen, 3 semestrene var med over computeren. Det blev afholdt nede i auditoriet på skolen. Det var en grænseoverskridende oplevelse og noget der bare skulle overstås, vi var heldigvis allesammen i samme båd. Undervejs kunne man give feedback inde i en Padlet som Andrea havde lavet. Det var mega fedt at få konstruktiv kritik, så man ved hvad man kan gøre bedre til næste gang, det giver en virkelig god faglig udvikling. Jeg var også virkelig imponeret over at der var nogen der stod og fremlæggede alene!

Reflektion af Projekt 1

Selve projektet var virkelig en fed opgave. Personlig synes jeg at det var så tideligt i hele skoleforløbet at jeg var virkelig forvirret over hvad de forskellige modeller var, navne, analyser. LoFi, HiFi og Wireframes var blandet sammen i en stor pærevælding i mit hovede. Det er der jo ikke så meget at sige til!

I forhold til rapporten så fik feedback efterfølgende her lærte vi meget i forhold til opsætningen og den måde man sætter billeder op på.

Det var i hvert fald virkelig lærerigt og en fed oplevelse. Vi havde lidt stress på tilsidst da vi ikke havde tænkt over at vi skulle komprimerer vores filer og det tog lang tid da vi havde enormt store filer fx optagelser af brugertest. Vi fik afleveret og det var så skønt! Dette projekt gav en masse ny læring og faglige udfordringer og hvis jeg skal summere hele op så synes jeg er det var fed oplevelse! Da projektet var overstået havde jeg meget mere styr på termerne.