Projekt 4 – Brugergrænseflade og digitalt indhold
d. 22 / 04 / 2025
Projektbeskrivelse
Målet med projekt 4 var at skabe en løsning, der taler direkte til unge mellem 20 og 25 år og gør det mere motiverende og overskueligt for dem at støtte en god sag. Det kunne være ved at blive frivillig, donere penge eller hjælpe til på andre måder, der føles relevante og meningsfulde for dem. Vi ville gerne gøre det nemmere for dem at tage det første skridt og vise, at det ikke kræver så meget at gøre en forskel.
Kick-off
Gennemgik lærerne opgavbeskrivelsen, på alle de vigtige ting vi skulle videre omkring projekt 4. Vi skulle starte med at kigge på vores team kontrakt, og fordi vi havde arbejdet sammen før, hentede vi vores gamle kontrakt og opdaterede den.
Anna lavede et SCRUM-board i Figma, så vi kunne holde overblik over opgaverne. Hun havde lavet 3 Sprints med “to do”, “in progress” and “done” i. Det vil give os et meget bedre overskud til at følge med i hvor langt vi er kommet i projektet.
jeg lavede en kalender/tidsplan inden i SCRUM-fanen i Figma, hvor vi kunne ligge hvor vi tænkte tingene skulle være færdige.
Pernille lavede et delt Google-dokument med forskellige faner, hvor vi samlede idéer, krav til rapporten og tidlige skitser til løsninger. Vi lavede en fane som hed tjekliste og krav til projekt, hvor vi i løbet vil tjekke det af vi fik lavet.

Ideudvikling
Vi begyndte med at snakke om, hvilke organisationer vi kunne kontakte. Vi havde nogle forskellige forslag, men vi blev hurtigt enige om at prøve Dyreværnet. Vi skrev en mail til dem for at høre, om vi kunne komme til interview eller på besøg, men desværre vil de desværre ikke være en del af, da de sagde at de fik rigtig mange anmodning omkring lignende projekt of ikke havde tid.
Det satte os lidt i et dilemma. Skulle vi fortsætte uden adgang til nogen direkte kontaktperson og interview, eller finde en ny organisation?
Vi kontaktede Pernille (PKC) for vejledning, og hun foreslog, at vi fandt en organisation, hvor vi kunne få en rigtig kontakt. Pernille nævnte Inges Kattehjem, fordi hun selv har adopteret katte fra dem før, og hun havde en lille kendskab til organisationen.
Amalie skrev en præsentationsmail om os og projektet. De svarede hurtigt og foreslog, at vi kunne ringe og uddybe. Så vi ringede og talte med Sidsel, og vi fik hurtigt sat et møde op til torsdag i samme uge.
Interview hos Inges-Kattehjem
d. 20 / 03 / 2025
Jeg havde lavet en plakat med en QR-kode, der linkede til et spørgeskema om unges engagement i frivilligt arbejde og donationer. Derudover havde vi også forberedt nogle spørgsmål, så vi havde noget at tage udgangspunkt i. Interviewet var semistruktureret, så der var også plads til at snakke mere frit og stille opfølgende spørgsmål alt efter, hvad der kom frem undervejs og hele gruppen kunne byde ind, samtalen flyd rimelig godt.
Under interviewet fik vi en masse brugbar information om, hvordan de arbejder, hvordan de rekrutterer frivillige, og hvad donationerne egentlig går til. Vi fandt også ud af, at afdelingen i Odense slet ikke er særlig aktive på sociale medier, de har først for nyligt oprettet en Facebook-side, som bliver drevet af to frivillige. De virkede til at være meget nysgerrig omkring vores opgave, Det åbnede op for nogle fede muligheder for os at arbejde videre med, og vi sluttede af med en aftale om, at vi gerne måtte sende dem vores prototype, når vi kom længere i processen.

Planlægning
Efter vi havde interviewet Inges-kattehjem. Gik vi i gang med idéerne og fik hurtigt styr på planlægningen. For at lære mere om målgruppen lavede vi et spørgeskema, som vi både hængte op fysisk og delte i forskellige Discord-servere. Vi lod det køre lidt tid, så vi kunne nå at få nogle svar, før vi begyndte at analysere og bruge resultaterne i vores videre arbejde.
Derudover lavede vi også en risikovurdering og en interessentanalyse for at få et bedre overblik over, hvad vi skulle være opmærksomme på. Det gav os blandt andet indblik i, hvordan det kunne påvirke projektet, hvis nogen i gruppen ikke kunne deltag aktivt.
Wireframes


Vi kiggede grundigt på Inges Kattehjems hjemmeside for at finde ud af, hvor nemt det egentlig er at blive frivillig, donere eller bare støtte dem generelt. Det vi hurtigt lagde mærke til var, at der manglede en tydelig Call to Action. Muligheden for at blive frivillig var gemt væk midt på siden, og donationsknappen lå helt nede i footeren og når man endelig klikkede på den, kom man ind på en lidt kedelig side, der ikke rigtig fangede interessen og som nok gøre det lidt svære at holde på vores målgruppes (unge 20-25) opmærksomhed.
Med det i baghovedet og ud fra vores egne lo-fi, besluttede vi at lave en brugertest for at se, om vores idéer måske kunne være mere tiltalende for målgruppen. Pernille lavede en think-aloud test, og noget af det første brugeren sagde var: “Det ligner en indkøbsliste” så der vidste vi, at der var plads til forbedring.
Vi begyndte at researche, hvordan større organisationer byggede deres hjemmesider op. Mange af dem havde samme stil: stort billede, stor overskrift og en tydelig donationsboks, efterfulgt af cases eller mere info længere nede. Den stil samlede vi i et moodboard i Figma, som vi brugte som udgangspunkt til vores hi-fi design. Det gav os hurtigt et bedre overblik og en klarere retning for, hvad vi ville med siden.
Midtvejspitch og feedback
Efter midtvejspitch fik feedback fra klassen og Andrea(VICI). Vi fik feedback undervejs, både fra spørgeskemaer, brugertests og de online vejledninger med vores undervisere. Det har hjulpet os med at holde kursen og sikre, at vi forstod opgaven rigtigt.
Vi fremlagde det, vi havde indtil da. Vi valgte selv, hvad vi ville have feedback på bl.a. vores research, lo-fi, hi-fi og netnografi. Vi havde svært ved at lave netnografi, da Inges Kattehjem ikke er aktive på SoMe, men vi fik rådet at kigge på en konkurrent i stedet, så vi valgte Dyrenes Beskyttelse.
Efter midtvejspitchen gik vi videre med projektet, og da vi nåede til kodningen, satte Pernille vores GitHub-repo op.
Prototype og forbedringer
Vi kom hurtigt i gang med kodningsdelen, hvor vi alle samarbejdede om HTML og CSS til undersiden. JavaScript-delen var derimod individuel, og her fordelte vi opgaverne mellem os:
- Joy lavede en burger-menu til mobilversionen.
- Anna lavede et slideshow.
- Pernille lavede en regnemaskine til donationsboksen, som kunne udregne, hvor mange katte man støttede afhængigt af det valgte beløb.
- Amalie lavede en scroll-up-knap, der førte brugeren tilbage til toppen af siden, når man havde scrollet ned. Derudover lavede hun også en drop-down-menu.
Det største problem med min burgermenu det var faktisk bare og få alting fra pensumkravene ind i min burgermenu. Og at i starten da vi var i gang med at lave den så ville burgermenuen ikke åbne, så det tog noget tid for at finde ud af hvordan jeg skulle gøre det så at den ville åbne. Da vi var ved at være færdige med opgaven der fandt i ud af at jeg manglede Arrays og Kontrolstruktur (loops). Man var så heldig at kunne få hjælp af Pernille og hendes mand. Jeg kan godt lide den måde de forklarer mig det på i en langsom og stille rolig tempo som jeg kan forstå, så jeg ved hvad jeg laver.
Da vi skulle filme JavaScript-videoen blev jeg nødt til at tage den om og om igen, flere gange. Da jeg vil Javascript gøre mig så nervøs og jeg hader at høre min egen stemme igen og igen i videoer.
forbedringer til hjemmesiden Mockup:

Akademisk Rapport
Vi brugte flere dage på at fokusere intenst på at færdiggøre vores tredje Sprint i forbindelse med den akademiske rapport.
som altid tog Pernille initiativ til at sætte forsiden op og gøre siderne klar i InDesign, hvilket var dejlig så vi havde styr på det. Så vi bare kunne begynde at skrive så meget som muligt inde i den der akademiskrapport. De følgende dage gik primært med at skrive på de forskellige dele hver især, hjælpe hinanden med at rette til, tilføje indhold og læse korrektur. ens vi andre dobbelttjekkede, at vi havde opfyldt alle krav.
Inden vi gik på “påskeferie”, havde vi hver især lavet nogle brugertests (think-aloud) på vores prototype. Hvor vi fik noget feedback hvor vi fandt de vigtigste punkter til forbedringer af hjemmesiden.
At sektionerne for donation og frivillige måske burde adskilles mere f.eks. ved at give dem hver deres side og tydeligere CTA. Det besluttede vi at lave et mockup af i Figma, kunne vise de ændringer, vi ville foretage udfra det feedback vi har fået.
Efter en grundig gennemgang af kravene til projektet og tjekkede vores tjekliste for sidste gang, kunne vi indsætte det hele i InDesign og alle linksene var sat ind på forsiden af InDesign. then we’re finally done! 🙂
Refleksion
Under projektet lærte vi vigtigheden af at arbejde iterativt og brugerdrevet. Design Thinking hjalp os med at holde fokus på målgruppen, og SCRUM gav struktur i vores samarbejde. Det var især brugbart at teste løbende og få feedback direkte fra brugerne.
Vi oplevede udfordringer med tid og koordinering i perioder, men vores rollefordeling og SCRUM-board hjalp os med at holde styr på opgaverne.
Hvis vi havde haft mere tid, ville vi gerne have lavet flere brugertests og dybere analyse af vores SoMe-indhold. Overordnet set har vi lært meget om både kodning and javascript, digital design, samarbejde og målgruppeforståelse.
Selvom der var nogle forskellige udfordringer igennem dette projektet og moments hvor at opgaven føles umuligt eller uoverskueligt. Så synes jeg vi kom fint nok i mål. Jeg føler selv at jeg har lært meget mere omkring Javascript, end jeg troede jeg ville.
But i do still have a looooooong long long way to go. It’s a progress slowly(very slowly), but surely

