Bilde av en laptop og mobil som viser resultatet av løsningen Torget

Design av app for å synliggjøre studentfrivilligheten på NTNU

Torget

Dette prosjektet går ut på å konseptualisere og designe et forslag til en helt ny digital løsning for studentfrivilligheten som kan gjøre hverdagen bedre for; foreningen(e)s styre(r), foreningens medlemmer samt potensielle medlemmer og ildsjeler. Brukeropplevelsen for styrene og medlemmer er hovedfokuet og løsningen skal gjøre det mulig for målgruppene å løse sine primæroppgaver i løsningen. Prinsipper brukersentrert systemutvikling og informasjonsarkitektur skal brukes i prosessen.

Brief

Min rolle i dette prosjektet var hovedsaklig å lage wireframingen til prosjektet og prototyping av interaksjonsdesign delen, på Figma. Jeg hadde fokus på at designet var brukersentrert og at den interaktive delen fungerte som den skulle under brukertesting og presentasjon.

Min rolle

Samarbeidspartnere

Deborah Anna Ognøy, Ida Bolette Enerhaugen og Eline Thomassen

Tidsperiode

Høst 2024

Prosjekt

Studieprosjekt

Emne

IDG3009 Informasjonsarkitektur

Designprosess og metoder

Gjennom dette prosjektet ble Double Diamond brukt som prosessmodell

Forstå

Analogier
Intervjuguide
Brukerintervjue(er)

Definere

Affinity diagram
Personas
Scenario
Sitemap

Utvikle

Skissing
Lo-fi prototyping
Mid-fi prototyping
Brukertesting

Levere

Grafisk profil
Hi-fi prototyping

Forstå

Analogier

For å se situasjonen per dags dato så vi på lignende løsninger på andre nettsider, blant annet NTNU sin løsning, for å få et inntrykk av hva som funker bra og hva som funker dårlig. Resultat var at siden var litt gjemt bort, ikke mange hadde kunnskaper om at den eksisterte og den hadde bare en oversikt over foreningene på NTNU.

Bildet av nettisden til NTNU som viser at du først må hover over "studentliv" før du kan trykke på "studenter i Gjøvik"

Bildet viser oversikten til NTNU over frivilighetene på campus

Bildet som viser at du videre må bla ned til "finn en studentaktivitet" og trykk på den

Intervju-guide

Ved hjelp av innsikt fra analogier lagde vi en intervju-guide. Guiden ga en oversikt over hvilke områder vi ønsket mer innsikt over fra brukere (frivilligheter) og kunder (studenter).

Bruker-intervju(er)

8 studentforeninger, 4 linjeforeninger og 4 studenter ble intervjuet fordelt på 15 grupper i emnet. Vi utførte intervjue av en linjeforening.

Definere

Affinity diagram

Vi samlet innsikten fra alle intervjuene og delte dem inn i grupper hvor innholdet hadde samme tema, for organisering. Diagrammet ble delt inn i sju kategorier

Hovedfunn

Ønsker

Enklere kanal for feedback fra brukere.
Bedre oversikt over offentlig informasjon.
Plattform som samler informasjon for alle arrangementer, møter og aktiviteter.
Mer synlighet i helse og på Mustad.
Oversikt over hva som skjer.
Lettere måte å kommunisere på.
Lettere måte å finne informasjon + eventer (kalender)

Fokus

Bedriftspresentasjoner.
Karrieredag.
Budsjett og sponsorer.
Kommunikasjon.
Større synlighet.
Rekruttering.

Utfordringer

Vanskelig å få info hvis ikke oppsøker.
Utfordringer med å engasjere nye frivillige studenter.
Liten/ingen overlapp.
Lite/dårlig informasjon om mindre arrangementer.

Budsjett

Karrieredag som inntektskilde.
Får støtte av studentfrivilligheten.
Sliter med inntekter.

Informasjon

Instagram.
Plakater til en viss grad.
Via medstudenter.

System

Ulik ansvarsfordeling

Kommunikasjon

Internt: Messenger og Discord.
Eksternt: Instagram.

Personas

Med utgangspunkt i hovedfunnene lagde vi to personas. Gagen og Ingrid er begge studenter på NTNU som er interessert i studentfrivilligheten.

Persona Ingrid Sofie Myrstad som studerer sykepleie og er interessert i sjakk og tennis

Scenario

Ved bruk av personasene lagde vi to scenarioer som representerte to forskjellige sider av av Torget. Gagen som er i et styre av en forening som vil promotere et arrangement/årsmøte og Ingrid som er en student som ser etter arrangementer/foreninger som passer hennes interesse.

Scenario hvor Ingrid var syk på frivillighetsdagen, og vil finne aktiviteter hun kan gjøre på fritiden

Sitemap

Er en enkel måte å visualisere en komprimert versjon av nettsiden. Sitemapet ble lagd med det viktigste først før vi bygde videre ned på boksene. Noe informasjon ble utelatt grunnet unødvendig repetisjon, og heller fokuserte mer på det viktigste og det som er relevant for prototypingen.

Sitemap-merking

Golf-emojien representerer veien Gagen går i scenarioet. Sjakk-emojien representerer veien Ingrid går i scenarioet. Grønn representerer en link som fører ut av nettsiden vår, og ut til en annen nettside. Lilla representerer at en må være logget inn for å ha tilgang til disse funksjonene. Rosa viser hva som er tilgjengelig ved en vanlig student-innlogging. Blå er hva en har tilgang til som styremedlem av en (eller flere) foreninger. Rosa og blå krever innlogging.

Utvikle

Skissing

For å utføre enkle visualisering av nettsiden utførte vi først skisser av løsning, utifra informasjonen hentet fra innsiktsfasen og sitemapet, ettersom det er en lavterskel metode og det er enkelt i etterkant å endre på utseende. Bildene under viser skissing av desktop- og mobilversjon, og logo.

Desktop

Mobil

Logo

Lo-fi prototyping

Ved hjelp av skissene og første utkast av designmanualen lagde vi en lo-fi, og første iterasjon av nettsiden.

Desktop

Mobil

Mid-fi prototyping

Etter veiledning ble vi enige om at løsningen var for nærme brukerflaten til Instagram. Vi jobbet videre med utseende og lagde noe iterasjoner.

Andre iterasjon

Tredje iterasjon

Brukertesting

Mellom mid-fi og hi-gi prototyping utførte vi brukertesting på studenter. Gjennom disse testene utforsket vi brukervennligheten til løsningen, og hvor intuitivt og forståelig brukeren opplevde den.

Desktop

Brukeren synes det var vanskelig å finne de riktige knappene, blant annet at vi hadde lagt dem bak en dropdown-meny.
Dropdown-meny kom da man trykket på profilbildet, brukeren opplevde dette lite intuitivt.
Dropdown-meny ble byttet ut med en hamburgermeny. Brukeren opplevde dette mer brukervennlig og gjorde det enklere å komme til “Min Side” ettersom det tok færre steg.

Mobil

Brukeren forstå ikke at søkefunksjonen lå inne på “Foreninger”. Søkefunksjonen ble flyttet til navigasjons-baren.
Etter brukeren hadde utført et søk var det ikke intuitivt å ville gå inn på en forening før man prøvde å trykke på et innlegg. Dette var fordi det dukket opp for mange foreninger. Dette ble endret til færre foreninger som var best koblet opp til søkeordet.
Brukeren opplevde det vanskelig å vite om man hadde blitt medlem etter å ha trykket på “Bli medlem” ettersom ingenting skjedde. Vi endret knappen til “Medlem” og en annen farge, i tillegg kommer en pop-up som sier “Du er nå medlem!”.

Levere

Grafisk profil

De grafiske studentene lagde en grafisk profil til nettsiden som inneholdt blant annet fargepalett, typografi, piktogrammer, grafiske elementer og logo, som ble brukt til å lage løsningen våres.

Fargepalett

Typografi

Piktogrammer

Grafiske elementer

Logo

Hi-fi prototyping

Den siste iterasjonen av nettsiden ble lagd med å bruke den grafiske profilen og innsikten samlet inn fra brukertesting. Man kan gå igjennom løsning på Figma ved å trykke på knappen.

Figma sluttresultat