Projekt 5: Grocott Fysioterapi
I P5-eksamensprojektet fik vi til opgave at udarbejde en digital indholdsstrategi og et omfattende redesign for en eksisterende virksomhed med fokus på at optimere brugerrejsen og skabe konvertering.
Vores gruppe valgte at arbejde med Grocott Fysioterapi – en fysioterapeutisk klinik, hvor vi identificerede et stort potentiale i at strømline deres digitale tilstedeværelse. Projektet var bygget op omkring en agil arbejdsproces med SCRUM-sprints, hvor vi selv skulle strukturere, planlægge og dokumentere hele forløbet.
Vores endelige aflevering bestod af:
En online prototype
En klientrapport
En procesvideo
En midtvejspitch samt et endeligt eksamensforsvar
Et designsystem i Figma
3 SoMe-produktioner (LinkedIn-opslag, Facebook video og Instagram-karrusel)
En strategisk indholdsstrategi med en operationel contentplan
Har du lyst til at afprøve vores Figma prototype? Så har du mulighed for det her!
Kick-off og projektopstart
I P5-eksamensprojektet arbejdede jeg i gruppe sammen med Sara. Da vi kun var to i teamet, var det afgørende, at vi fra starten mødte ind med et enormt engagement og skabte en ekstremt stram og gennemskuelig struktur for vores forløb.
Derfor havde jeg inden kick-off sørget for at klargøre et google drev til os, hvor vi kunne sørge for at danne os en god struktur med alt samlet. Derudover klargøre jeg gruppekontrakten med mine håb og forventninger samt opsatte vores scrumboard på Trello.
På kick-off-dagen d. 27. april dedikerede vi tiden til at etablere projektets fundament – herunder:
- Risikoanalyse
- Interessantanalyse
- Fordele scrumroller
- Risikoanalyse
For at sikre en professionel projektstyring udarbejdede vi en ekstern projektplan, med et overblik over hvad vi skulle nå i hvilke uger.
Tirsdag d. 28. april startede med et virksomhedsbesøg hos Grocott Fysioterapi. Gennem dialogen med Nicolai fik vi dyb indsigt i klinikkens arbejdsgange og udfordringer. Det blev tydeligt, at brugernes usikkerhed ved valg af behandling samt et uoverskueligt bookingflow var de største barrierer for at vælge klinikken.
Research og indsigt
I dette sprint arbejdede vi intensivt med at forstå målgruppen. Vi kørte en kvantitativ undersøgelse via Google Forms ud i vores netværk for at identificere adfærdsmønstre omkring online booking i sundhedssektoren. Parallelt hermed planlagde vi vores kvalitative research: vi udarbejdede et testscript og kørte Think Aloud-tests af det eksisterende website for at fange brugernes præcise smertepunkter. Vi supplerede dette med deskresearch om tone of voice og en netnografisk undersøgelse af online anmeldelser.
På baggrund af vores transskriptioner og findings udviklede vi vores personaer, som jeg opsatte i Figma og derefter definerede jeg deres User Goals med fokus på bookingeffektivitet. Konceptet og vores idéer begyndte at tage form, og vi afholdt vores Sprint 2 Review for at evaluere vores fremskridt.
Sprint 2
I det næste sprint skulle vi gå fra rå data til konkrete, visuelle løsninger.
Vi mødtes på UCL og kiggede kritisk på den eksisterende hjemmeside side for side. Vi lavede en storstilet idégenerering og tegnede manuelle lo-fi wireframes på whiteboards, som senere blev til hi-fi wireframes i Figma.
Et par dage inden fik jeg en idé til at vi lave et interaktivt bodymap, lidt ligesom Carl-Emil lavede i projekt 4, hvilket vi valgte at gå videre med. Bodymappet skulle have til formål at fjerne unødig støj og i stedet introducere et interaktivt Bodymap på forsiden – en kropsfigur, hvor brugeren kan klikke direkte på det område, hvor smerten sidder, og blive guidet direkte til den rette behandling og et integreret bookingflow.
Mit specifikke bidrag i denne fase: Mens Sara kørte konkurrentanalysen og de sidste surveys i mål, tog jeg ansvaret for at udarbejde en indholdsstrategi, som vi allerede havde en ret klar idé om hvordan skulle være. Jeg udarbejdede en skydeskivemodel til Saras konkurrentanalyse og jeg flettededen sammen med vores indholdsstrategi, som jeg satte pænt op i Adobe InDesign, så der var en klar rød tråd.
Sideløbende begyndte jeg at overføre vores analoge whiteboard-skitser til digitale, mobile-first wireframes i Figma. Jeg researchede på grid-layouts, knapstørrelser og skrifttyper for at gøre Figma klar til vores hi-fi wireframes og mockups.
Da wireframesne næsten var færdige, begyndte Sara at arbejde på copywritingen, så den var på plads til når vi skulle kode.
Vi var enige om at den tone of voice, som vi ønskede at bruge var en blanding af nærhed og professionalisme blandet med evidensbaseret viden.
Koncept, designfundament og Midtvejspitch
I dette sprint smeltede flere af vores faser sammen, og vi måtte arbejde meget agilt for at hente elementer på tværs af vores oprindelige sprint-planlægning. Sara arbejdede på copywriting til vores lo-fi wireframes, og vi testede mobil-wireframes af ved hjælp af card sorting for at sikre en intuitiv navigation og visning af forsiden og behandlingssiden.
Mit specifikke bidrag i dette sprint: Jeg arbejdede fokuseret videre i Figma med at udarbejde vores wireframes og tilføjede et udgangspunkt til vores bookingflow.
Samtidig begyndte jeg på opbygningen af vores designsystem. Jeg begyndte at opsætte variabler (til farver, spacing osv.) og koblede dem direkte på vores komponenter og ikoner som vi havde brugt på. Det var her, frustrationerne over programmet nåede sit højdepunkt, da autolayot drillede mig såååå meget!
Men eftersom jeg kom igennem wireframesne, gav det endnu bedre mening, da jeg skulle til mockuppet, hvor jeg fik renset det meste overflødige fra og tilpasset spacing.
Vi havde lige fået vores wireframes på plads, og jeg var påbegyndt vores mockup, da vi skulle til Midtvejspitch. Hele klassen skulle præsentere hvor langt de var d. 12. maj.
Dagen før fik jeg sat en hurtig figma slide op og vi fik øvet os en lille smule – men ikke meget, fordi vi begge havde arbejdet ret intenst de første 2 uger.
Det gik godt, men fokus i feedbacken landede primært på vores præsentationsteknik, frem for selve løsningen, hvilket vi synes var ærgeligt.
Klientfeedback og JavaScript
Onsdag d. 13. maj pitchede vi vores koncept direkte for klinikejeren Nicolai og en erhvervskonsulent fra Kerteminde. Vi havde struktureret vores fremlæggelse om, så klienten var i absolut fokus, og det blev en kæmpe succes! De var megabejstrede – især for vores Bodymap-idé – og vi fik værdifuld feedback om at korte vores tekstsektioner ned på mobilen.
Efter mødet begyndte vi for alvor på front-end kodningen af vores redesign.
Mit specifikke bidrag i kodedelen og SoMe: Mens Sara tog hul på skelettet i html og css, fik jeg kodet mit primære JavaScript-element hjemmefra: den globale navigationslinje og en dynamisk burgermenu. Jeg strukturerede menupunkterne i et array, brugte et loop til at generere elementerne dynamisk i DOM’en og tilføjede event listeners til at styre toggle-funktionen (åben/lukket).
SoMe og Figma
Sideløbende arbejdede jeg videre med desktop-mockups i Figma og startede op for vores SoMe-content baseret på vores indholdsstrategi. Her udviklede jeg et professionelt reklameopslag til LinkedIn samt en visuel billedkarrusel til Instagram, der skulle virke værdiskabende for læseren.
Vi påbegyndte også arbejdet med struktureringen af vores klientrapport.
D. 20. maj, færdiggjorde jeg præsentationen af SoMe-indhold 2 og 3, så det stod knivskarpt til den endelige aflevering. Jeg brugte desuden tid på at kvalitetssikre og rydde op i alle vores filer på Google Drive for at sikre, at mine egne leverancer var 100% opdaterede. Endelig færdiggjorde jeg selve indholdsstrategien med en contentplan, som Sara godkendte.
Medieproduktion og kvalitetskontrol
Torsdag d. 21. maj rykkede vi ind i UCL’s medialab, hvilket blev en utrolig sjov og produktiv dag. Formålet var at skyde alle de nødvendige klip til vores procesvideo. Det at stå i studiet og dokumentere forløbet gav os et godt perspektiv over, hvor meget vi rent faktisk havde nået i løbet af projektet indtil videre.
Samtidig brugte vi dagen på at finpudse og kvalitetssikre detaljer på den interaktive, kodede prototype.
Dagen efter stod i den finpudsnings tegn. Vi foretog en gennemgribende oprydning i Figma, og vores UI-designsystem blev endeligt færdiggjort med alle variable, ikoner og komponenter på plads.
Den kodede prototype blev valideret i koden og lagt live på serveren for første gang, så vi kunne teste, hvordan layoutet opførte sig i et ægte browser-miljø.
Link til vores online prototype her
Jeg fik desuden filmet min personlige JavaScript-kodevideo, hvilket var et intenst og ret stressende øjeblik, fordi der var så mange bolde i luften på én gang. Men da den var på plads, var det en kæmpe lettelse. Vi afsluttede dagen med at tjekke udkastet til klientrapporten igennem og gøre teksterne klar til InDesign.
SoMe 1 - Facebook Story
Lørdag d. 23. maj tog jeg ud for at producere vores sidste SoMe-produktion: en videoreklame formateret som en Facebook Story. Vi havde valgte at vi skulle filme i Langeskov Centeret. Da det var lørdag, var alt desværre lukket, hvilket i første omgang virkede som en udfordring – men det viste sig at være en fordel, da vi fik helt tomme rammer uden forstyrrende elementer til at skyde vores klip. Videoen blev klippet i Premiere Pro, uploadet til YouTube og integreret som et interaktivt bilag.
Søndag d. 24. maj dedikerede vi til Saras JavaScript-video og klientrapporten. Rapporten blev sat op i InDesign med relevante bilag og billeder af vores prototype.
Sprint 4, 5 og 6 Review
Hvor vores første sprints var skarpt adskilte, så vi, at Sprint 4, 5 og 6 i den grad smeltede sammen. Fordi vi kun var to i gruppen, kørte opgaverne med design, kodning, klientrapport og videoproduktion fuldstændig sideløbende. Men på trods af det massive arbejdspres kom vi i mål med alle leverancer på stort set samme tid!
Et konkret problem opstod, da vores klient, Nicolai, ikke havde ressourcerne til at være tilgængelig og deltage direkte i vores content- og billedproduktion. Det tvang os til at tænke hurtigt og finde alternative løsninger uden om klinikken. Vi valgte at supplere med AI-genererede billeder og udnyttede den lukkede klinik i Langeskov Centeret til vores videooptagelser.
Denne udfordring blev en vigtig påmindelse om projektledelsens klassiske dilemma mellem tid, kvalitet og ressourcer. Når virkeligheden ikke matcher planlægningen, må man som digitale designere være omstillingsparate og finde kreative løsninger under tidspres uden at gå på kompromis med det endelige produkt.
Undervejs har statusmøderne på klassen været utrolig givende. De gav os et sundt pejlemærke for vores fremdrift sammenlignet med de andre grupper, og hjalp os med at huske små hængepartier. For ikke at brænde helt ud, valgte vi desuden at skrue tempoet en smule ned i Store Bededags-weekenden for at lade batterierne op, hvilket viste sig at være en rigtig god beslutning for vores samarbejdsdynamik.
Sprint 7 - slutspurten
Mandag d. 26. maj lagde vi de sidste hænder på klientrapporten. For at sikre den bedste brugervenlighed over for klienten valgte vi at integrere og linke til vores indholdsstrategi på tre forskellige måder i dokumentet, så den er let at tilgå.
Vi fik også klippet procesvideoen helt færdig, opdateret vores KWHL-matrix med vores endelige konklusioner og udarbejdet en struktureret testplan til vores allersidste validering.
Se vores procesvideo her!
Dagen efter, d. 27. maj, mødte vi ind til en ren finpudsningsdag. Bilagsoversigten til underviserene blev færdig og selvom vi troede, vi var i mål, opdagede vi hele tiden små ting og detaljer, der lige krævede en sidste rettelse. For os var det vigtigt ikke at springe over, hvor gærdet var lavest; vi ville aflevere et produkt, der var gennemstruktureret, pænt og nydeligt, og som vi kan være 100% stolte af at forsvare.
Vi fik også testet vores online prototype af, som har dannet grundlaget for vores forbedringer, som vi skal arbejde på de næste to uger inden eksamen.
I dag, d. 28. maj, er den absolutte afleveringsdag. Vi har brugt de sidste timer på at skrive dette procesindlæg, rydde op i afleveringsmappen, nummerere bilag og færdiggøre afleveringsdokumentet. Vi har desuden opdateret vores AI-promptdokument og vi tilføjede det sidste teori til metodelisten.
Vi er i mål, alt er downloadet til offline brug, og vi er klar.
Refleksion
Fagligt føler jeg dette projekt har rykket mig enormt som digital designer. Jeg har fået en dybere, praktisk forståelse af, hvordan man bygger et designsystem i Figma. Arbejdet i Figma, især med AutoLayout, samt arbejdet InDesign har givet mig nogle kompetencer, som jeg glæder mig til at arbejde videre på og overføre til fremtidige projekter.
Det, som jeg gerne vil gøre anderledes næste gang, at jeg skal udarbejde jeg skal arbejde med et designsystem, så vil jeg dog definere alle komponenterne til wireframes og mock-uppet på komponent-siden i designsystemet, inden der begyndes at arbejde med disse.
I denne omgang, har jeg desværre ikke kodet så meget, men det kommer jeg til næste år på Frontend. Jeg ønskede selv at have fokus på at med content i denne omgang, men jeg er dog sikker på at jeg har valgt den rigtige studieretning næste år.
Når jeg kigger tilbage på vores proces, er det mest iøjnefaldende optimeringspunkt vores tidsestimering og sprint-overlaps.
Fordi Sara og jeg kun var to personer, faldt vi hurtigt ind i en rytme, hvor vi arbejdede meget selvstændigt på hver vores store ansvarsområder (mig i Figma, generelt overblik, InDesign og med SoMe, og Sara med User Flow, copywriting, videoredigering og kode). Det betød, at Sprint 4, 5 og 6 i realiteten blev til ét langt, flydende sprint. Det skabte en intens slutspurt og betød, at vi i perioder fik arbejdet for meget i individuelt og derefter godkendte hinandens arbejde.
En konkret forbedring til dette næste gang, kunne f.eks. være at bruge WBS som værktøj i vores projektstyring. Det virkede i denne omgang uoverskueligt at skulle beregne tidsetimeringerne ud på delopgaver, når der kan ske forudsigelige ting undervejs, og ting kan tage længere eller kortere tid end forventet – hvilket også var derfor vi i denne omgang har arbejdet udfra SCRUM og KANBAN-metoder.
Alt i alt synes jeg at vi har afleveret et rigtig fint produkt, som vi er stolte af.
Links til produkter:
Lidt ekstra proces billeder!
