Pil som viser veien tilbake til startsidenGå tilbake
Bilde av løsningen designet for REKO-ringen.

Innledning

REKO-ringen er en oppgave som ble gitt høsten 2020 i emnet «IDG3009 – Informasjonsarkitektur». Resultatet ble et konsept og designforslag til en ny løsning for direktesalg av lokale produkter basert på REKO-modellen.

Prosjektet var tverrfaglig, og her jobbet jeg sammen med én interaksjonsdesigner og to grafiske designere. Min rolle i dette prosjektet gikk for det meste ut på å samle inn brukerinnsikt, i tillegg til å ha et overordnet ansvar over de digitale prototypene i Figma.

Mitt mål med dette prosjektet var å lære mer om tverrfaglig samarbeid, i tillegg til å lære mer om informasjonsarkitektur, og hvordan man kan bruke dette på best mulig vis for å designe en løsning som fungerer både på mobil og PC. Gruppens mål var å lage en brukervennlig løsning med et moderne og lekent preg.

Innsikt

I motsetning til andre emner jeg har vært med på, jobbet alle gruppene som deltok i emnet sammen om innsiktsarbeidet. Hver gruppe fikk tildelt én respondent som skulle intervjues, og deretter skulle dette transkriberes. Totalt ble det intervjuet syv forbrukere og syv produsenter fordelt på alle gruppene.

Selv om de fleste samarbeidet om intervjuguidene, oppstod det en del variasjoner i hva slags spørsmål som ble stilt, og hvilke svar man fikk. Derfor valgte vi på gruppen min å benytte oss av programmet MAXQDA. Her markerte vi tekst i råmaterialet vi fikk utdelt, for å så kategorisere disse markerte tekstutdragene. Videre brukte vi Miro for å enkelt organisere og gruppere informasjonen i et slags tankekart. Vi gikk igjennom informasjonen gruppert gjennom MAXQDA, identifiserte likheter mellom markert informasjon, og forenklet det i Miro-dokumentet. Fordelen med dette er at vi nå kunne kategorisere innsikten slik at vi lett kunne finne frem til relevant informasjon. Dersom vi for eksempel ville finne innsikt om negative aspekter ved REKO-siden, kunne vi gå til punktet som handlet om dette for å finne informasjonen fra alle intervjuobjektene. Til slutt satt vi igjen med en oversiktlig samling av informasjon fra alle intervjuene.

Eksempel fra innsikt sortert i Miro.
Eksempel fra innsikt sortert i Miro. Her vises negative omtaler.

Videre brukte vi innsikten til å lage fire personas med tilhørende scenarier for å alltid huske på at vi faktisk designer en løsning for ekte brukere. Et eksempel på dette er Gerd som skal handle inn grønnsaker til sønnens favorittrett han skal ha på bursdagen sin.

Eksempel på peronas laget til prosjektet.
Personas Gerd som skal handle inn til sønnens bursdag.

Krav og nettstedskart

Basert på innsikten som hadde blitt samlet inn, utarbeidet vi ulike krav løsningen vår skulle dekke. Vi lagde både funksjonelle krav og innholdskrav, og itererte på disse sammen med veileder. Resultatet satte vi opp i Miro.

Innholdskrav og funksjonelle krav til REKO-ringen.
Innholdskrav og funksjonelle krav til REKO-ringen.

For å gi et oversiktlig bilde over hvilke sider løsningen skulle inneholde, og hvordan disse sidene er koblet sammen, ble det laget et nettstedskart. Dette ble videre delt opp i sider for produsenter (grønn) eller sider for både produsent og forbruker (lilla).

Nettstedskart over løsningen vi designet for REKO-ringen.
Nettstedskart over løsningen vi designet for REKO-ringen.

Low-fidelity-prototyping

Vi startet utviklingen med low-fidelity-prototyper. Vi lagde disse for å teste ut hvordan funksjonaliteten av løsningen før vi begynte med innhold og detaljer. Det ble utarbeidet klikkbare low-fidelity-prototyper for både PC og mobil, hvor vi startet med design av en mobilapplikasjon for å jobbe for «mobile first»-prinsippet. Gjennom hele designprosessen hadde vi ukentlige veiledninger med faglærer, og fikk ekspertevaluering på skissene. I tillegg ble de testet på noen andre grupper underveis i designprosessen.

Mobil

Utdrag fra low-fidelity-prototype til mobilversjonen. Viser startsiden med oversikt over kategorier. Utdrag fra low-fidelity-prototype til mobilversjonen. Viser kategorien Frukt og grønt. Utdrag fra low-fidelity-prototype til mobilversjonen. Viser et eksempel på en vareside med informasjon. Utdrag fra low-fidelity-prototype til mobilversjonen. Viser kundens handlevogn.
Utdrag fra low-fidelity-prototype til mobilversjonen.

Desktop

Utdrag fra low-fidelity-prototype til PC. Viser startsiden med oversikt over kategorier. Utdrag fra low-fidelity-prototype til PC. Viser vareutvalg.
Utdrag fra low-fidelity-prototype til PC.

High-fidelity-prototyping

Løsningen utviklet seg gradvis til å bli en high-fidelity-prototype for mobil og PC. Sammen med den high-fidelity-prototypen, utarbeidet vi også en designmanual. Designet er basert på en fargepallett som bruker grønn som primærfarge, og oransje som sekundærfarge.

Mobil

Utdrag fra high-fidelity-prototype til mobilversjonen. Viser startsiden med oversikt over kategorier. Utdrag fra high-fidelity-prototype til mobilversjonen. Viser kategorien Frukt og grønt. Utdrag fra high-fidelity-prototype til mobilversjonen. Viser et eksempel på en vareside med informasjon. Utdrag fra high-fidelity-prototype til mobilversjonen. Viser kundens handlevogn.
Utdrag fra high-fidelity-prototype til mobilversjonen.

Desktop

Utdrag fra high-fidelity-prototype til PC. Viser startsiden med oversikt over kategorier. Utdrag fra high-fidelity-prototype til PC. Viser kategorisering på startsiden. Utdrag fra high-fidelity-prototype til PC. Viser siden til en gård (produsent) Utdrag fra high-fidelity-prototype til PC. Viser vareutvalget på startsiden.
Utdrag fra high-fidelity-prototype til PC.

Informasjonssøkeadferd

Løsningen er designet slik at om man velger en kategori eller søker etter et spesifikt produkt, kan man innad i kategoriene finne mer spesifikk informasjon om selve produktet. Samtidig har man også mulighet til finne informasjon om produsenten når du gjør dette, og igjen finner man informasjon om hva produsentene selger inne på siden deres. Løsningen er med andre ord designet slik at brukeren kan plukke med seg informasjonen gjennom navigeringsprosessen. Denne løsningen gjør at brukerne kan bruke løsningen til å utforske mulighetene den tilbyr, samtidig som de leter etter ønsket informasjon.

Gjennom prototypingen hadde vi også et stort fokus på at en bruker kan gjennomføre oppgaver på forskjellige måter. Dersom for eksempel en bruker vil finne frem til et produkt, kan man enten søke eller klikke seg inn i de ulike kategoriene. Når man bestiller en vare, kan man gjøre dette direkte fra listen over alle varene, eller så kan man gå inn på varesiden for å lese mer om varen, og bestille den der. På denne måten har vi brukt informasjonsarkitektur for å tilrettelegge for fleksibel bruk, og dermed lage en brukervennlig og intuitiv løsning for flest mulig.

Viser prototypen, og hvordan man kan bestille vare på ulike måter. Her vises oversikt over varer fra vareliste. Viser prototypen, og hvordan man kan bestille vare på ulike måter. Bruker har lagt til vare i handlevogn fra vareoversikten. Viser prototypen, og hvordan man kan bestille vare på ulike måter. Her vises detaljert vareside til Nansenpotet. Viser prototypen, og hvordan man kan bestille vare på ulike måter. Bruker har lagt til vare i handlevogn fra detaljert vareside.
Viser hvordan man kan bestille en vare (Nansenpotet fra Sjåk) på to måter. De to første bildene viser bestilling rett fra liste, mens de to siste bildene viser bestilling inne på varesiden.

Min rolle i prosjektet

I dette prosjektet var jeg ansvarlig for å organisere mye av innsikten vi hadde skaffet. På grunn av at vi fikk tilgang til alle grupper som gjennomførte kurset sine intervjuer, valgte jeg å organisere alt ved hjelp av MAXQDA. Dette vil si at jeg tok utklipp fra hvert intervju, og la disse inn i satte kategorier. På denne måten var det lett å slå opp hva f.eks. personer hadde sagt var negativt med dagens løsning, ettersom vi hadde laget en kategori for dette.

Jeg hadde også mye ansvar for den digitale prototypen. I startfasen jobbet jeg mye med å komme opp med et oppsett som er brukervennlig. Etterhvert som prosjektet utviklet seg, jobbet jeg mye sammen med de fra grafisk design for å felles lage et visuelt uttrykk som ser fint ut, men også brukervennlig.

I de ukentlige veiledningstimene gjennomgikk jeg prototypen og fikk feedback på arbeidet som hadde blitt gjort.

Refleksjoner og forslag til videreutvikling

I løpet av tiden jeg jobbet med dette prosjektet, oppnådde jeg det jeg hadde lyst til. Vi lærte mer om tverrfaglig samarbeid, digital prototyping, informasjonsarkitektur og grafisk design. Dersom jeg skulle jobbet videre med dette prosjektet i dag, ville jeg fokusert ytterligere på brukervennlighet, og da spesielt med tanke på produsentene som eventuelt bruker løsningen til å legge ut produkter til salgs. Dette var noe vi ikke fokuserte så mye på under prosjektet, så det ville vært spennende å brukertestet løsningen på eventuelle produsenter. Da kunne vi testet med ekte innhold, og sett om det er noe informasjon produsentene ikke synes blir godt nok fremvist i løsningen.

Jeg ville også fokusert ytterligere på det visuelle uttrykket, og passet på at alt passer sammen. Løsningen vår har noen forbedringspunkter rundt dette. Et eksempel er å tilpasse ikonene slik at det passer mer til resten av elemenetene på siden. Disse ble opprinnelig laget for hånd av de grafiske designerene på prosjektgruppen tidlig i prosjektet, men burde justeres for å skape et bedre helhetlig inntrykk. I tillegg ville jeg fokusert mer på PC-versjonen av nettsiden. Vi jobbet mest med nettsiden på mobil, og brukte ikke så god tid på PC-versjonen. Dette er synlige på enkelte sider hvor det visuelle uttrykket ikke ser like bra ut som på mobil.

Det viktigste jeg lærte fra dette prosjektet

  • Dette emnet fikk meg til å se på tverrfaglig samarbeid som en nøkkelressurs, i stedet for en byrde. Jeg så viktigheten av å få inn annen kompetanse enn kun interaksjonsdesign i et prosjektarbeid. Ved å gjøre dette, kunne vi på interaksjonsdesign hovedsaklig fokusere på brukervennlighet i designet, mens de på grafisk design hovedsaklig fokuserte på det visuelle uttrykket. Selv om vi hadde ulike ansvarsområder, følte jeg også at jeg fikk mye ut av å jobbe sammen med de grafiske designerene. Før dette prosjektet hadde jeg for eksempel aldri laget en designmanual før, men i løpet av prosjektet fikk jeg være med på utformingen av denne, noe jeg lærte mye av.

  • Dette var også mitt første møte med prototypingsverktøyet Figma. Vi hadde tidligere brukt Adobe XD, men etter dette prosjektet erfarte jeg at Figma fungerte ypperlig til samarbeid i sanntid. Dette fikk meg til å hovedsakelig benytte Figma i prosjekter fremover, og lære mer om programmet på fritiden.

Tilbake til toppen