Itslearning

(EdTech, LMS · 2026)

Från 1 av 5 till 5 av 5: en redesign av Itslearnings mobilapp så att studenterna faktiskt hittar sitt slutbetyg.

(tidslinje)
6 veckor
(min roll)
Produkt- & UX-strateg
(omfattning)
Mobilapp, LMS, redesign, användbarhet
(användare)
10 IT-studenter, 23–41 år
Den omgjorda Itslearning-appen på två iPhones: startskärmen och vyn Kurser med kurskort och förloppsindikatorer.

Före

(en app som studenterna undviker)

(bakgrunden)

Designad för lärare, använd av studenter

Itslearning är en lärplattform som beskrivs som designad främst för lärare. Studenterna är en minst lika stor användargrupp, och som studenter själva märkte vi att vi undvek mobilappen och använde datorversionen i stället.

Som produktstrateg övertygade jag teamet om att välja just den här produkten och satte vår riktning: att lösa verkliga problem som studenter möter varje dag, så väl att vi kunde presentera lösningarna för Itslearning självt.

(nulägestest)

4 av 5 studenter hittade inte sitt slutbetyg

Fem studenter letade i en avslutad kurs efter kursplanen, betyget på en uppgift och kursens slutbetyg. Alla hittade de tre första, på olika vägar, men slutbetyget var en helt annan historia.

1/5

hittade kursens slutbetyg

4:53

minuter i snitt för scenariot

3,2

felklick i snitt

1/5

i snittbetyg för enkelhet, tydlighet och nöjdhet

”Jag tycker att det borde finnas en flik, så att det är tydligt var jag kan se mitt slutbetyg.”
(Användare 5, 34)
”Planering och innehåll är ibland typ samma sak.”
(Användare 1, 28)

(det som inte fungerade)

Fyra användbarhetsproblem

Osynlig systemstatus

Betygen låg begravda under ”Rapporter”, eller längst ner på en översiktssida.

Ingen användarkontroll

Hybridappen skickade hela tiden iväg studenterna till externa webbläsarvyer, utan något enkelt sätt att ta sig tillbaka.

Rörig informationsarkitektur

”Planeringar” och ”Innehåll” överlappade, och samma dokument fanns på flera ställen.

Inkonsekventa standarder

Appen var på engelska och webben på svenska, och versionerna skilde sig åt mellan olika enheter.

Efter

(validerat med fem nya studenter)

(resultat)

Alla studenter hittade sitt slutbetyg

5/5

hittade kursens slutbetyg(upp från 1/5)

1:25

minuter i snitt(ner från 4:53)

0

felklick(ner från 3,2)

4,8–5

av 5 för enkelhet, tydlighet och nöjdhet(vårt mål var 3)

4 av 5 deltagare kallade appen ”väldigt tydlig”, och alla fem tyckte att den var ”väldigt lätt” att navigera i och sa att de var ”väldigt nöjda”.

”Upplägget är väldigt tydligt, och det är väldigt tydligt vad de olika delarna är till för. Jag tycker att det är väldigt enkelt.”
(Användare 2, 41)
”Den tidigare versionen är ju inte ens riktigt en app, den skickar dig bara till webbläsaren. Det här känns som något man faktiskt skulle kunna använda oftare.”
(Användare 4, 23)
[prototypens startskärm]

(testa själv)

Hittar du slutbetyget?

Det här är samma fyra uppgifter som våra testdeltagare fick. I den gamla appen klarade bara 1 av 5 den sista. Se hur lång tid det tar för dig i redesignen.

  1. Hitta en avslutad kurs
  2. Öppna kursplanen
  3. Hitta betyget på en uppgift
  4. Hitta kursens slutbetyg
testa prototypen ↗

(öppnar den interaktiva Figma-prototypen)

Bryggan

(så kom vi dit)

(research)

Hypoteser, effektkarta och ett test i två omgångar

Vi utgick från en heuristisk utvärdering baserad på Nielsens principer och en effektkarta med sju personas, från den stressade studenten som undrar ”Var är mitt slutbetyg?” till en student med dyslexi och en lärare. Vårt mål: mer engagemang i mobilappen och mindre frustration, mätt i antal klick, tid per uppgift och ett nöjdhetsbetyg på minst 3 av 5.

Jag föreslog att vi skulle testa ett kort användarflöde två gånger: först på tid och under tystnad för att mäta lyckade uppgifter, fel och första klick, sedan med tänka högt-metoden för att förstå varför. Det gav oss både siffror och insikter från samma fem sessioner.

(redesign)

Tre lösningar

(lösning 01)

Gör slutbetyget synligt

Före

Gamla appen: sidan ”Rapporter” öppnad i en webbläsare inuti appen, med Bedömningsöversikt och detaljerade rapporter.
Slutbetyget var gömt under ”Rapporter”, eller längst ner i en översikt över avslutade uppgifter.

Efter

Redesign: avslutade kurser (Avslutade) med slutbetyget som en bricka på varje kurskort.Redesign: vyn Betyg, som listar slutbetyget och betyget på varje uppgift i en kurs.
Slutbetyget visas direkt på varje avslutat kurskort, och alla betyg samlas på ett ställe, omdöpt från ”Rapporter” till ”Betyg”.

(lösning 02)

Förtydliga menyn och informationsarkitekturen

Före

Gamla appen: listan ”Innehåll”, där mappar och dokument blandas i en lång tabell.
”Planeringar” och ”Innehåll” överlappade, och alla kurser låg blandade i en enda lista bakom en hamburgermeny.

Efter

Redesign: den hopfällbara vyn ”Kursmaterial”, grupperad efter ämne.
”Planeringar” och ”Innehåll” slogs ihop till ett hopfällbart ”Kursmaterial”, med ”Kursplan & Schema” och ”Inlämningsuppgifter” som egna, tydliga kategorier.

(lösning 03)

Gör appen native

Före

Gamla appen: sidan Kurser i en webbläsarvy, med stjärnmärkta kurskort som inte gick att klicka på.
Hem och Kurser var separata vyer, kurskorten gick inte att klicka på och länkar öppnades i externa webbläsarvyer.

Efter

Redesign: en native Kurser-vy med klickbara kurskort, datum och förloppsindikatorer.
En samlad ”Kurser”-vy med klickbara kort som visar namn, datum och en förloppsindikator, inga externa länkar och ett appspråk som studenterna själva kan välja.

(designdetaljer)

Trogen varumärket och tillgänglig

Redesignen följer Itslearnings varumärkesriktlinjer, färger, ikoner och typsnittet Lato, med kontrastförhållanden på minst 6,48:1, en minsta textstorlek på 16px, stora tryckytor och en konsekvent layout på varje skärm.

Pushnotiser var en av de mest efterfrågade funktionerna, men vi valde medvetet bort dem: vi kunde inte lösa alla problem på en gång.

(min roll)

Strategi, och att ta ansvar för ett misstag

Som produkt- och UX-strateg valde jag produkten, satte visionen och höll omfattningen fokuserad på det flöde som gjorde mest ont.

Efter nulägestestet upptäckte vi att deltagarna hade använt två olika versioner av appen, vilket snedvred resultaten. Jag föreslog en retrospektiv i teamet, vi undersökte versionerna på olika enheter, och till valideringen rekryterade vi bara användare av den äldre versionen, så att jämförelsen skulle hålla.

(reflektion)

Det här tar jag med mig

Kontrollera testförutsättningarna

Kolla appversioner och enheter före testet, inte efter.

Avgränsa med avsikt

”Vi kan inte lösa alla problem på en gång” gjorde redesignen skarpare.

Se bortom appen

Studenterna upplever appen som mindre användbar när lärarna sprider ut information över Teams och mejl. Lärarna blir nästa studie.

Nästa steg: användbarhetsstudier med lärare och pedagoger, test av en dashboard och en funktion för att följa framsteg, svepgester i prototypen och enklare förhandsvisningar av dokument.

Vill du gå igenom prototypen tillsammans? Hör av dig.

säg hej →