I Projekt 1 arbejdede vi med evaluering og redesign af hjemmesiden for Algreen Anlæg. Formålet var at undersøge den eksisterende brugeroplevelse, identificere de vigtigste problemer og derefter udvikle et redesign baseret på de indsigter, vi fik gennem research og brugertest.
Projektet gav os mulighed for at arbejde med en samlet designproces fra de første observationer til analyse, prioritering, idéudvikling og hi-fi prototype i Figma.
En vigtig læring for mig var, at et redesign ikke kun handler om at gøre en hjemmeside visuelt pænere. Designbeslutninger bør i stedet tage udgangspunkt i konkrete problemer og dokumenterede brugerbehov.
Planlægning og projektstyring
I starten af projektet arbejdede vi med at skabe et overblik over opgaven og fordele arbejdet i gruppen. Vi skulle både nå research, brugertest, analyse, redesign, dokumentation og aflevering inden for en forholdsvis kort periode.
Vi forsøgte derfor at opdele projektet i mindre arbejdsområder og prioritere, hvilke opgaver der skulle løses først. Det gjorde det lettere at skabe fremdrift og gav os et fælles overblik over projektet.
Undervejs opstod der dog uforudsete problemer, som betød, at vores oprindelige plan ikke længere var realistisk. Vi blev derfor nødt til at justere omfanget af projektet og prioritere vores tid anderledes.
Det var udfordrende, fordi ændringerne påvirkede både vores arbejdsfordeling og tidsplan. Vi måtte løbende vurdere, hvilke elementer der var vigtigst for projektets samlede kvalitet, og hvilke idéer der kunne forenkles eller nedprioriteres.
Set i bakspejlet blev det en vigtig del af min læring omkring projektstyring. Jeg fandt ud af, at en projektplan ikke nødvendigvis skal følges slavisk. Den skal fungere som et værktøj, der kan justeres, når projektets forudsætninger ændrer sig.
Hvis jeg skulle arbejde med et lignende projekt igen, ville jeg skabe mere luft i tidsplanen og tidligere definere forskellen mellem must-have og nice-to-have funktioner. Det ville gøre det lettere at justere projektets scope uden at miste fokus på de vigtigste mål.
Første analyse af hjemmesiden
Vi startede med at gennemgå den eksisterende hjemmeside og identificere områder, som kunne være relevante at undersøge nærmere.
Allerede ved den første gennemgang kunne vi se udfordringer med blandt andet typografi, informationsstruktur, billeder og kontaktmuligheder.
Det havde været nemt bare at begynde at redesigne siden ud fra vores egen vurdering. Vi valgte i stedet at bruge vores observationer som udgangspunkt for en brugertest.
Det var vigtigt, fordi vi gerne ville undersøge, om vores egne antagelser også stemte overens med brugernes oplevelse.
Jeg lærte her, at den første analyse ikke nødvendigvis skal give svarene. Den kan i stedet bruges til at formulere spørgsmål, som efterfølgende undersøges gennem brugerdata.
Brugertest af den eksisterende hjemmeside
Vi gennemførte en think-aloud-test, hvor testpersonerne navigerede rundt på hjemmesiden, mens de fortalte, hvad de tænkte undervejs.
Formålet var at observere deres adfærd og finde de steder, hvor de blev usikre, havde svært ved at finde information eller misforstod hjemmesidens funktioner.
Inden testen udarbejdede vi en testplan og et testscript, så testene havde den samme overordnede struktur. Vi sørgede også for samtykke fra deltagerne i forbindelse med optagelser og dokumentation.
Det mest interessante ved testen var, at brugerne ikke altid reagerede på de elementer, vi selv havde forventet.
Det understregede værdien af at teste et design med rigtige brugere. Som designer kan man nemt blive vant til et interface og overse problemer, fordi man allerede ved, hvordan det fungerer.
Resultater fra brugertesten
Efter brugertesten gennemgik vi vores observationer og samlede de problemer, der gik igen.
Et tydeligt problem var læsbarheden. Testpersonerne reagerede på den lille tekst, og der var steder, hvor kontrasten mellem tekst og baggrund gjorde indholdet sværere at læse.
Et andet problem var hjemmesidens billedgalleri. Brugerne havde svært ved at forstå, hvordan slideren fungerede, og billederne var samtidig relativt små. Det gjorde det svært at bruge galleriet til at vurdere kvaliteten af virksomhedens tidligere arbejde.
Vi oplevede også problemer med hjemmesidens informationsstruktur. Det var ikke altid tydeligt, hvordan forskellige ydelser hang sammen, eller hvor brugeren skulle lede efter en bestemt service.
Endelig viste testen et behov for større afsendertillid og tydeligere kontaktmuligheder. For en håndværksvirksomhed betyder det meget hurtigt at kunne se, hvem man er ved at kontakte, og hvordan kontakten foregår.
Analyse og prioritering
Efter testen var næste udfordring ikke bare at finde problemer, men at beslutte hvilke problemer der var vigtigst at arbejde videre med.
Vi samlede vores resultater i fire hovedområder:
- Tilgængelighed og læsbarhed – større tekst, bedre kontrast og mere læsevenlige tekstområder.
- Informationsarkitektur og serviceopdeling – tydeligere struktur omkring virksomhedens forskellige ydelser.
- Galleri og affordance – større billeder og mere synlig navigation.
- Afsendertillid og kontakt – tydeligere afsender, virksomhedsoplysninger og enklere kontaktmuligheder.
Prioriteringen hjalp os med at begrænse projektets omfang. I stedet for at forsøge at redesigne alle detaljer på hjemmesiden kunne vi koncentrere os om områder, hvor vores ændringer kunne løse konkrete problemer.
Det var også vigtigt i forhold til projektstyringen. Da vores tid blev mere begrænset end først forventet, blev denne prioritering et vigtigt værktøj til at holde fokus.
Fra brugerproblem til designbeslutning
Et godt eksempel på processen var billedgalleriet.
I starten var vores vurdering primært, at galleriet visuelt kunne forbedres. Men efter brugertesten blev problemet mere præcist.
Brugerne havde både svært ved at se billederne ordentligt og ved at forstå, hvordan de skulle navigere mellem dem.
Løsningen blev derfor ikke bare:
“Gør galleriet pænere.”
I stedet blev vores designmål:
Større billeder + bedre udnyttelse af pladsen + tydeligere navigation.
Denne måde at arbejde på gjorde vores designbeslutninger lettere at argumentere for, fordi vi kunne forbinde hver ændring med et observeret problem.
Arbejdet i Figma
Efter analysefasen begyndte vi at omsætte vores resultater til et konkret redesign i Figma.
Vi arbejdede blandt andet med Auto-layout, komponenter og en StyleTile, så designet kunne opbygges mere systematisk.
StyleTile blev brugt til at skabe et samlet visuelt udgangspunkt for blandt andet typografi, farver, knapper og forskellige UI-elementer.
Vi ønskede stadig at bevare den grønne identitet, fordi den passer naturligt til en virksomhed inden for anlæg og havearbejde. Samtidig skulle farverne bruges på en måde, der gav bedre kontrast og læsbarhed end på den eksisterende hjemmeside.
Her oplevede jeg værdien af at definere de visuelle regler tidligt. Når farver, typografi og komponenter allerede er defineret, bliver resten af designprocessen mere konsistent.
Informationsarkitektur
En af de mere omfattende ændringer handlede om hjemmesidens informationsstruktur.
Problemet kunne ikke løses alene ved at ændre farver eller skriftstørrelser. Vi skulle også overveje, hvordan virksomhedens indhold blev organiseret.
Vi arbejdede derfor med tydeligere opdeling af de forskellige ydelser, eksempelvis mellem nyanlæg og vedligeholdelse.
På landingpagen blev informationen opdelt i mere afgrænsede sektioner, så brugeren hurtigere kan danne sig et overblik og finde den relevante ydelse.
Denne del af projektet ændrede min forståelse af UX. Tidligere forbandt jeg i høj grad brugeroplevelse med selve interfacet. Her blev det tydeligt, at strukturering og prioritering af indhold kan være mindst lige så vigtigt.
Redesign af billedgalleriet
Billedgalleriet var en af de mere tekniske dele af vores Figma-arbejde.
Vi skulle både forbedre brugeroplevelsen og samtidig skabe et design, der fungerede sammen med vores øvrige komponenter og layouts.
I redesignforslaget blev billederne større og mere centrale. Navigationsmulighederne fik samtidig større visuel vægt, så brugeren lettere kan forstå, at der findes flere billeder.
Arbejdet viste mig også, at affordance kan have stor betydning. En funktion kan teknisk set eksistere, men hvis brugeren ikke kan se eller forstå, hvordan den bruges, fungerer den ikke særlig godt i praksis
Tillid og kontakt
Et andet fokusområde var virksomhedens troværdighed og kontaktmuligheder.
Den eksisterende hjemmeside havde blandt andet en chatfunktion, som ikke passede særlig godt til den måde vores testpersoner ønskede at kontakte en håndværksvirksomhed på.
Vi arbejdede derfor med et mere enkelt kontakt-hierarki, hvor traditionelle kontaktmuligheder blev gjort mere synlige.
Samtidig ønskede vi at gøre virksomheden mere personlig og tydelig som afsender. Information som kontaktoplysninger, adresse og virksomhedsoplysninger kan virke som små detaljer, men samlet set kan de være med til at skabe større tryghed.
Iteration og løbende justeringer
Designprocessen var ikke lineær.
Vi bevægede os flere gange mellem analyse og design, fordi nye overvejelser opstod, efterhånden som løsningen tog form.
Nogle idéer, som virkede gode på papir, fungerede ikke lige så godt, når de blev sat ind i det samlede layout. Andre idéer blev for omfattende i forhold til den tid, vi havde tilbage.
Derfor måtte vi løbende justere løsningen.
Jeg oplevede her, at iteration ikke nødvendigvis betyder, at det første arbejde var forkert. Det er en naturlig del af designprocessen, hvor en løsning gradvist bliver mere præcis.
Det samme gjaldt vores projektstyring. Når projektets omfang ændrede sig, måtte vi være realistiske omkring, hvad vi kunne nå, uden at gå på kompromis med de vigtigste dele af løsningen.
Dokumentation af processen
En anden vigtig erfaring fra projektet var betydningen af løbende dokumentation.
Hvis man først forsøger at dokumentere hele processen til sidst, kan det være svært at huske, hvorfor bestemte beslutninger blev taget.
Jeg begyndte derfor løbende at gemme screenshots, testmateriale, analyser og forskellige versioner af vores design.
Dokumentationen gjorde det lettere at se udviklingen fra den oprindelige hjemmeside til den endelige løsning.
Det gjorde også refleksionen lettere, fordi jeg kunne se tilbage på tidligere versioner og sammenligne dem med de beslutninger, vi endte med at tage.
Den samlede arbejdsproces
Projektets arbejdsproces kan overordnet beskrives som:
Planlægning → Første analyse → Brugertest → Analyse af resultater → Prioritering → Idéudvikling → StyleTile og designsystem → Hi-fi redesign → Iteration → Test og evaluering
Selvom processen kan vises som en række trin, fungerede den i praksis ikke helt lineært. Vi vendte flere gange tilbage til tidligere faser, når nye problemer eller idéer opstod.
Det har været en vigtig erkendelse for mig. En designproces handler ikke nødvendigvis om at afslutte ét trin og aldrig vende tilbage til det. Research, analyse og design påvirker løbende hinanden.
Samlet refleksion
Det vigtigste, jeg tager med fra projektet, er forskellen mellem at vurdere et design og at undersøge et design.
I begyndelsen kunne vi hurtigt se mange ting på hjemmesiden, som vi personligt mente kunne forbedres. Men gennem brugertesten fik vi et langt bedre grundlag for at afgøre, hvilke problemer der faktisk havde betydning for brugerne.
Mit fokus ændrede sig derfor fra:
“Hvordan kan vi få hjemmesiden til at se bedre ud?”
til:
“Hvilket problem oplever brugeren, og hvordan kan vores design reducere det problem?”
Jeg lærte samtidig meget om projektstyring. De uforudsete udfordringer undervejs gjorde, at vi blev nødt til at tilpasse projektets omfang og vores oprindelige planer. Det var udfordrende, men også lærerigt, fordi det tvang os til at prioritere og træffe mere bevidste valg.
Hvis jeg skulle gennemføre projektet igen, ville jeg især arbejde med en mere realistisk tidsplan, tydeligere prioritering af funktioner og mere buffer til uforudsete problemer. Jeg ville også fortsætte med at dokumentere processen løbende, fordi det gjorde både evalueringen og den efterfølgende refleksion væsentligt lettere.
Samlet set har projektet givet mig en bedre forståelse for sammenhængen mellem research, brugerdata, design, iteration og projektstyring. Det er især denne sammenhæng, jeg vil tage med videre til kommende projekter.
Leave a Reply