Redesign av Jagharläst.se

Analys och redesign av Sveriges största portal för bokrecensioner skrivna av barn.

1 - bakgrund & översikt:

Jagharläst.se & LegiLexi

Sajten jagharlast.se är skapad för att ge lärare och elever en gemensam plattform för att öka läsandet på fritiden och framförallt uppmuntra eleverna till lustfyllt läsning under loven.

På jagharläst.se kan eleverna idag skriva och skicka in bokrecensioner och göra lovutmaningar.

Jagharläst.se drivs av den icke-vinstdrivande stiftelsen LegiLexi.

Roll

UX/UI designer praktikant

Uppdrag

Genomföra en UX-analys av jagharläst.se och förbättra en utvald funktion (bokrecension) för att optimera användarupplevelsen.

Arbetsuppgifter

- Heuristisk utvärdering
- User Research
- Facilitera workshop för idégenerering
- Skisser och wireframes
- Användningstest
- Använda och lägga till komponenter i designsystem HiFi prototyp i Figma.

Resultat

- Flera high impact/Low effort-fixar som snabbt kunde implementeras för en förbättrad användarupplevelse.
- Ett nytt gränssnitt för landningssidan, elevinlogg samt ett nytt flöde för att skriva & skicka in en bokrecension som ska implementeras 2024.
- Förslag på nya visuella element

Länk till prototyp ->

2 - resultat:

Prototyp

Hifi-prototyp

Designen baserades på det befintliga designsystemet, men jag gjorde vissa justeringar och lade till nya komponenter för att förbättra användarupplevelsen.

Flöde för bokrecension HiFi

Landningssida HiFi

Länk till prototyp ->

3 - processen:

Discovery

Bakgrund

De nuvarande användarna av jagharläst.se består främst av elever på skolor som även tillämpar Legilexis verktyg för att följa elevers läsutveckling, och antalet användare ökar stadigt varje år. Detta tyder på en potential för att användningen av jagharläst.se också kan öka. Sajten har inte uppdaterats på flera år, vilket har resulterat i en föråldrad design samt bristande funktionalitet och användarvänlighet.

Scope

Eleverna kan både skriva bokrecension och göra lovutmamingar på jagharläst.se. Efter researcharbetet prioriterades flödet för bokrecension då det är starkare kopplat till syftet & målet med jagharläst.se samt att det var det flödet som orsakade flest painpoints.

Research-mål

Få en förståelse för vad som motiverar lågstadieeleverna till att läsa och skriva bokrecensioner & förstå vad de stöter på för hinder på jagharläst.se bokrecension idag.

Intervjuer & enkät

Jag gjorde 3 användarintervjuer och skickade ut en enkät till som besvarades av 76 lärare och föräldrar till lågstadieelever som använder jagharläst.se som besvarade frågor om vad som motiverar eleverna till att läsa och skriva bokrecension.

Fyra teman som utkristalliserades kopplade till att skriva bokrecension

Insikter

Jag fann fyra teman kopplade till att skriva bokrecension på jagharläst.se där det första temat “se resultat” var det som nämndes flest gånger.

  1. Se resultat
  2. Tävling & belöning
  3. Visa & dela
  4. Rätt nivå

Heuristisk utvärdering, användnigstest & beteendeanalys med heatmaps

Jag gjorde en heuristisk utvärderning för att snabbt kunna identifiera potentiella problem i användarupplevelsen, gjorde ett användningstest med en lågstadieelev samt analyserade beteenden utifrån heatmaps som jag sammanställde i en användarresa.

Användarresa baserad på insikter från research

Insikter

Majoriteten av painpointsen uppstod i “skriva-fasen”

  • Att inte kunna backa ett steg i taget
  • Svårt att söka upp och hitta rätt bok
  • Får ingen hjälp att rätta till fel (exempelvis ett obligatoriskt fält som lämnats oifyllt)
  • Vissa frågor är formulerade med för komplicerade ord
  • Svårt att få en överblick över sin bokrecension
  • Otillfredställande och otydlig feedback när recensionen skickats in

Prioritering och idégenerering

Workshop

Efter att ha samlat in data och insikter från användarna var det nödvändigt för mig att prioritera och utveckla tekniskt genomförbara lösningar. För att åstadkomma detta faciliterade jag en idégenereringsworkshop med produktägare, projektledare och utvecklare, där vi utgick från How Might We-frågor som formulerats baserat på de insikter och problem som framkommit under researchfasen.

Resultat av workshop

De lösningsförslag som röstats fram av deltagarna fick prioriteras i en high-impact/low-effort matris, de förslag som hamnade i 1a kvadranten kunde jag ta med till skissbordet.

Geniknölar som gnuggas i workshopen

Lösningsförslag i en effort/impact matris

Skiss & design

Handritade skisser och wireframes

Jag är en stark förespråkare av handskisser, jag tycker det är ett lätt sätt att testa idéer där det är mindre risk att fastna i detaljer. i Detta projekt gjorde jag först många snabba handskisser för att sedan rita upp wireframes i Figma med regelbundna feedback loopar.

Snabba handskisser på elevsida och recensionsflöde

Wireframes på elevsida och flödet för bokrecension

4 - summering:

Insikter & lärdomar

Avgränsning & prioritering

Man vill ofta göra väldigt mycket, och det blir lätt för mycket. Min ingångspunk i projektet var att “göra om hela sidan” vilket också var den initiala beskrivningen från uppdragsgivaren, men jag insåg att det blev lite för brett och för stort för den begränsade tiden jag hade. Det resulterade i att jag tog ett lite för stort grepp från början när jag istället borde ha gjort många användningstester. Det hjälpte därför att avgränsa mig och koncentrera mig på flödet för att skriva bokrecension.

Få in fler perspektiv

Det var otroligt givande att få in fler perspektiv och förslag på lösningar från både projektledarsidan och utvecklare för att få en förståelse för vad som är tekniskt och ekonomiskt genomförbart.

Testa oftare

Design måste alltid itereras för att förbättras för slutanvändaren. Jag hade önskat att jag hunnit testa med fler användare för att verifiera min design.

fler projekt:

Internverktyg för Roder Innovation

Utforska hela projektet ->