Rolle:
UI/ UX designer,
researcher
Tid brukt:
5 uker
Verktøy:
Figma, Webflow, Miro
Intro:
BeeWise er en enkel og morsom plattform om pollinerende insekter, som skulle bli testet av elever i 5.–7. klasse. Jeg + to medstudenter fikk et oppdrag fra oppdragsgiver om å lage en plattform som la stor vekt på feltarbeid, der elevene skulle utforske naturen. Nettsiden måtte derfor være enkel å bruke.
Mål:
Målet var å lage en engasjerende digital læringsplattform om pollinerende insekter for elever i 5.–7. klasse og lærere, på vegne av oppdragsgiveren “La Humla Suse”. Plattformen er designet for å oppfylle kravene fra oppdragsgiveren, blant annet interaktivitet, universell utforming og responsivt design. Siden oppdragsgiveren ønsket at elevene skulle utforske naturen, fokuserte vi på å lage enkelt og lettforståelig innhold på sidene.
Prosess
Vi strukturerte prosessen ved å lage overskrifter som «Forberedelse», «Forstå», «Utforske/definere» og «Ideer», og under hver av dem listet vi opp mindre oppgaver som hørte til den delen.
Våre forberedelser
- - Opprette ToDo/Kanban-board i ClickUp
- - Sette opp tidsregistrering i ClickUp
- - Lage en liste med kriterier og lese oppgaven nøye
- - Mindmapping / tanker rundt temaet
- - Opprette dokument i Figma
- - Forstå hva neste steg er
Forstå målgruppe
Hovedmålgruppen var lærere og elever i 5.–7. klasse, og sekundærmålgruppen: foreldre og andre. Derfor laget vi en startside der brukeren kunne velge om de var lærer eller elev.
Innsiktsarbeid
For å forstå hovedmålgruppen, altså lærere og elever, samlet vi inn mer innsikt som: artikler og dokumenter (kilder er listet), og sorterte informasjonen etter behov, utfordringer og interesser.
Research
Vi prioriterte disse punktene da vi utviklet plattformen for elever og lærere:
- - Tydelig og enkel forståelse: All informasjon skulle være lett å forstå.
- - Tilpasset lese- og skriveferdigheter: Store fonter og lettleste tekster.
- - Tidsstyring: Alle oppgaver skulle vises tydelig hvor lang tid de tok.
- - Klare instruksjoner: Enkle oppgavebeskrivelser og en «Neste»-knapp som guider brukeren videre.
- Kreativitet: La inn oppgaver som oppmuntret til kreativitet, og brukte farger og former for å gjøre læringen mer engasjerende. Vi redigerte også bilder for å gjøre designet mer lekent.
- Morsom læring: Fokus på at oppgavene skulle være gøye og visuelt tydelige.
- Praktisk læring: Oppfordring til utforskning ute i naturen og feltarbeid.
- Interaktivitet: La inn funksjoner som zoom, bevegelige bakgrunner og hover-effekter for å gjøre plattformen mer interaktiv.
- - Tydelig ressursinformasjon: Alle ressurser er lett tilgjengelige for lærere i hver modul.
Oppdragsgiver
Prosjektbrief: For å få bedre oversikt over alle ressurser og dokumenter fra oppdragsgiveren, samlet vi alt i ett dokument. Dette gjorde vi for å sikre at vi fikk med alt oppdragsgiveren ønsket i designløsningen.
Inspirasjon
Vi brukte mye tid på å hente inspirasjon fra konkurrenter og noterte oss de beste ideene. Her er en oppsummering av punktene vi ønsket å ta med videre:
- - Enkel og lettlest presentasjon med minimal tekst
- - Bruk av farger, animasjoner og enkel navigasjon for å fange oppmerksomhet
- - Mulighet for videoer og et mer attraktivt design for å øke engasjementet
- - Mulighet til å se hvor lang tid hver oppgave tar, og en oversikt over mål for hver modul
- Interaktive bakgrunner og tydelig oversikt
- Zoom-funksjon for moduler
- Lekent utseende
Definere
Vi formulerte en problemstilling for å sikre at vi møter oppdragsgiverens krav og mål. Dette ga oss nye fokusområder:
- - Intuitiv navigasjon: Elever skal enkelt kunne finne fram og se en tydelig struktur.
- - Profesjonelt uttrykk: Nettsiden må fremstå seriøs og troverdig.
- - Estetisk appell: Designet må være attraktivt og visuelt tiltalende.
- - Begrenset scrolling: Redusere behovet for å scrolle nedover på siden for å forbedre brukeropplevelsen.
Low-fidelity
Vi var nå klare for å starte med våre første skisser på papir. Underveis videreutviklet vi ideene fra de første skissene til digitale høyoppløste wireframes.
Digitale wireframes
Mid-fi Wireframes
Før vi sjekket kontrasten mellom tekst og farger, så sidene våres veldig annerledes ut.
High-fi Wireframes
Webflow
Vi vurderte å bruke CMS i Webflow fra starten for å gjøre det enklere for oppdragsgiveren å redigere innhold. På grunn av tidsbegrensninger valgte vi likevel å bygge hver side individuelt. For å gjøre arbeidet mer effektivt kopierte vi innhold mellom lignende sider, og sørget for å endre klasse-navn slik at det ikke oppstod konflikter.
Assets- Webp, svg
Vi valgte å bruke WebP-format for bilder og SVG for logoer, med bare to unntak i PNG. Dette skyldtes begrensninger på grunn av kostnaden for et nytt Photoshop-abonnement.
Animasjon
Vi valgte å legge animasjon på knapper og interaktive elementer for å øke brukernes engasjement. Vi vurderte også animasjon på bilder av lærere og elever, men det føltes unaturlig siden det ikke var en viktig del av brukeropplevelsen. Målet vårt var å få brukerne til å trykke på knapper, så vi fokuserte derfor på animasjon i knapper og moduler for å gjøre det mer lekent.
Universell utforming
Kontrast
Etter å ha brukt Colour Contrast Analyzer for å sjekke kontrasten, merket vi en stor forbedring i både utseendet og lesbarheten på nettsiden.
VoiceOver
Vi testet alle sidene med VoiceOver. Da oppdaget vi at et bilde ble lest opp på slutten av modulene. Dette skyldtes at vi hadde en interaktiv bakgrunnsillustrasjon bak modulene.
Rem
Vi konverterte alle piksler til rem ved hjelp av det automatiske verktøyet Finsweet i Webflow.
Løsning
I fanen der oppgavene ligger (forberedelse, feltarbeid, etterarbeid og bonusoppgaver) er hovedmålgruppen elever i 5.–7. klasse. Det gjorde designprosessen enklere, fordi vi hadde et klart fokus på hvem sidene var laget for. Selv om sidene også er tilgjengelige for lærere, var det viktigste innholdet rettet mot elevene. Derfor la vi inn en knapp øverst der lærere kunne laste ned aktivitetsheftet for å skrive det ut til elevene. Dette er kanskje ikke like nyttig for elevene, men det ga dem muligheten til å utforske oppgavene digitalt først.
Begrunnelse for knappedesign:
Vi endret knappene på forsiden til hvite med svart tekst for bedre kontrast og lesbarhet. Dette gjorde knappene mindre dominerende visuelt, slik at brukerne først ble mer opptatt av innholdet før de klikket. De oransje knappene var for sterke/oppmerksomhetskrevende.
Resultater
Neste ->