Projekt 1 – Redesign af hjemmeside
Case: Café Biografen
Gruppe: Lau, Lea, Kaira og Mie
Formål: At skabe en mere brugervenlig og visuelt sammenhængende hjemmeside, der afspejler Café Biografens varme, kulturelle og autentiske identitet.
Projektstart
Vi startede med at udvælge vores case og fik tildelt projektet Redesign af en hjemmeside.
Vi lavede en gruppekontrakt, hvor vi afstemte forventninger, arbejdsmetoder og styrker.
Opgaverne blev fordelt, så alle havde et primært fokusområde, men stadig kunne støtte hinanden.
Oprindeligt havde vi overvejet at vælge Kaffeværkets hjemmeside, da jeg arbejder der, hvilket ville give os mulighed for et reelt samarbejde med ejerne. Dog viste det sig, at der ikke var nok indhold og elementer på hjemmesiden til at kunne lave et meningsfuldt redesign. Derfor valgte vi i stedet Café Biografen som case, hvor der var mere at arbejde med og mulighed for at udvikle et komplet redesign.
Jeg endte også med at lave et komplet redesign af Kaffeværkets hjemmeside som et ekstra projekt. Se det her.
Research og idéfase
Vi overvejede først at arbejde med Kaffeværkets hjemmeside, fordi jeg selv arbejder der og har indsigt i brandet og deres sociale medier. Det gav mulighed for et realistisk redesign, men efter sparring med vores underviser valgte vi at arbejde med Café Biografen, da deres eksisterende hjemmeside havde flere lag af udfordringer, som vi kunne analysere og forbedre.
Vi startede med at undersøge den nuværende hjemmeside, hvor vi identificerede problemer med menustruktur, manglende hierarki og en visuel stil, der ikke afspejlede den atmosfære, caféen har fysisk. Samtidig lavede vi desk research, hvor vi så på caféens sociale medier, menukort og stemning i det fysiske rum, for at forstå deres brandidentitet.
Brugerindsigt
Vi udarbejdede personaer baseret på caféens målgruppe – bl.a. unge studerende, kulturelle gæster og ældre stamkunder.
Herefter gennemførte vi think-aloud brugertests af den eksisterende hjemmeside for at observere, hvordan brugerne navigerede, hvor de blev forvirrede, og hvilke funktioner de savnede.
Testene gav os værdifulde indsigter – især at forsiden oplevedes rodet, menulinjen for lang og at der manglede tydelige call-to-action-knapper.
Citater fra brugertests:
“Forvirring med hensyn til knapper og navigation på siden”
“Hjemmesiden er meget teksttung”
“Ikke samme vibe som den rigtige cafebio. Det passer slet ikke til hjemmesiden! Føles som et stilbrud”
Designfase
Efter analysen begyndte vi at udvikle Style Tiles for at definere den visuelle retning.
Vi ønskede at bevare Café Biografens karakteristiske varme, men samtidig give udtrykket et mere moderne og sammenhængende præg på tværs af platforme.
Farvepaletten blev holdt i varme, jordnære nuancer, inspireret af caféens interiør og menukort – for at skabe genkendelighed og en naturlig forbindelse til det fysiske rum.
Typografien blev valgt med udgangspunkt i de skrifttyper, caféen allerede anvendte på deres menukort.
Wireframes i figma:
Vi byggede derefter en wireframe og senere en klikbar prototype i Figma, hvor vi testede navigation, visuel balance og interaktion. Undervejs modtog vi feedback fra både undervisere og testpersoner, som hjalp os med at justere detaljer som knapper, tekstplacering og hierarki.
Besøg og observation
For bedre at forstå stemningen, tog vi ud og besøgte Café Biografen i Odense.
Det gav os en klar fornemmelse af atmosfæren – duften af kaffe, den varme belysning og den kulturelle stemning.
Det blev et centralt vendepunkt i processen, da vi her for alvor forstod, hvordan vi kunne oversætte den fysiske oplevelse til digitalt design.
Klikbar prototype i Figma:
Brugertests af prototype:
Vi testede vores klikbare prototype og rettede designet til, på baggrund af den feedback vi fik.
Den visuelle identitet af vores redesign:
Det var vigtigt for os, at vi med dette redesign stadig kommunikerede Café Biografens identitet.
Vores opgave har været at lave et redesign af hjemmesiden – ikke et rebrand. Derfor har vi fokuseret på at skabe visuel sammenhæng mellem de grafiske elementer, man møder i caféen, og det udtryk, man nu møder på hjemmesiden. Vi har især taget udgangspunkt i menukortets farver og typografi for at sikre genkendelighed og skabe en naturlig forbindelse mellem det fysiske og digitale univers.
Før – og efter
Reflektion
Jeg har virkelig lært meget af det her projekt.
Først og fremmest hvor vigtigt det er at brugerteste – men endnu vigtigere: at huske rent faktisk at bruge de data, man får ud af det…
Vi lavede brugertests og tog feedbacken med i vores designproces, men jeg kan godt se nu, at vi ikke fik forklaret tydeligt nok hvorfor vi tog de valg, vi gjorde – især i klientrapporten og under pitchen.
Det er helt klart noget, jeg vil have mere fokus på fremover: at kunne argumentere bedre for mine valg og vise den kobling mellem test, analyse og designbeslutninger.