Utfordringen
Hvert år trenger TV-aksjonen å distribuere materiell som t-skjorter, bøsser, plakater, og mer til frivillige for å støtte deres innsamlingsarbeid. Tidligere hadde dette blitt gjort manuelt gjennom flere Excel-ark, og oppdateringer ble mottatt via telefonsamtaler og e-post. For å effektivisere prosessen for TV-aksjonen, kommunene og fylkene, var målet å utvikle en nettbasert plattform der kommunene kunne selvbestille nødvendig materiell.
Bakgrunn
I løpet av sommeren 2023 hadde jeg gleden av å jobbe som sommerpraktikant hos Computas, der jeg var ansatt som designer på to oppdrag med to ulike team. Det ene oppdraget var å utvikle en nettbutikkløsning for TV-aksjonen.
Prosjekt: Sommerstudent i Computas
Når: 2023
Kunde: TV-aksjonen
Team: Idunn Stabell, Erik Myhre, Hans Lu, Peter Gisholt og Madelen Gamborg-Nielsen
Tags: UX, Kartleggingsintervju, Brukertesting, Geriljatesting, Workshop, Figma
Utvikling av nettbutikkløsning for TV-aksjonen
Team: Teamet bestod av fire utviklere og en designer. Siden det ikke var tidligere arbeid utført på dette oppdraget, startet vi prosjektet fra scratch.
Prosess
Vi startet med besøk hos TV-aksjonen og intervjuer med de involverte. Dette gjorde at vi kunne utvikle et site map som definerte hvilke sider som skulle inkluderes og hvordan navigasjonen skulle være. Her fant vi ut at vi trengte en brukerside og en adminside. På brukersiden skulle det være nettbutikk, handlekurv og ordrebekreftelse. På adminsiden skulle det være nettbutikk, mulighet for å godkjenne bestillinger gjort i nettbutikk, mulighet til å endre/legge til varer og lagerbeholdning.
Nettbutikk brukerside
Problem: Lage et helheltlig og smidig design, når alle produktene unntatt T-skjorter var onesize. I tillegg var det ikke noe betalingsløsning, så vi måtte jobbe med hvordan det ble mest naturlig for brukeren å legge til varer og holde oversikt over antallet de bestilte. Ulike varer skulle være tilgjengelig for ulike brukere (kommuner, fylker, TV-aksjonen).
Prototyping
Tidlig i prosessen hadde teamet en workshop hvor vi gjennomførte kreative øvelser, inkludert "Crazy 8's", og brainstorming. Workshopen ble fasilitert av meg, og resulterte i en papirprototype for brukergrensesnittet til nettbutikken som jeg tok med meg videre inn i Figma. Papirprototypen var satt sammen av de viktigste funnene så tidlig i prosessen, og var det første utkastet til brukersiden.
Testing og designvalg
Basert på papirprototypen begynte jeg å arbeide med designet i Figma, og vi utførte "geriljatesting" med Computas-ansatte for å innhente tidlige tilbakemeldinger og gjøre nødvendige justeringer. Her måtte en del justeringer til, blant annet måtte designet på hvordan T-skjorter ble lagt til i handlekurven endres. Basert på geriljatester justerte jeg designet i Figma, og testet flere runder på samme måte. Det endelige resultatet ble testet på kunde og godkjent før vi startet på adminsiden.
Viktige designvalg
- En handlekurv ble lagt inn på bestillingssiden for å gi brukeren oversikt over antall varer
- Alle størrelser blir vist når man klikket for å legge til T-skjorter
- Bruker kan legge inn oppdatert kontaktinformasjon før de går videre
- Brukeren kan endre antall varer frem til bestilling
- Brukeren må bekrefte varene før bestilling for å slippe feilbestilling
Adminside
Kartlegging av behov
Prosessen startet med et grundig kartleggingsintervju med kunden, som førte til opprettelsen av en brukerreise som jeg så presenterte for teamet. Jeg arrangerte en ny workshop basert på denne innsikten for å danne grunnlaget for utviklingen i Figma. Utfordringene vi så her var at det finnes flere ledd i bestillings- og godkjenningsprosessen enn vi var klare over. Derfor måtte det lages både adminbrukere og superadminbrukere, og designet måtte passe både for kommuneansatte som bestiller på vegne av sin kommune, fylkesansatte som bestiller og godkjenner på vegne av sine kommuner og TV-askjonen som gjør endelige godkjenninger.
Testing og designvalg
Vi gjennomførte testing i flere faser. Først utførte vi "geriljatesting" med Computas-ansatte for å identifisere tidlige problemer. Deretter ble løsningen testet med kunden for å validere funksjonaliteten. Til slutt ble nettbutikken testet av fylkesaksjonsledere, som er de faktiske brukerne av systemet.
Da vi testet løsningen på fylkesaksjonsledere kom det frem hvordan designet kan se annerledes ut basert på brukerens skjerm. I tillegg er navigering og forståelse avhengig av brukerens egenskaper og kunnskap om datamaskiner og internett. Basert på siste test måtte derfor designet justeres, og dette førte blant annet til at godkjenningsknappen ble flyttet øverst i tabellen for å sikre at denne alltid var synlig og ikke kunne blandes med godkjenningsfilterne.
Det kom også frem av brukertesting at det var nyttig å se adresse og kontaktinformasjon direkte i bestillingen, da flere fylker tar kontakt med sine kommuner via telefon og mail. Å vise om økningen er positiv eller negativ, altså om bestillingen er innenfor en satt ramme fra fjorårets bestilling, ble også lagt til etter ønske fra brukertest.
Viktige designvalg
- Synlig godkjenningsknapp
- Legge til filtrering for bestillingene
- Ha kontaktinformasjon til kunde synlig
- Vise om økningen i antall produkter bestilt er innenfor bestillingsmargin
- Bruker kan redigere bestilling direkte i bestillingen
- Bruker kan godkjenn bestillinger én og én eller alle på en gang
Erfaringer
Dette prosjektet var en verdifull erfaring som ga meg innsikt i hele designprosessen, fra innsikt i behov til utvikling og testing. Jeg ble også bedre kjent med hvordan det er å samarbeide i et tverrfaglig team. Det var en unik mulighet til å bidra til en meningsfull sak som TV-aksjonen.
Å lede og fasilitere workshops var noe jeg ble trygg på i sommer, og det var utrolig lærrerikt å fasilitere workshops for utviklere som ikke hadde særlig erfaring med dette fra før.
Å jobbe tett opp mot kunde, gjennomføre kartleggingsintervjuer, brukertester og holde god kommunikasjon gjennom sommerferien var også verdifulle erfaringer som jeg tar med meg videre.
Ferdige skisser i Figma
