Projekt 5: Grocott Fysioterapi
Procesbeskrivelse
I forbindelse med vores eksamensprojekt på 2. semester har vores gruppe arbejdet med Case 2: Grocott Fysioterapi.
Virksomheden drives af en selvstændig fysioterapeut, som ønsker at gøre det nemmere og mere overskueligt for sine kunder at navigere på websitet og bruge bookingsystemet.
Udfordringen har været at gøre det tydeligere for de besøgende, hvilke specifikke ydelser og behandlinger han tilbyder.
Derudover har der været et behov for at gøre det lettere for kunderne at evaluere deres behandlingsforløb, så han kan bruge feedbacken som værdifuldt indhold på siden, samt at strukturere en contentplan til hans sociale medier.
For at løse denne udfordring har vi foretaget kvalitative brugerundersøgelser for at afdække målgruppens samt ejerens behov. Med udgangspunkt i denne research har vi anvendt semesterets teorier og metoder til at designe og programmere en optimeret digital brugergrænseflade og content til udvalgte sociale medier.
Som en central del af vores løsning har vi udviklet en fungerende, online interaktiv prototype, der er kodet med HTML, CSS og JavaScript.
Du kan se og afprøve vores løsning via dette link:
Vi afgrænsede det til en problemstilling og 3 underspørgsmål:
Problemstilling:
Hvordan kan vi gennem brugercentreret design optimere Grocott Fysioterapis hjemmeside så målgruppen lettere kan navigere, booke og evaluere behandlinger?
Underspørgsmål:
1) Hvordan kan Grocott Fysioterapi tydeliggøre deres ydelser, så kunder nemmere vælger den rette behandling?
2) Hvordan kan Grocott Fysioterapi forbedre website og bookingflow, så flere gennemfører online booking?
3) Hvordan kan Grocott Fysioterapi bruge evalueringer og sociale medier til at styrke tillid og tiltrække flere kunder?
Kick-off
Kick-off dagen den 27. april var dedikeret til at få projektets fundament på plads. Vi startede med en risikoanalyse, hvor vi for hver potentiel udfordring, tekniske risici, tidsplanlægning og samarbejdsdynamikker, definerede sandsynlighed, konsekvens og handlingsplan. Teamkontrakten havde vi udarbejdet og underskrevet dagen inden, hvor vi aftalte forventninger til kommunikation, arbejdstider og konfliktløsning.
Vi opsatte projektdokumentationen i Google Drive og fyldte vores Trello-board med opgaver fra backloggen. Vi fordelte SCRUM-roller, lavede en RACI-matrix og færdiggjorde en interessentanalyse med et magt/interesse-matrix, så vi vidste præcis, hvordan vi skulle kommunikere med “klienter”, Nicolai, projektgruppen og vejledere.
Dagen efter tog vi på virksomhedsbesøg i Langeskov hos Nicolai fra Grocott Fysioterapi, og vi gik derfra med en klar fornemmelse af problemet: Nicolai ønskede en mere moderniseret hjemmeside og flere online bookinger og evalueringer.
Det gav os grundlaget for vores problemformulering:
Hvordan kan vi gennem brugercentreret design optimere Grocott Fysioterapis hjemmeside, så målgruppen lettere kan navigere, booke og evaluere behandlinger?
Tilbage på skolen gik vi i gang med research. Vi sendte et spørgeskema ud via Google Forms og endte med 21 svar. Vi ville supplere med kvalitative interviews for et mere solidt fundament for vores brugerundersøgelse, så vi kørte Think Aloud-tests med 5 brugere på den eksisterende webside. Det vigtigste vi fandt ud af var, at social proof er afgørende, bookingflowet skal være nemt, og sitet virkede generisk og utidssvarende.
Med den data på plads, samt øvrig deskresearch og information fra klienten, definerede vi målgruppen som 25-45 år med to nichegrupper, erhverv og forældre til sportsaktive børn.
Vi udarbejdede to personaer: Christian på 45, en teknisk anlagt erhvervsmand der vil booke online om aftenen, og Maria på 28, en sportsaktiv mor der sætter stor pris på social proof, foretrækker at ringe og vil have hurtig, professionel hjælp til sin søn.
Med personaerne i baghovedet tegnede vi de første wireframes på whiteboards, og det var her idéen til kropskortet opstod. Et interaktivt kort, hvor man trykker der, hvor det gør ondt, og bliver guidet direkte til den rette behandling og booking.
Derfra rykkede vi over i Figma, hvor Channe opbyggede et designsystem med komponenter, ikoner og variabler. Jeg fik skrevet al copywriting til siderne og Channe lavede en cardsorting med 5 testpersoner for at validere strukturen på forsiden, behandlingssiden og navigationen.
Resultatet var positivt og vi endte kun med at justere lidt på rækkefølgen i burgermenuen.
Da mockuppen var på plads, lavede vi et User Flow Chart for at kortlægge brugerens vej gennem sitet.
Vi lavede en konkurrentanalyse med skydeskivemodellen, som vi kogte ned til en samlet indholdsstrategi og contentplan.
Så gik vi i gang med at kode. Channe tog navigationsmenuen og burgermenuen, jeg tog bookingflowet, opdelt i tre trin: vælg behandling, vælg tid, indtast oplysninger.
Kropskortet lavede vi ved at tegne figuren i Photoshop, markere zones i Illustrator, eksportere som SVG og kode direkte på stumperne i VS Code.
Vi fremlagde for klassen til midtvejspitch og bagefter for Nicolai og en erhvervskonsulent, hvor vi fik feedback om at skære ned på tekstmængden på mobil.
Vores procesvideo startede i UCL’s medialab, hvor vi filmede vores sekvenser foran en green screen for at sikre professionelle rammer til videoen.
Selve klippearbejdet tog vi efterfølgende med hjem og jeg udførte post-production i dagene op til afleveringen.
Til vores content-produktion udarbejdede vi tre særskilte elementer til de sociale medier: et målrettet LinkedIn-opslag med en klar Call-to-Action (CTA), en visuel Instagram-karrusel med hjemmeøvelser samt en Facebook Story-video til at finde vej ud til klinikken.
De allersidste dage i projektperioden gik med at kvalitetssikre vores digitale løsning ved at teste den kodede prototype på 5 eksterne brugere samt validere koden. Slutteligt fik vi samlet og færdiggjort klientrapporten i InDesign, samt alle vores bilag i afleveringsmappen.
Refleksion
P5 har været det mest komplekse projekt, jeg har arbejdet med indtil videre, og det er også det, jeg har lært mest af, både fagligt og som del af en gruppe.
Her vil jeg forsøge at være ærlig om, hvad der gik godt, hvad der var svært, og hvad jeg tager med mig videre.
Hvad gik nemt og hvorfor?
Noget af det, der overraskede mig mest positivt, var hvor forholdsvis nemt det gik med personaerne og de første wireframes. Det skyldtes i høj grad, at vi havde lavet et grundigt forarbejde.
Vores Think Aloud-tests og survey gav os et klart billede af, hvem vi designede til og hvad de manglede, så da vi satte os ned med whiteboardsene, vidste jeg faktisk ret præcis, hvad løsningen skulle indeholde.
Cardsortingen bekræftede efterfølgende, at vi var på rette spor, og det var en god oplevelse at få den validering direkte fra brugerne frem for bare at gætte sig frem.
Idéen til kropskortet er et godt eksempel på, hvad der sker, når research og kreativitet mødes på det rette tidspunkt. Det opstod helt organisk, da vi gennemgik Nicolais eksisterende site og stillede os selv spørgsmålet: hvad er den største barriere for brugeren lige nu? Hvad tænker en bruger, når de lander på sådan en hjemmeside? Så vendte vi naturligvis tilbage til vores research og tests. Svaret var entydigt. De ved ikke, hvilken behandling de skal vælge. Kropskortet løser præcis det problem på en intuitiv og visuelt stærk måde, og det er nok det element i projektet, jeg er allermest stolt af.
Hvad var svært?
Det svære i starten var at indsnævre problemfeltet til en skarp problemformulering. Vi havde mange idéer og retninger at gå i, og det tog tid at blive enige om, hvad der var det centrale problem. Det lærte mig, at det er vigtigt at lade empirien tale. I stedet for at beslutte retningen ud fra mavefornemmelse vendte vi tilbage til vores data og lod den guide os.
Rent teknisk var Figmas Autolayout en stor udfordring. Det er et helt fantastisk værktøj i teorien, men i praksis krævede det en hel del tålmodighed at gennemskue logikken.
Der var dage, hvor frustrationen var til at tage og føle på, men vi hjalp hinanden igennem det, og nu bagefter er jeg glad for, at vi holdt fast, fordi wireframesene, mockups og designsystemet gjorde kodningsfasen markant nemmere.
JavaScript og SVG-kropskortet var ligeledes en teknisk mundfuld. Det at tage en figur fra Photoshop, markere zones i Illustrator, eksportere som SVG og kode direkte på stumperne i VS Code er ikke en lineær proces, og der var mange iterationer og fejl undervejs. Men det er netop i de øvelser, man lærer mest, og jeg sidder tilbage med en meget mere konkret forståelse af, hvordan SVG og JavaScript hænger sammen, end jeg havde inden projektet.
Når planen ikke holdt
Vores sprints smeltede i høj grad sammen undervejs. Databehandling, copywriting og wireframing kørte reelt sideløbende, og det gav mere mening at tilpasse planen løbende end at holde fast i en struktur, der ikke passede til virkeligheden.
Som tomandsgruppe er der simpelthen ikke plads til at vente på, at ét spor er færdigt, før man begynder på det næste. Man arbejder parallelt ellers når man ikke i mål.
Den største enkeltudfordring var nok content-produktionen. Vi havde planlagt at filme på klinikken med Nicolai, men hans kalender var måske booket og det kunne ikke lade sig gøre. Her stod vi over for et valg: stresse over det, eller finde en løsning. Vi valgte det sidste. Mens jeg arbejdede på at klippe procesvideoen tog Channe til Langeskov Centeret en lørdag og filmede “Find vej”-videoen til Facebook Story. At centeret tilfældigvis var lukket viste sig at være en fordel, da der var ro til at filme uden forstyrrelser.
Til Instagram-karusellen brugte vi AI-genererede øvelsesbilleder som supplement, men vi reflekterede løbende over, at AI-indhold kan virke mindre autentisk, og valgte bevidst ikke at lade det fylde for meget.
Den balance mellem tid, kvalitet og ressourcer er noget jeg tager med mig som en vigtig erfaring.
Samarbejdet som tomandsgruppe
At arbejde i en tomandsgruppe har sine fordele og ulemper. Kommunikationen er enkel og beslutninger træffes hurtigt, men presset er også større. Der er ingen at gemme sig bag, og hvis én af os kørte fast, mærkede den anden det med det samme. Jeg oplevede undervejs, at der nogle gange blev arbejdet lidt for hurtigt, uden at den anden blev inddraget tidligt nok. Det tog vi op løbende og prøvede at justere, og det er noget, jeg ville gøre anderledes i et fremtidigt projekt. Ikke nødvendigvis langsommere, men mere transparent undervejs. Det er en hårfin balancegang, når man kun er 2 om et stort eksamensprojekt.
Hvordan har jeg tilegnet mig viden?
Jeg har primært lært ved at kaste mig ud i det og fejle fremad. Når Autolayout drillede, gravede jeg i Figmas dokumentation og på YouTube. Når koden ikke opførte sig, som den skulle, brugte vi hinanden som sparringspartnere og ledte efter forklaringer i stedet for bare at prøve os frem i blinde. Jeg har også brugt statusmøderne på klassen aktivt. Det var godt at kunne se, hvor langt de andre var, og det mindede mig om, at vi faktisk var rigtig godt med, selv på de dage, hvor det føltes modsat.
Hvad tager jeg med?
Vi afleverede et produkt, jeg er stolt af. En prototype bygget på reel brugerviden, der løser de tre problemstillinger, vi stillede os selv fra starten.
Kropskortet guider brugeren til den rette behandling. Bookingflowet er enkelt og opdelt i tre klare trin. Reviews er placeret strategisk, og SoMe-indholdet er tænkt som præeksponering, der skaber tillid til klinikken, allerede inden klienten træder ind ad døren.
Hvis jeg skal pege på én overordnet læring fra P5, er det værdien af at lade brugerdata styre beslutningerne. Hver gang jeg var i tvivl om retningen, hjalp det at vende tilbage til vores research. Det er nok den vane, jeg tager allermest med mig videre.