I dette projekt skulle vi udvikle en digital brugergrænseflade og producere digitalt indhold for Hesselgaard Glamping. Siden 2023 har stedet tilbudt luksuriøse glampingophold, men ønsker nu at udvide forretningen med en eventdel, hvor den store sal skal danne rammen om workshops, teambuilding og foredrag.

Udfordringen bestod i at tydeliggøre Hesselgaards nye forretningsben og skabe en digital løsning, der præsenterer stedet som et moderne og helhedsorienteret oplevelsessted. Med afsæt i kvalitative brugerundersøgelser skulle vi afdække både målgruppens og projektindehaverens behov for derefter at udvikle et digitalt produkt, der formidler sammenhængen mellem overnatning, events og stedets æstetik.

Projektets overordnede spørgsmål lød:

• Hvordan kan Hesselgaard udvikle en digital tilstedeværelse, der viderefører den visuelle fortælling fra glampingen og samtidig introducerer events som et naturligt og attraktivt nyt ben i forretningen?
• Hvordan kan platformen skabe sammenhæng mellem overnatning, events og design – og samtidig gøre det nemt for brugerne at finde information, lade sig inspirere og foretage booking eller henvendelse?

Som en del af projektet skulle vi:

• Designe og udvikle en online interaktiv prototype (HTML, CSS og JavaScript).
• Lave individuelle JS-videoer på 3–6 minutter, hvor JavaScript-koden og det relevante pensum demonstreres og forklares.
• Udvikle mindst tre opslag til relevante sociale medier med tilhørende indholdsstrategi.
• Udarbejde et designsystem i Figma.
• Dokumentere processen i en akademisk rapport, der inddrager relevante metoder, teorier og værktøjer.
• Udforme en klientrapport på maks. fire normalsider med henblik på at sælge konceptet til klienten.
• Udvikle en projektplan med blandt andet teamkontrakt, interessent- og risikoanalyse samt SCRUM-board.

Proces

Kick-off og virksomhedsbesøg

Fredag den 14/11 var hele holdet på virksomhedsbesøg hos klienten, Bibi Hesselgaard, på Hesselgaard Glamping. Besøget begyndte med et langt oplæg, hvor Bibi præsenterede sine ønsker, værdier og de udfordringer, hun står overfor i forbindelse med udvidelsen af Hesselgaard. Hun lagde vægt på, at stedet først og fremmest skal opleves som et fristed, hvor natur, ro og nærvær er i centrum, og at den digitale løsning skal afspejle netop denne stemning.

For at få et så nuanceret indtryk som muligt valgte vi at gennemføre en åben observation, hvor hvert gruppemedlem tog individuelle feltnoter. Noterne omfattede både stedets atmosfære og stemning samt de informationer, Bibi delte med os under oplægget og rundvisningen.

I forhold til glampingen fortalte Bibi, at hendes mål er at tiltrække gæster, der søger et langsommere tempo. Hun understregede, at stedet ikke skal signalere high-end luksus, men derimod være “lækkert, men jordnært”. En central udfordring er, at størstedelen af bookinger i dag sker gennem Booking.com og andre eksterne platforme. Hun ønsker derfor at øge antallet af direkte bookinger. Samtidig ønsker hun at motivere gæsterne til at booke længere ophold og derfor er planen på sigt at justere prisstrukturen, så længere ophold bliver mere attraktive.

Hun fortalte også, at målgruppen spænder over både danske og udenlandske gæster, særligt hollændere, og mange benytter glampingen som en del af en større rejserute mellem København og Legoland. Teltene har kapacitet til 4-6 personer og tiltrækker primært familier med mindre børn. Gæsterne er generelt forventningsfulde, villige til at betale for kvalitet og forventer en høj grad af service.

Organisering af projektet

Efter virksomhedsbesøget lagde vi fundamentet for projektets videre forløb ved at samle de indledende indsigter i et fællesdokument og strukturere vores arbejdsproces. Vi udarbejdede og underskrev en teamkontrakt, hvor vi fastlagde roller, mødefrekvenser, arbejdsindsats og procedurer for konflikthåndtering. Kontrakten fungerede som en forpligtende ramme, der både sikrede forventningsafstemning og minimerede risikoen for misforståelser i det fremadrettede samarbejde.

Projektet blev styret med SCRUM som metodisk ramme, hvilket gav mulighed for en iterativ udviklingsproces, hvor feedback fra målgruppen, vejledere og klienten kunne implementeres løbende. I forbindelse med rollefordelingen blev Dicte udpeget som Scrum Master, mens Tiffany og jeg blev Developers. Vi valgte ikke at udpege en decideret Product Owner, da SCRUM i dette projekt blev brugt som en praktisk ramme til at skabe struktur i processen frem for en en fuldt implementeret arbejdsmetode, som man ser i professionelle udviklingsteams. I et undervisningsprojekt som dette fungerer hverken klienten eller underviserne som reelle Product Owners, fordi de ikke deltager aktivt i backlog refinement eller sprintplanlægningen. Rollen blev derfor fordelt mellem os, så vi i fællesskab tog ansvar for at udvikle og prioritere backloggen samt beslutte, hvilke funktioner der var vigtigst i de enkelte sprints. Denne rollefordeling gav mening i et lille team, hvor samarbejdet var tæt, og hvor vi alle havde indsigt i både krav, tekniske muligheder og tidsrammen for projektet.

Efterfølgende udarbejdede vi en interessentanalyse og en risikoanalyse for at skabe overblik over projektets eksterne og interne påvirkninger. Interessentanalysen (billede 1) gav os et overblik over de aktører, der har indflydelse på eller bliver påvirket af projektet. Vi vurderede både deres forventede fordele og potentielle ulemper og definerede tiltag, der kunne sikre opbakning og accept. Risikoanalysen (billede 2) gjorde det muligt at identificere potentielle risici, vurdere hvor sandsynlige de var, og hvilke konsekvenser de kunne få. På baggrund af dette udarbejdede vi nødplaner for de risici, der havde den højeste risikofaktor.

Den efterfølgende dag udarbejdede jeg en målformulering baseret på SMART-princippet, hvilket sikrede, at vores projektmål blev både specifikt, målbart, attraktivt, relevant og tidsbestemt (se projektplan). På baggrund af SMART-målet og erfaringerne fra projekt 4 udarbejdede jeg en overordnet projektplan, der kunne justeres løbende, da projektet arbejder agilt og ikke efter vandfaldsmodellen. Her brugte jeg WBS (Work Breakdown Structure) til at nedbryde opgaverne i mindre, håndterbare dele, hvilket gjorde det lettere at skabe overblik og estimere tidsforbruget på de enkelte delopgaver.

Mandag den 17. november mødtes gruppen for at arbejde videre på projektet. I overensstemmelse med SCRUM startede vi med at udarbejde en product backlog, der samlede alle potentielle opgaver i projektet. Derefter udviklede vi et KWHL-diagram, hvor vi samlede vores eksisterende viden om både glampingdelen og den nye eventdel, identificerede de spørgsmål vi manglede svar på, og afklarede hvordan vi kunne tilegne os den nødvendige viden (billede 3). På baggrund af KWHL-diagrammet udvidede vi vores product backlog med nye opgaver. Første udgave af backloggen kan ses på billede 4.

Efter udvidelsen af product backloggen udvalgte vi de opgaver, der skulle indgå i sprint 1, og samlede dem i en sprint backlog. Derefter oprettede vi et SCRUM-board, der gjorde det muligt at visualisere arbejdsprocessen og løbende følge status og fremdrift i sprintet, hvilket sikrede et fælles overblik i det daglige arbejde (billede 5). Vi delte projektperioden op i fire sprints á cirka syv dage. Ved starten af hvert sprint foretog vi en fælles sprint planning, hvor vi udvalgte de opgaver, der var mest relevante i forhold til projektets fremdrift og tidsramme. For at sikre kontinuerlig koordinering af arbejdet gennemførte vi Daily Scrum hver morgen, hvor vi fulgte op på fremdriften mod sprint goal og justerede planen efter behov. Efter hvert sprint gennemførte vi både et internt sprint review og en Scrum Retrospective. I et professionelt SCRUM-setup ville klienten normalt deltage i sprint reviewet, men da dette er et undervisningsprojekt, og fordi vi selv varetog Product Owner-rollen, blev både sprint review og den efterfølgende evaluering af processen afholdt internt i teamet.

Dataindsamling (Sprint 1)

Dataindsamlingen tog udgangspunkt i de videnshuller, vi havde identificeret tidligere i processen, så vi kunne få svar på de spørgsmål, der var vigtigst for at komme videre med projektet.

Vi indledte sprintet med at indsamle sekundær data gennem desk research. Dicte undersøgte, hvilke typer events og workshops der udbydes rundt omkring i landet for at skabe et overblik over events, der med fordel kan integreres i Hesselgaards kommende eventdel. Formålet var at udarbejde en liste af idéer, der senere skulle kvalificeres gennem interviews med den primære målgruppe. Samtidig indsamlede hun viden om børnefamiliers digitale vaner for at forstå, hvordan denne målgruppe typisk navigerer online, og hvilke sociale medier de primært bruger.

Tiffany gennemførte en konkurrentanalyse med fokus på både glampingdestinationer og aktører inden for eventafholdelse. Formålet var at skabe overblik over, hvordan Hesselgaard positionerer sig på markedet, og hvor der findes muligheder for at differentiere sig. Derudover lavede hun visual research på UI-tendenser inden for booking- og eventbranchen. Dette gjorde det muligt at identificere de visuelle greb, navigationsmønstre og funktioner, som brugerne allerede er vant til at møde i lignende systemer. Den viden kan styrke en intuitiv brugeroplevelse, fordi løsningen dermed bygger på genkendelige principper. Dette bygger på idéen om ekstern konsistens, hvor velkendte mønstre gør det lettere for brugeren at finde rundt og forstå interfacet uden unødvendig læring.

Jeg undersøgte generelle UI-trends og tendenser for at få den nødvendige viden til at træffe designvalg, der understøtter en moderne, overskuelig og brugervenlig løsning, der samtidig lever op til aktuelle standarder for tilgængelighed. De vigtigste indsigter er opsummeret her:

• Mobil og responsivitet: Mobile-first er standard. Navigation, booking og checkout skal være hurtige, intuitive og optimeret til touch. Designet skal fungere perfekt på alle skærmstørrelser.
• Micro-interaktioner: Små, diskrete animationer giver feedback, gør oplevelsen mere levende og hjælper brugeren med at forstå systemets respons.
• Layouttendenser: Moderne webshops bruger fleksible grids, bento-strukturer og asymmetri for at skabe variation, karakter og naturlig visuel guidning.
• Enkelhed og hierarki: Minimalistiske, luftige layouts med klare call-to-actions, konsekvent typografi og stærke hero-elementer styrker både overblik og visuel identitet.
• Tilgængelighed: Fokus på kontraster, læsbarhed, store klikområder og tastaturnavigation. A11Y og WCAG fungerer som centrale retningslinjer.

Efter jeg havde undersøgt de aktuelle UI-trends og tendenser, udarbejdede jeg en semistrukturerede interviewguide til klienten og den primære målgruppe, der blev defineret på baggrund af vores feltnoter fra virksomhedsbesøget. Guiden skulle hjælpe os med at indsamle relevante kvalitative data, der kunne supplere vores desk research. Guiden rettet mod målgruppen havde til formål at give indblik i, hvad der gør et glampingophold attraktivt for familier med børn, hvilke behov og forventninger de har til både ophold og events, samt hvordan de typisk søger og booker oplevelser online. Guiden til klienten skulle give en dybere forståelse af hendes behov, ønsker og forretningsmodel, så vi kunne tilpasse vores løsning bedst muligt.

De to semistrukturerede interviews kan ses her:

Mens Dicte rekrutterede interviewpersoner og foretog interviews, lavede jeg et kvantitativt spørgeskema for at undersøge, hvordan forældre bruger sociale medier, og hvilken type indhold de foretrækker, når de søger inspiration til ferie og oplevelser. Vi valgte et kvantitativt spørgeskema, fordi metoden giver mulighed for at indsamle data fra flere respondenter på kort tid og dermed opnå et bredere empirisk grundlag, end kvalitative metoder alene kan tilbyde. Samtidig giver kvantitative data et godt supplement til vores kvalitative indsigter, fordi de gør det muligt at identificere mønstre og tendenser blandt flere forældre. Ved at kombinere kvalitative og kvantitative data kan vi både forstå de mere nuancerede oplevelser fra interviewene og samtidig se, hvilke tendenser, der går igen blandt flere familier.

Tiffany stod for at distribuere spørgeskemaet i relevante onlinefællesskaber, hvor målgruppen er aktiv, mens jeg arbejdede på at udforme en struktureret plan for den akademiske rapport og indholdsstrategien. Jeg havde fokus på at skabe en tydelig rød tråd i begge dokumenter og gøre det nemt at følge tankegangen fra start til slut. Først lavede jeg en oversigt over, hvordan hvert afsnit skulle bygges op, hvilke pointer der skulle belyses, og hvordan de forskellige dele kunne forbindes. Oversigten blev efterfølgende justeret på baggrund af feedback og vejledning fra Pernille, så både argumentation og struktur fremstod logiske og sammenhængende.

Efterfølgende designede Tiffany en flyer med en QR-kode, der linkede direkte til spørgeskemaet. Dicte og jeg placerede dem på udvalgte offentlige steder, hvor vi med stor sandsynlighed kunne ramme børnefamilier. Jeg satte blandt andet flyers op ved Odense Banegård og i Billund Lufthavn (billede 6). Begge steder bruges dagligt af familier, der enten er på vej på ferie eller befinder sig i en rejseaktivitet, der indebærer ventetid. I sådanne situationer har forældre ofte både tid og overskud til at scanne en QR-kode og besvare et kort spørgeskema. Denne måde at distribuere spørgeskemaet på gjorde det muligt at indsamle data fra netop de forældre, der prioriterer rejser og oplevelser, og som dermed matcher Hesselgaards primære målgruppe.

Til sidst gennemførte Dicte og Tiffany et semistruktureret interview med klienten, Bibi, baseret på den interviewguide, jeg havde udarbejdet. Mens de stod for interviewet, samlede jeg al den eksisterende viden om virksomheden i en Business Model Canva. Modellen blev udarbejdet med afsæt i vores desk research og feltnoter og fungerede som et visuelt overblik over Hesselgaards nuværende forretningsmæssige grundlag. Efter interviewet opdaterede jeg modellen, så den også afspejlede de nye indsigter fra samtalen med Bibi (billede 7).

For at skabe et endnu tydeligere overblik over Hesselgaards forretningsmodel og værdiskabelse udarbejdede jeg en Golden Circle (billede 8) og placerede virksomheden på værditrappen. Dette tydeliggjorde virksomhedens formål (Why), arbejdsmetoder (How) og indsatser (What) samt, hvordan Hesselgaard skaber værdi for gæsterne på forskellige niveauer.

Målgruppeanalyse og personaudvikling (Sprint 2)

Mens jeg arbejdede med Golden Circle og værditrappen, samlede Dicte al vores kvalitative data i et Affinity Diagram (billede 9). Formålet var at skabe et overblik over interviewpersonernes holdninger, behov og oplevelser. Ved at gruppere udsagn og observationer i temaer blev det tydeligere, hvilke mønstre der gik igen, og hvilke emner der fyldte mest for målgruppen. På baggrund af diagrammet identificerede Dicte de overordnede temaer (billede 10), som jeg efterfølgende brugte til at udvikle en primær persona kaldet Sarah (billede 11). Kombinationen af disse temaer og interviewet med Bibi gjorde det muligt hurtigt at tydeliggøre Sarahs motivation, behov, udfordringer og mål i forbindelse med et glampingophold. For at forstå hendes digitale adfærd og sociale medievaner analyserede jeg data fra vores kvantitative spørgeskema. Dette gav et bedre grundlag for at vurdere, hvor og hvordan vi bedst kan nå målgruppen på sociale medier.

Da personaen var færdig, oversatte jeg hendes oplevelsesmål til konkrete brugermål for løsningen. Formålet var at tydeliggøre, hvordan hjemmesiden kan understøtte Sarahs mål i forbindelse med et glampingophold. Brugermålene beskrev derfor, at produktet skulle gøre det muligt for hende:

• at finde et glampingophold, der passer til familiens behov,
• at få et klart overblik over faciliteter, omgivelser og eventmuligheder,
• at tilføje events uden komplikationer,
• at booke opholdet hurtigt, enkelt og trygt,
• at planlægge opholdet efter et visuelt, gennemskueligt ugeprogram,
• at føle sig tryg gennem billeder, information og anmeldelser,
• samt at kunne kontakte værterne hurtigt og nemt, hvis der opstår spørgsmål.

Disse brugermål omsatte jeg derefter til otte user stories, der skaber en direkte forbindelse mellem personaens behov og de funktioner, som løsningen skal tilbyde. Dermed fungerer de som et bindeled mellem personaens behov og de designvalg, der former løsningen:

1. Som familieorienteret gæst vil jeg kunne se billeder af telte, fællesområder og faciliteter for at sikre, at stedet er komfortabelt og børnevenligt.
2. Som familieorienteret gæst vil jeg kunne tilføje events til mit ophold for at få rolige oplevelser, der passer til hele familien.
3. Som familieorienteret gæst vil jeg kunne booke opholdet hurtigt og sikkert for at spare tid og undgå stress.
4. Som familieorienteret gæst vil jeg kunne se et visuelt ugeprogram for at vælge en uge, der passer til familiens interesser.
5. Som familieorienteret gæst vil jeg kunne få et klart overblik over priser og eventtilvalg for at undgå overraskelser.
6. Som familieorienteret gæst vil jeg kunne læse anmeldelser for at føle mig tryg ved stedet.
7. Som familieorienteret gæst vil jeg kunne planlægge opholdet hjemmefra med et overblik over aktiviteter og faciliteter for at sikre en god oplevelse for hele familien.
8. Som familieorienteret gæst vil jeg kunne finde kontaktoplysninger hurtigt for at få svar på spørgsmål og føle mig tryg ved opholdet.

Konceptudvikling & designretning (Sprint 2)

Da brugermål og user stories var på plads, lavede vi en fælles brainstorm over konceptet. Her samlede vi vores indsigter fra målgruppen, klienten og markedet til en samlet retning for løsningen:

Konceptet tager udgangspunkt i Hesselgaards ønske om at integrere rolige events i glampingoplevelsen og bygger på en fast ugerytme med rolige eftermiddagsevents som yoga, klang, meditation og mindfulness, udviklet i samarbejde med lokale instruktører. Disse aktiviteter bliver en integreret del af opholdet og kan tilføjes med en lille merpris, hvilket gør det lettere for familier at planlægge deres ferie ud fra et visuelt ugeprogram på hjemmesiden. Når eventfaciliteterne ikke bruges til de faste aktiviteter, kan de bookes af virksomheder og private, der ønsker et roligt og naturnært miljø til workshops, foredrag, møder og mindre retreats. Dette åbner for et sekundært forretningsområde målrettet små virksomheder, der ønsker pakkeløsninger med både mødelokale og glampingovernatning.

Da konceptet var defineret, brugte Tiffany mine user stories til at udarbejde user flows for hjemmesiden (billede 13). User flows visualiserer de handlinger, brugeren skal igennem for at nå sine mål, og er en vigtig del af designprocessen, fordi de giver et klart overblik over brugerens vej gennem systemet. Ved at kortlægge flowet tidligt kan man hurtigt opdage steder, hvor der kan opstå forvirring, unødvendige trin eller manglende information. Det giver et godt grundlag for at sikre, at det efterfølgende UI-design bliver logisk, intuitivt og understøtter en sammenhængende brugerrejse.

Samtidig havde Dicte udarbejdet en konkurrentanalyse af tre glampingdestinationer. På baggrund af konkurrentanalysen, målgruppeanalysen og analysen af Hesselgaards forretningsmodel udviklede jeg en Content Sweet Spot-model (billede 14). I modellen kortlagde jeg målgruppens vigtigste behov, Hesselgaards styrker og konkurrenternes værditilbud. Ved at undersøge krydsfeltet mellem de tre områder blev det tydeligt, hvilke budskaber og typer indhold der med størst sandsynlighed ville skabe værdi i Hesselgaards kommunikation og på deres digitale platforme

Med afsæt i Content Sweet Spot-modellen og vores personas digitale medievaner lagde Dicte og jeg fundamentet for tre stykker indhold til Hesselgaards sociale medier. Her havde vi fokus på at udvikle content, der både appellerede til personaens præferencer og lå inden for sweet spottet ved at fremhæve Hesselgaards unikke styrker. Det betød, at indholdet skulle være visuelt indbydende gennem smukke billeder, rolige videooptagelser og autentiske fortællinger fra klientens hverdag på Hesselgaard. Derudover arbejdede vi bevidst med teori og metoder fra undervisningen, herunder brugen af en tydelig krog og relevante fortællemodeller, så indholdet kunne skabe opmærksomhed og engagement hos målgruppen. Vi havde samtidig et mål om, at kommunikationen skulle bevæge sig op på trin 4 i Astrid Haugs værditrappe ved at tydeliggøre, hvordan Hesselgaard skaber konkret værdi for familier, der søger ro, nærvær og naturoplevelser.

Da fundamentet for contentproduktionen var på plads, fortsatte Dicte arbejdet med planlægningen af de tre opslag. Samtidig arbejdede jeg videre med forberedelsen af vores pitch til midtvejspitchen, mens Tiffany udviklede de første wireframes til Hesselgaards hjemmeside.

Midtvejspitch

Den 28. november afsluttede vi sprint 2 med en midtvejspitch, hvor vi præsenterede vores foreløbige arbejde for klassen og argumenterede for vores valg af teori og metoder. Samtidig fik vi mulighed for at se de andre gruppers projekter, stille spørgsmål og give feedback. Det var en virkelig inspirerende dag, og jeg tog flere gode pointer med mig videre.

Feedbacken fra klassen og underviseren gjorde det tydeligt, at vi blandt andet skal være bedre til at forklare vores designvalg og arbejde mere ensartet med grid i layoutet. Derudover fremhævede vores underviser, hvor vigtigt det er at arbejde med mobile-first og holde fokus på centrale tilgængelighedsprincipper fra A11Y Project-tjeklisten, så løsningen bliver mere brugervenlig og tilgængelig.

En anden vigtig pointe var at sikre tydelige call to actions allerede i hero-sektionen, så brugeren hurtigt kan se, hvad de kan gøre herfra. Vi blev også opmærksomme på, at vi skal kunne begrunde vores valg af målgruppe mere præcist og arbejde efter KISS-princippet for at holde designet enkelt og intuitivt.

Experimentation (sprint 3)

Efter midtvejspitchen opdaterede vi vores product backlog med nye opgaver, der var opstået på baggrund af feedbacken. Derefter planlagde vi sprint 3, hvor vi fordelte ansvaret mellem os og lagde en foreløbig plan for det videre arbejde. 

Med afsæt i det moodboard, Dicte og Tiffany havde udarbejdet i sprint 2, begyndte jeg at udvikle første udkast til en style tile for Hesselgaards hjemmeside. Vi brugte derefter styletilen som grundlag for at videreudvikle vores wireframes til mockups, så vi kunne teste og justere designet. Samtidig begyndte jeg at skrive metodeafsnittet til den akademiske rapport. 

I forbindelse med udviklingen af mockups arbejdede vi også med copywriting. Her tog vi udgangspunkt i den tone of voice, vi tidligere havde defineret, så sproget blev varmt, jordnært og imødekommende. Målet var, at teksterne skulle virke tryghedsskabende og afspejle Hesselgaards personlige og familiære udtryk. Derudover arbejdede vi bevidst med at fremhæve Hesselgaards WHY på både forsiden og “om os”-siden. På forsiden brugte vi 5P-approachen, hvor vi i første sektion præsenterede premise, promise og picture for hurtigt at tydeliggøre Hesselgaards værditilbud. I næste sektion viste vi proof gennem gæsteanmeldelser, og afslutningsvis afsluttede vi med push i form af en tydelig CTA, der leder brugeren videre til booking (billede 15).

Da vi havde færdiggjort vores mockup af hjemmesiden, videreudviklede vi den til en klikbar prototype (billede 16-18) og udarbejdede en testplan og et testscript til think-aloud-testen. Vi tog udgangspunkt i de user stories, vi tidligere havde udviklet, for at skabe realistiske og målrettede scenarier, som testpersonerne skulle navigere igennem. Formålet var at undersøge, om prototypen understøttede brugerens behov, og om de centrale flows, herunder booking og visning af events, fungerede intuitivt. Derudover ønskede vi at undersøge, om vores designvalg reelt styrede brugerrejsen, som vi havde intention om.

Til testen formulerede vi seks taskbaserede scenarier, der alle tog afsæt i personaens livssituation og motivationsfaktorer. Scenarierne fokuserede blandt andet på, hvordan brugeren finder booking-siden, tilgår oplysninger om faciliteterne, orienterer sig i ugeprogrammet og finder kontaktoplysninger. Disse scenarier gav os mulighed for at observere, hvor brugeren tøvede, blev i tvivl eller manglede information.

Resultaterne fra brugertestene blev efterfølgende samlet i et fælles dokument med vores “findings”, hvor alle observationer, udfordringer og reaktioner fra testpersonerne blev gennemgået. På baggrund af dette prioriterede vi problemerne efter, hvilke der var mest kritiske for brugeroplevelsen, og hvilke der kunne betegnes som mindre væsentlige. Denne prioritering dannede grundlag for den efterfølgende iteration af prototypen, hvor vi havde særligt fokus på følgende:

• Der opstod forvirring omkring kategorierne i menulinjen. Testpersonerne forstod ikke, hvad “om opholdet” og “om området” dækkede, og kategorien “events” blev misforstået som større arrangementer som musikfestivaler i stedet for de små workshops som yoga og mindfulness.
• Knapperne på forsiden skabte forvirring. Især en knap blev tolket som en dropdown-pil frem for en almindelig knap, der skulle lede videre til “om os”-siden.
• Testpersonerne havde svært ved at adskille glampingteltene fra hinanden. Det var ikke tydeligt nok, at hvert telt havde sit eget tema, hvilket ejeren ellers lægger stor vægt på.
• Nogle sider indeholdt for meget information. Specielt siderne om Hesselgaards faciliteter og om området føltes overvældende for testpersonerne.
• Billederne af teltene på bookingsiden blev ikke opfattet som klikbare, og det var uklart, at man skulle klikke på dem for at booke. Samtidig føltes bookingsiden overfyldt med information, som allerede var præsenteret på “om opholdet”-siden.

For at mindske forvirringen omkring menulinjen justerede vi navngivningen af kategorierne, så de blev mere konkrete og sigende for indholdet. “Om opholdet” blev ændret til “telte”, “Om området” til “oplev Hindsholm”, og “events” blev omdøbt til “aktiviteter og workshops” (billede 19). På den måde blev det tydeligere for brugeren, hvad de kunne forvente at finde under de enkelte menupunkter, og misforståelsen af events som større arrangementer blev reduceret.

Forvirringen omkring knappen på forsiden blev løst ved at ændre dens udtryk. Den oprindelige ikonknap med en pil blev udskiftet med en almindelig pilleformet knap med teksten “læs mere”, så det blev tydeligt, at der var tale om en aktiv knap, der førte brugeren videre til “om os”-siden (billede 20).

Da testpersonerne havde svært ved at adskille glampingteltene fra hinanden, arbejdede jeg med at tydeliggøre deres individuelle temaer. De tre telte, Aqua, Terra og Silva, fik hver deres farve og ikon, som visuelt understøttede deres tema. Aqua blev markeret med blå nuancer og et ikon med bølger, Terra med rødbrune nuancer og et bjergikon, og Silva med grønne nuancer og et træikon. Tekstelementer og bookingknap blev tilpasset de samme farver, så forskellene blev tydelige på tværs af designet (billede 21, sektion 2-4).

For at håndtere ”information overload” på visse sider arbejdede vi med at forenkle indholdet. Dicte reducerede antallet af attraktioner på siden om området, så indholdet blev mere overskueligt (billede 22). Samtidig gjorde jeg informationen om faciliteter mere overskuelig ved at gemme de mere detaljerede beskrivelser bag ikoner, som først blev vist, når brugeren aktivt trykkede på dem (billede 21, sektion 5).

Endelig arbejdede vi med at tydeliggøre, at billederne af teltene på bookingsiden var klikbare. Dette gjorde vi ved at tilføje en hover-effekt, så det visuelt blev klart, at billederne fungerede som interaktive elementer. Samtidig fjernede vi gentagende og detaljerede beskrivelser, der allerede fandtes på siden “om opholdet”, for at gøre bookingsiden mere enkel og overskuelig (billede 23).

Efter justeringerne af prototypen lagde vi en plan for den efterfølgende kodning, hvor vi fordelte de forskellige dele af løsningen mellem os ud fra vores kompetencer. Samtidig begyndte Tiffany og jeg at opbygge et designsystem, så vi sikrede en ensartet brug af farver, typografi, knapper og komponenter på tværs af løsningen. 

Indholdsproduktion (sprint 3)

Fredag den 5. december kørte vi til Hesselgaard for at producere foto- og videomateriale til hjemmesiden og de tre planlagte opslag til sociale medier. Forud for optagedagen havde vi udarbejdet en struktureret plan for, hvilke motiver og stemninger der skulle indfanges, samt hvilket materiale der skulle anvendes til de forskellige produktioner. Vi lånte desuden relevant udstyr fra MediaLab, herunder kamera, stativ, lysudstyr og trådløst mikrofonsæt, for at sikre en stabil og professionel produktion.

Ved ankomsten til Hesselgaard fordelte vi opgaverne mellem os for at udnytte tiden bedst muligt og sikre, at alle nødvendige optagelser blev gennemført. Dicte arbejdede primært med optagelse af levende billeder i naturen i form af cinemagraphs samt stillbilleder til en billedkarussel, der skulle vise Hesselgaards værditilbud og styrker. Samtidig gik Tiffany rundt og optog B-roll-materiale i form af stemningsbilleder af gårddyr, omgivelser og hyggelige detaljer, der kunne anvendes på tværs af website og videoindhold.

Under optagelserne havde vi fokus på rolige bevægelser, godt lys og autentiske situationer for at understøtte den stemning, nærvær og fordybelse, der er central for Hesselgaards identitet. Den klare rollefordeling gjorde det muligt for os at arbejde effektivt og målrettet med de forskellige produktionstyper uden at gå på kompromis med kvaliteten.

En blandet landhandel af designsystem, kode, rapportskrivning og postproduktion (sprint 4)

I Sprint 4 havde vi fokus på at samle alle de løse ender og færdiggøre de produkter, der skulle være klar til aflevering. Mens Dicte arbejdede i postproduktion med videoerne, havde Tiffany og jeg primært fokus på kodningen af hjemmesiden. Tiffany oprettede et fælles repository, der blev delt med hele gruppen, og stod for den grundlæggende opsætning af HTML og CSS. For at sikre, at vi ikke overskrev hinandens koder, arbejdede vi i hver vores branch, hvor vi kunne kode individuelt og efterfølgende samle løsningen.

I forhold til JavaScript var mit primære fokus at udvikle karussel-slideren med kundeanmeldelser. For at sikre en grundlæggende forståelse af opbygningen startede jeg med en researchfase, hvor jeg så flere tutorials på YouTube og læste dokumentation om HTML, CSS og JavaScript. Først derefter begyndte jeg at kode den egentlige løsning.

Jeg startede med at opbygge HTML-strukturen for karussellen. Jeg placerede review-boxen (<div id=”reviewBox”>) centralt, omgivet af venstre- og højrepile (<div id=”btnLeft”> og <div id=”btnRight”>) samt en container til prikkerne (<div id=”dotsContainer”>). Det var vigtigt, at review-boxen var tom ved start, da JavaScript senere skulle indsætte indholdet dynamisk ud fra arrayet med anmeldelser (billede 24, l. 80-104).

I CSS fokuserede jeg på styling af både review-boxen, pile og dots. Review-boxen blev designet med flexbox for at sikre, at tekst og navne stod pænt i kolonne med passende afstand mellem elementerne. Pile blev roteret korrekt, så de pegede i hver sin retning, og dots fik en “aktiv state”, der ændrer farve, når den tilhørende anmeldelse vises (billede 25, l. 60-102).

Derefter gik jeg videre til JavaScript, hvor jeg oprettede et array med anmeldelser. Hver anmeldelse er et objekt med tre properties: text, name og time. Disse anvendes til at generere indholdet dynamisk i karussellen. Til at holde styr på, hvilken anmeldelse der vises, anvendte jeg en variabel, currentIndex, der fungerer som reference til det aktive element i arrayet (billede 26, l. 7-31).

Efterfølgende hentede jeg de nødvendige elementer fra DOM’en ved hjælp af getElementById og getElementsByClassName. Review-boksen og pileknapperne blev hentet med getElementById, da disse elementer hver især er unikke og kun forekommer én gang i dokumentet. Dots blev derimod hentet med getElementsByClassName, da der er flere dots med samme klasse. Dette gjorde det muligt at manipulere både review-boksen, pileknapperne og de tilhørende dots via JavaScript (billede 26, l. 34-37).

For at opdatere indholdet i review-boksen har jeg lavet funktionen updateReviewBox() (billede 27, l. 40-46). Funktionen gør to ting:

• Den finder den anmeldelse, som skal vises lige nu, ved hjælp af currentIndex.
• Den sætter anmeldelsens tekst, navn og tidspunkt ind i HTML’en ved hjælp af template literals. Template literals skrives med backticks (`), og ${} fortæller JavaScript, at den skal hente værdien fra en variabel i steden for bare at skrive teksten som almindelig tekst. Uden ${} ville browseren kun skrive “review.text” som almindelig tekst.

På den måde kan JavaScript automatisk vise den korrekte anmeldelse, hver gang currentIndex ændres, uden at jeg behøver at ændre HTML manuelt.

I samme funktion opdateres dots også. Her anvendes et for-loop, der først gennemløber alle dots og fjerner den aktive klasse. Herefter tilføjes den aktive klasse til den dot, der svarer til currentIndex, så brugeren visuelt kan se, hvilken anmeldelse der vises (billede 27, l. 47-52).

Forklaring af for-loopet:

• let i = 0; fortæller at loopet starter med det første dot i samlingen.
• i < dots.length; gør at loopet fortsætter, så længe i er mindre end antallet af dots.
• i++ lægger 1 til i efter hvert gennemløb, så vi går videre til næste dot.
• dots[i].classList.remove(“active”); fjerner den aktive klasse fra hver dot, så ingen er aktive, når loopet er færdigt.

For at gøre karussellen interaktiv lavede jeg funktioner til at navigere mellem anmeldelserne ved hjælp af pile: nextReview() og previousReview() (billede 27, l. 55-71). Her anvendte jeg simple operatorer (currentIndex++, currentIndex–) og kontrolstrukturer (if/else) for at sikre, at karussellen automatisk går tilbage til første anmeldelse, når man når slutningen og omvendt.

Endelig tilføjede jeg event listeners til pile og dots, så brugeren kan navigere mellem anmeldelserne på flere forskellige måder (billede 27, l. 74-83).

• Pileknapperne (btnRight og btnLeft) får hver deres event listener: når brugeren klikker på højre-pilen, kaldes funktionen nextReview(), der viser den næste anmeldelse, og når brugeren klikker på venstre-pilen, kaldes funktionen previousReview(), der viser den forrige anmeldelse.
• Dots får også event listeners, men her bruges et for-loop, fordi der er flere dots. For hver dot tilføjes en listener, der aktiveres ved klik. Inde i listeneren sættes currentIndex til dot’ens position, så karussellen springer direkte til den valgte anmeldelse. Til sidst kaldes updateReviewBox(), der opdaterer selve anmeldelsen og markerer den korrekte dot som aktiv.

På denne måde opfylder koden alle pensumkrav: arrays, objekter, funktioner, variable scope, events, simple operatorer, kontrolstruktur og for-loop. Undervejs fik jeg løbende sparring og vejledning fra Tiffany, hvilket hjalp med at styrke forståelsen af JavaScript og sikre, at løsningen opfyldte kravene ift. pensum. Resultatet er en fuldt funktionel, dynamisk karussel-slider, hvor anmeldelser vises i et card, navigation kan ske med pile og dots, og alle elementer er genereret ud fra et array i JavaScript (billede 28).

Afslutningsvis samlede Tiffany alle vores individuelle branches til én fælles løsning og stod for den endelige sammensmeltning af koden. I den forbindelse blev både HTML og CSS valideret ved hjælp af W3Schools’ validator (Jigsaw) for at sikre, at koden levede op til gældende standarder og var uden fejl. Herefter blev hjemmesiden gjort online. Parallelt med den tekniske færdiggørelse arbejdede vi med at færdiggøre rapporten, indholdsstrategien og klientrapporten, ligesom de sidste justeringer på designsystemet blev foretaget. I den forbindelse opsatte jeg også rapporterne i InDesign, hvor jeg forsøgte at skabe et ensartet og visuelt overskueligt udtryk (billede 29-30). Ved opsætningen af den akademiske rapport havde jeg særligt fokus på, at den levede op til de gældende formalia og fremstod stringent i sin struktur. Det betød blandt andet, at al tekst blev alignet korrekt, og at der var en tydelig konsistens mellem rapportens forskellige afsnit og sider. Klientrapporten greb jeg an på en lidt anden måde, hvor det primære mål var at gøre materialet visuelt indbydende og let at skimme. Derfor fik den også et mere legende og dynamisk udtryk, der gjorde den indbydende og overskuelig for klienten. I forhold til indholdet kunne jeg godt have ønsket lidt mere argumentation for vores anbefalinger med kobling til teori. Det er dog en balancegang, da rapporten også skal være let at forstå for klienten og ikke overvælde med faglige termer.

Sprint 4 fungerede dermed som den samlende fase, hvor alle projektets dele blev afsluttet og forbundet til én samlet og færdig løsning. Den færdige løsning kan findes på forsiden af den akademiske rapport under afsnittet “Resultat”. Her har jeg også placeret et link til den interaktive prototype.

Resultat

Akademisk rapport med links til alle produktioner på forsiden:

Team12_UCL_F2025 (uden bilag)Download

Klientrapport:

KlientrapportDownload

Interaktiv prototype:

https://projekt5.flipdesign.dk

Reflektion

Siden projekt 4 har jeg fået en langt bedre forståelse for, hvordan SCRUM kan bruges som et praktisk værktøj i iterative udviklingsprocesser. Tidligere oplevede jeg metoden som en tidskrævende ramme, der kun fungerer teoretisk, men i dette projekt blev det tydeligt, at SCRUM skaber en reel struktur i komplekse arbejdsforløb, fordi opgaverne hele tiden nedbrydes, prioriteres og tilpasses i takt med, at vores viden udviklede sig. Metoden var særlig brugbar i de perioder, hvor flere aktiviteter foregik parallelt, og hvor opgaverne skulle koordineres på tværs af gruppen. SCRUM-boardet gav et visuelt overblik, der gjorde det lettere at navigere i aktiviteterne og overskue projektet. Jeg var også særlig glad for vores Daily Scrum. De korte morgenmøder fungerede som et samlende holdepunkt, hvor vi fik afstemt, hvad vi hver især arbejdede med, hvilke udfordringer vi stod overfor, og hvad der havde betydning for projektets fremdrift. Når hvert medlem sad med forskellige backlog items, gjorde Daily Scrum en stor forskel for at undgå misforståelser og sikre klare forventninger til dagens arbejde. For mig personligt skabte det en ro i processen, fordi jeg hele tiden havde en tydelig fornemmelse af, at gruppen bevægede sig i samme retning, selvom vi arbejdede med vidt forskellige opgaver.

I forbindelse med dataindsamlingen i sprint 1 arbejdede vi meget bevidst med valg af metoder, og her var overvejelsen mellem individuelle interviews og fokusgrupper særlig central. Som skrevet i reflektionen under projekt 4, kan fokusgrupper skabe dybere indsigt, fordi deltagerne inspirerer hinanden og ofte nuancerer deres udsagn i takt med, at de hører andres erfaringer. Det kan give adgang til en bredere forståelse af fælles holdninger og motivationsfaktorer i en målgruppe. Dog er fokusgrupper sårbare over for konformitetspres, der kan få respondenter til at moderere deres ærlige holdninger for ikke at skille sig ud. Jeg forestiller mig, at nogle deltagere kan være mere tilbøjelige til at tale end andre, og at de mere tilbageholdende ofte kun deler dét, der virker socialt acceptabelt i den konkrete gruppe. For at undgå dette, valgte vi at indsamle data gennem flere individuelle interviews, hvor respondenterne kunne tale frit om alt fra rejsevaner til digitale bookingløsninger uden frygt for at skille sig ud. Det kræver selvfølgelig, at intervieweren formår at skabe et trygt rum, men det er jeg slet ikke i tvivl om, at Dicte lykkedes med 😉

For at supplere de kvalitative indsigter valgte vi at udvikle et kvantitativt spørgeskema, der kunne indsamle data fra et større antal forældre. Som nævnt tidligere valgte jeg bevidst at placere QR-koderne i Billund Lufthavn og på Odense Banegård. Begge steder fungerer som naturlige opsamlingspunkter for familier, der rejser eller er på vej til en oplevelse. 

Placeringen gav derfor adgang til en del af målgruppen, der både er rejselysten og oplevelsessøgende, hvilket i denne sammenhæng var en fordel. Selvom placeringerne udelukker familier, der rejser sjældnere, mener jeg ikke, at det er et problem, da Hesselgaard netop har fokus på de familier, der prioriterer oplevelser højt. Dog skal det nævnes, at dataindsamlingen fandt sted uden for skolernes ferieperioder, hvor der generelt er færre rejsende familier, hvilket kan have påvirket antallet af besvarelser.

I forhold til personaudviklingen valgte vi at arbejde med én primær persona, fordi klienten tydeligt havde defineret familier med børn i skolealderen som sin vigtigste målgruppe. Både interviews og spørgeskema blev derfor designet specifikt omkring denne gruppe.

I løbet af processen overvejede jeg, om vi burde udvikle en sekundær persona målrettet virksomhedsejere, da eventfaciliteterne også kan bookes af mindre virksomheder. Selvom det umiddelbart kunne styrke designarbejdet at have en persona, der repræsenterede dette forretningsben, valgte vi at begrænse os til én primær persona for at fastholde fokus på den målgruppe, vi havde data på. Virksomhedsejere adskiller sig markant fra familier både i motivation, behov og digitale vaner, og vi havde ikke indsamlet data, der kunne understøtte udviklingen af en sekundær persona som denne. Denne persona ville derfor være baseret på antagelser frem for empiri, og det ville svække personaens funktion som et pålideligt beslutningsværktøj i designfasen.

Jeg overvejede også, om en sekundær persona kunne være en forælder, der var mere skeptisk over for events eller glamping. En sekundær persona som denne kunne potentielt belyse andre barrierer eller behov, som designet skulle tage højde for. Vores data pegede dog ikke på en tydelig opdelt målgruppe, men snarere på nuancer inden for den samme type bruger. De interviewede forældre delte i høj grad samme overordnede behov for ro, nærvær, tryghed og overskuelighed. Forskellene lå primært i graden af erfaring med glamping og i individuelle præferencer, der ikke ville stille nye krav til designet. En skeptisk persona ville derfor skabe mere støj end værdi i designfasen. Desuden gjorde arbejdet med en enkel velunderbygget persona designprocessen mere fokuseret og overskuelig. 

Først i arbejdet med første iteration af hjemmesidens design blev det tydeligt for mig, at der i praksis findes to forskellige indgangsvinkler inden for den samme målgruppe. Den ene bruger besøger hjemmesiden med udgangspunkt i ønsket om at booke et glampingophold og orienterer sig herefter i de events, der er knyttet til opholdet. Den anden bruger tager derimod udgangspunkt i events, bliver inspireret af aktiviteterne og vælger på den baggrund at booke et ophold.

I vores løsning har vi udelukkende taget højde for den primære indgangsvinkel, hvor glampingopholdet er udgangspunktet, og events fungerer som et tilvalg. Det var et bevidst valg, da denne brugeradfærd stemmer direkte overens med den udviklede persona og vores user stories. Set i bakspejlet kan jeg dog se, at en senere iteration med fordel kunne inkludere den sekundære adfærd, hvor events fungerer som primær indgang. Dette kunne eksempelvis understøttes gennem et selvstændigt eventoverblik med filtreringsmuligheder, hvor brugeren kan sortere efter eventtype (yoga, klang, kreative workshops, børneaktiviteter), målgruppe (børn, voksne, familie), dato og eventuelt aktivitetsniveau. På den måde kunne hjemmesiden i højere grad imødekomme begge brugeradfærd. 

I arbejdet med hjemmesidens design har jeg gjort mig mange overvejelser, og selvom jeg er godt tilfreds med resultatet af prototypen, kan jeg også se, at den har brug for flere iterationer for at blive mere tilgængelig og intuitiv for brugerne. Designprocessen har især mindet mig om, hvor vigtigt det er at tænke i klare brugerrejser, der både understøtter klientens mål og de behov, som familierne kommer med. Nogle af siderne rummer lidt for meget information samlet på ét sted, hvilket ikke altid understøttede en intuitiv brugerrejse. For eksempel kan informationsniveauet hurtigt blive omfattende på siden “Aktiviteter og workshops“, når der præsenteres mange events i forlængelse af hinanden uden en tematisk struktur. Her kunne filtre og sorteringsmuligheder være en løsning til at give brugeren kontrol over, hvad de ønsker at se først. Dette understøtter den tidligere refleksion om forskellige indgangsvinkler til indholdet, hvor ikke alle brugere starter rejsen med samme intention.

Derudover ville det være fordelagtigt at arbejde mere med typografi på siderne. Gode typografiske valg kan styre brugerens opmærksomhed, skabe pauser i læsningen og gøre indholdet lettere at overskue. I anden iteration har vi allerede arbejdet med typografien på “Om os” og “Om Hindsholm”, men jeg kan stadig se potentiale for forbedring. Ved at eksperimentere mere med variation i skriftstørrelser, vægt og luft mellem tekstblokke vil læsbarheden kunne styrkes, samtidig med at brugerens kognitive belastning mindskes. Små ikoner eller bedre billeder kan desuden hjælpe brugeren gennem siderne og støtte tekstens pointer uden at ændre på selve indholdet.

Fremadrettet kunne brugertest med reelle brugere give nyttig feedback, der enten kan bekræfte eller udfordre mine antagelser og dermed gøre løsningen endnu stærkere.