Projekt 4 – Café Paraplyen
Projektet handlede om at re-designe en eksisterende hjemmeside for en frivillig organisation. Vi valgte selv organisationen, men grupperne blev sammensat af underviserne, ud fra et spørgeskema vi hver især havde udfyldt omkring forventet arbejdsindsats. Projektet blev skudt i gang med en kick-off, hvor vi fik præsenteret opgaven og mulighed for at stille afklarende spørgsmål.
Med udgangspunkt i brugerundersøgelser og faglige metoder udviklede vi en interaktiv prototype, først i Figma og derefter i HTML, CSS og JavaScript, et designsystem i Figma og en indholdsstrategi med tre eksempler på indhold til sociale medier.
Projektet skulle dokumenteres i en klientrapport og et projektgrundlag med scrumboard, interessent- og risikoanalyse samt en gruppekontrakt, som alle medlemmer af gruppen har underskrevet. Derudover har vi udarbejdet en procesvideo.
Research og brugertest
For at sikre at vores løsning tog udgangspunkt i reel viden frem for antagelser, arbejdede vi med både desk research og en række brugercentrerede metoder.
Vi startede med desk research for at forstå Café Paraplyen som organisation, deres nuværende digitale tilstedeværelse og målgruppen – unge mellem 20-25 år. Sideløbende udarbejdede vi en interessentanalyse og en risikoanalyse, som gav os overblik over, hvem projektet berørte, og hvilke udfordringer vi skulle være opmærksomme på undervejs. For at strukturere vores vidensindsamling brugte vi en KWHL-analyse, som hjalp os med at kortlægge, hvad vi vidste, hvad vi ville undersøge, og hvordan vi ville gøre det. Vi satte også konkrete mål for projektet med en SMART-analyse, så vores retning var tydelig fra starten. For at komme tæt på målgruppen gennemførte vi interviews med unge i alderen 20-25 år. Det gav os indsigt i deres motivation, værdier og forhold til frivillighed. Herefter brugte vi card sorting til at forstå, hvordan de intuitivt kategoriserer indhold – et vigtigt input til informationsarkitekturen på den nye hjemmeside.
Vi testede vores prototype med think aloud-tests, hvor deltagerne tænkte højt undervejs, så vi kunne identificere usability-problemer. Desirability testing gav os indsigt i, hvilke følelser og associationer designet vakte – afgørende når målgruppen skal føle sig tiltrukket af at melde sig som frivillig.
Figma, skitser og prototyper
Med research-fasen som fundament gik vi i gang med at udvikle det visuelle udtryk og strukturen for Café Paraplyens nye hjemmeside.
Vi startede med en style tile, hvor vi fastlagde de overordnede designvalg – farver, typografi og visuelle elementer – inden vi begyndte at bygge selve prototypen. Det sikrede en fælles designretning i gruppen.
Herefter udviklede vi en lo-fi prototype, som fokuserede på struktur og layout uden at tage stilling til det visuelle. Det gav os mulighed for hurtigt at afprøve og justere, inden vi investerede tid i det endelige design. På baggrund af lo-fi prototypen og vores testresultater byggede vi en hi-fi prototype i Figma, et realistisk og klikbart design tæt på det færdige produkt. Den hi-fi prototype dannede grundlag for vores mockup, som viste det endelige design i kontekst og gav klienten et konkret billede af løsningen.
Endeligt samlede vi alle designbeslutninger i et designsystem, der dokumenterede komponenter, farver, typografi og spacing. Det sikrede konsistens på tværs af hjemmesiden og gjorde det nemmere at arbejde videre i HTML og CSS.
Contentproduktion
Som en del af projektet skulle vi producere minimum tre contentprodukter målrettet unge frivillige mellem 20-25 år.
Vi producerede en video, der fungerer dobbelt, som et element på Café Paraplyens hjemmeside og som en reel på sociale medier. Videoen er lavet med det formål at engagere og motivere unge til at melde sig som frivillige, og den er tilpasset det korte, visuelle format der performer godt på platforme som Instagram og TikTok.
Derudover lavede vi udkast til Instagram-opslag samt en promovering på Instagram, målrettet vores målgruppe. Indholdet er designet til at skabe opmærksomhed omkring Café Paraplyen og gøre det let og attraktivt for unge at tage det første skridt mod at blive frivillig.
Vores tredje contentprodukt er et kompetencebevis, designet i Adobe Illustrator. Beviset fungerer som et konkret, håndgribeligt udbytte for de frivillige, en slags CV-tilføjelse der dokumenterer, hvilke kompetencer man har opnået gennem sit frivillige arbejde hos Café Paraplyen. Tanken er, at det skal gøre det mere attraktivt at engagere sig, fordi man får noget igen, ikke kun en god oplevelse, men også noget man kan vise frem.
HTML, CSS, Javascript og GitHub
Som en del af projektet skulle vi hver især kode et element til hjemmesiden, der dækkede pensum inden for HTML, CSS og JavaScript. Alt kode blev samlet og versionsstyret via GitHub, så vi kunne arbejde parallelt og følge hinandens udvikling undervejs. Jeg stod for at kode en kontaktformular til Café Paraplyens hjemmeside. Formularen er bygget op med HTML som grundstruktur, hvor jeg oprettede relevante inputfelter til navn, email og besked, samt en submit-knap. Layoutet er stylet med CSS, hvor jeg brugte flexbox til at skabe et responsivt og overskueligt design, der passer ind i hjemmesidens øvrige udtryk.
JavaScript-delen stod for den interaktive funktionalitet. Her arbejdede jeg med DOM-manipulation for at tilgå og styre formularens elementer, og jeg implementerede formularvalidering, så brugeren får feedback, hvis et felt ikke er udfyldt korrekt. Derudover brugte jeg events til at lytte efter brugerens handlinger, fx submit-eventet, arrays og objekter til at håndtere og strukturere data fra formularen.
Koden blev løbende pushet til vores fælles GitHub-repository, hvilket gjorde det muligt at holde styr på ændringer og sikre, at vores individuelle bidrag kunne integreres i det samlede projekt.
Gruppedynamik og reflektion
Gruppen var fra start udfordret i forhold til sygdom, overskud, fravær og kommunikation. Jeg selv var ramt af influenza den første uge, og valgte at blive hjemme for ikke at smitte min gruppe. Men det var svært at komme ind i gruppen efter det, og jeg følte resten af projektet, at jeg haltede bagud, på trods af min gruppes forståelse og empati.
Vi gik fra 5 til 4, da et gruppemedlem meldte sig ud af gruppen, og derefter fra 4 til 3, da en anden stoppede kommunikationen uden varsel. Det har været en hård proces, at komme igennem så stort et projekt med så mange bump på vejen. Vi ønskede til sidst blot at få afleveret, så vi kunne komme videre.
Hvad tager jeg med fra projektet?
Ja, det er faktisk et godt spørgsmål. Jeg føler, at det er det projekt, jeg har lært mindst i fagligt, da der simpelthen ikke har været tid eller plads til læring. Jeg har ikke følt mig dygtig nok til at byde ind med ret meget, men forsøgt at tage de “kedelige” opgaver, som jo i sidste ende også er vigtige. Til gengæld har jeg lært at fungere i en gruppe der langsomt smuldrede, og hvor stemningen til tider har været ubehagelig og bølgerne gået lidt højt. Jeg har formået at holde roen, når andre har været pressede, og på den måde været en hjælp – det er jeg stolt af, når jeg ser tilbage på det.