Café Ulla Terkelsen London

Headless CMS gennem WordPress

PC med billede af Ulla Terkelsen Londons nye hjemmeside PC med billede af Ulla Terkelsen Londons nye hjemmeside Tablet med billede af Ulla Terkelsen Londons nye hjemmeside

Casebeskrivelse

Udfordring: Hjemmesidens digitale rum afspejler ikke det fysiske rum i caféen. Navigation/wayfinding udfordres af flere placeringer på grænsefladen. Der mangler indhold på siden om caféen og dens tilbud, som i øvrigt kan gøres dynamisk ved anvendelse af WordPress som CMS.

Løsning: En ny hjemmeside med fokus på informationsarkitektur, navigation/wayfinding, UI/UX-design og administrering af indhold gennem WordPress som Headless CMS.

Research

Brugerundersøgelse

Segmentering

Vi foretog en segmentering med det formål at at afgrænse brugergruppen og opnå en forståelse for dem. Vi fandt statistiske data der underbygger segmenteringen, heriblandt at de adfærdsmæssige motiver i høj grad kan omhandle ønsket om en oplevelse, social samvær og/eller madkultur. Af psykografiske data fandt vi, at caféer også anvendes med det formål at opnå en specifik livsstil og værdisæt. Nedenstående graf illustrerer en brugerundersøgelse fra Landbrug og Fødevarer, at 42% af de adspurgte tog på café i anledning af socialt samvær. Efterfulgt af 38% af de adspurgte, der ikke tog på café for nogen konkret anledning. Hermed understreges det at motivet for cafébesøg i høj grad skyldes det sociale aspekt, men også med et uformelt
formål uden nogen særlig anledning. Vi fandt også, at der var stor variation i hvornår caféer anvendes, hvortil caféens brugskontekst variere mere end fx på restauranter.

Statestik fra Landbrug og Fødevarer, 2027. Undersøgelse af motivet for cafébesøg Undersøgelse fra Landbrug og Fødevarer. Statistik over hvornår på dagen brugere anvender cafe, restaurant og hoteller.
Dataindsamling og analyse

Vi foretog en kvalitativ brugerundersøgelse med det formål at undersøge enkeltpersoners oplevelse af at tage på café, samt beslutningsgrundlaget herfor. Interviewene blev foretaget enkeltvis med afsæt i en semistruktureret interviewguide og materialet blev analyseret vha. en tematisering.
De fundne temaer blev efterfølgende sammenlignet, hvorfra der blev fundet fælles temaer på tværs af datasættet, hhv. god stemning, behagelige omgivelser og socialt samvær.

Fælles temaer fra tematisk analyse af interviews, Caféundersøgelse

Informations arkitektur

Content Inventory

Ved udarbejdelse af et content inventory, skabte vi et overblik over det eksisterende indhold på Ulla T.'s hjemmeside og sociale medier. Vi fandt, at hjemmesiden var mangelfuld ift. informationsgivende indhold om åbningstider, caféens identitet og branding, tilbud og events.

Content Inventory over Ulla Terkelsen Londons Hjemmeside
Affinity Diagram

For at organisere eksisterende indholdselementer og nyt indhold, sorteres det i et affinity diagram og relevante grupperinger tildeltes klassifikationsskemaer.

Affinity diagram over indhold på Ulla Terkelsen Londons nye site
Content Sitemap

Den indholdsmæssige struktur og organisering visualiseres vha. et content sitemap. Vi udarbejdede i forlængelse heraf, også en plan for hjemmesidens interne navigation/wayfinding. Vi får dannet 8 grupperinger i den globale navigation og danner en undergruppering fra ét punkt, for at inddele menukortet i mindre undersider således at brugeren nemt kan finde frem til specifikt indhold.

Content Sitemap over Ulla Terkelsen Londons nye hjemmeside
Øvrig analyse

Indledningsvist i designfasen har vi udarbejdet et moodboard som værktøj til at indramme den stemning som hjemmesiden skal bære præg af. Vi udvælger en farvepalette som vi vurderer er essentiel for caféens identitet, og finder inspiration fra caféens fysiske omgivelser til at skabe et uformel, energisk og legende rum. Vi anvender samtidig de fundne temaer fra vores brugerundersøgelse, med det formål at indkapsle "god stemning", "socialt samvær" og "behagelige omgivelser".

Moodboard Ulla Terkelsen London

Design

Skitsering

Vi udarbejder skitser og inddrager relevante UI-patterns, eksempelvis en "book bord-knap" til forsiden, samt et Logo i øverste venstre hjørne. For at tydeliggøre caféens domæne på hjemmesiden, tilføjer vi en beskrivende titel først i viewboardet for at højne det visuelle hierarki. Vi tilføjer også et forklarende tekstafsnit med et understøttende billede, med det formål at beskrive caféen og hvad den tilbyder.

Skitse over Ulla Terkelsen Londons nye hjemmeside Skitse over Ulla Terkelsen Londons nye hjemmeside

Wireframes

Wireframes blev udarbejdet med afsæt i skitserne. I processen anvendte vi Atomic Design til opsætning og strukturering af elementer, gestaltprincipperne og Dan Browns otte principper for informationsarkitektur.

wireframe forside Ulla Terkelsen London Wireframe 2 - Ulla Terkelsen London wireframe 3 - Ulla Terkelsen London

Mock-up

Ved udarbejdelse af high-fidelity mock-ups gjorde vi brug af ”the principle of focused navigation” til at udarbejde en emne orienteret navigationsbar og med en timely navigation der referere til undermenuen. For at give brugerne enkelte handlingsmuligheder, anvendes ”the principle of choices” til at placere en ”book bord knap” og til focused entrypoints på forsiden. Derudover anvendes ”the principle of exemplars” til at illustrere indhold på hjemmesiden gennem et lille billede og tekst afsnit.

forside til Ulla Terkelsen Londons hjemmeside aktuelt side på Ulla Terkelsen Londons nye hjemmeside kontaktside på Ulla Terkelsen Londons nye hjemmeside

Brugertest

Der foretages bruger tests af mock-up versionen via. en 5-second test og en Think-Aloud test. Think-Aloud testen havde til formål at indsamle viden om informationssøgning, navigation/wayfinding og brugervenlighed. Der blev udført 5 test hvorfra der blev udarbejdet en Usability-Test-Report. Der blev identificeret 4 problemer, illustreret i nedenstående figur.

usability test report 1 Ulla Terkelsen London

5-second testen havde til formål at undersøge de besøgendes førstehåndsindtryk når de besøger forsiden. Testpersonerne blev stillet følgende spørgsmål: - Beskriv hvad hjemmesiden handler om? - Hvad kan du huske fra billedet? - Var der nogle elementer som du særligt lagde mærke til? - Hvordan fik designet dig til at føle? Resultaterne fra testen kommer fra et datasæt af 46 personer. Et uddrag af de vigtigste resultater med højeste svarprocenter er illustreret i nedenstående figur.

5 second test resultater

På baggrund af resultaterne fra brugertestene, blev der foretaget en ny iteration (af prototyping) mhp. at foretage rettelser af prototypen og teste om rettelserne har haft en positiv effekt. Der blev foretaget en ny brugertest med en Think-Aloud test, og datasættet blev også analyseret i en Instant Data Analysis og skrevet i en Usability Test Report. Se nedenstående figur.

usability test report 2

Create

Produktion af løsningen

Prototypen blev herefter produceret med kodning af HTML, CSS, JavaScript og ved anvendelse af WordPress som et Headless CMS. Vi anvender desuden Github til versionsstyring og til at samarbejde på tværs i teamet.
Vi installere ACF som plug-in til WordPress således at vi kan opbygge skabeloner der gør det nemmere for redaktører af caféen at indsætte indholdet på hjemmesiden. I forlængelse heraf skriver vi vejledende afsnit beskrivelser og placeholder eksempler. Vi klargør WordPress til at rumme indhold om caféens menukort, og begivenheder. I tillæg til menukortet opretter vi 3 taxonomier, der gør det muligt at kategorisere elementet i enten drikkevarer, fødevarer eller diæt præferencer.

field groups ulla eksempel på indsættelse af drikkevarer Ulla Wordpress eksempel js-kode ulla

Det færdige produkt

Gå til hjemmesiden hér link icon

Nysgerrig efter at se mine andre cases?

Så gå tilbage til portfolio oversigten ved at klikke på nedenstående knap.

Portfolio oversigt