Fallstudie 02 · Skolprojekt, individuellt
Dunderkuren VC
Hur kan en osäker senior välja rätt besökstyp, fysiskt, video eller telefon, utan att behöva gissa?
- Min roll
- UX/UI-design, från pappersskiss till klickbar prototyp
- Team
- Individuell uppgift
- Tid
- Våren 2026
- Verktyg
- Papper och penna, Figma med ett plugin för tillgänglighet
Vem, vad och varför
discovery: vem som fastnar, och var
Vem flödet är till för
Den osäkra senioren
Behöver ofta vård, men känner sig otrygg i digitala gränssnitt
- Mål
- Hamna rätt direkt, med tydliga bekräftelser i de kritiska stegen
- Frustration
- Svåra begrepp som videomöte och telefonrådgivning, och rädslan att välja fel
Problemet
Patienten saknar den medicinska kunskapen för att veta vilken besökstyp som passar, och tvingas gissa.
- Mål
- Färre felbokningar för vårdcentralen och större trygghet för patienten
- Begränsningar
- Bara kärnflödet. Inloggning, tidsval och bokningsbekräftelse valdes bort
En 70-åring har en mental modell av läkarbesöket: man hälsar och berättar om besväret → flödet börjar som ett samtal, inte som ett formulär
Fel besökstyp tar dyr tid, t.ex. ett fysiskt besök för ett eksem som hade kunnat ses i video → systemet rekommenderar, patienten slipper gissa
Den som känner sig otrygg kan avstå vård helt → språket blir ett designverktyg: inga fackord och max tre val per vy
Så kom jag dit
från papper till klickbar prototyp, en nivå i taget
- 1
Analysera
Gick igenom caset och hittade smärtpunkterna för en senior. Satte mål, krav och tydliga constraints.
- 2
Skissa
Research på 1177 och andra vårdcentraler. Skisser på papper av olika sätt att guida steg för steg.
- 3
Strukturera
Wireframes i Figma som låste flödet, texterna och hierarkin, med en failure path för när något går fel.
- 4
Systematisera
Designsystem med tokens och komponenter, kontrollerat mot WCAG AA. Mockups med tydliga states.
- 5
Prototypa
Klickbar hi-fi-prototyp med variabler och logik som simulerar rekommendationen.
Designbeslut, och varför
varje nummer i bilden har ett skäl
123En fråga i taget
- Eftersom
- En stängd, dialogliknande väg håller nere informationsmängden, som hos en läkare. Breda frågor först utesluter akuta tillstånd, sedan smalnar tratten av.
- Bortvalt
- Listor och kategorier som patienten själv måste leta i.
Stora klickytor före en clean look
- Eftersom
- Många seniorer ser och rör sig sämre. Knapparna ser likadana ut och ligger på samma plats genom hela flödet, så att de känns igen.
- Bortvalt
- Ett mindre och luftigare gränssnitt, som hade sett modernare ut.
En kort paus innan svaret
- Eftersom
- En vänteskärm med laddningsstapel och texten ”Det tar bara några sekunder…” visar att systemet har gjort en noggrann bedömning. Ett omedelbart svar kan kännas oseriöst.
- Bortvalt
- Att visa rekommendationen direkt.
Hantverket i projektet
tryggt för den som är osäker
Designsystem och prototyp
Tillgänglighet
- Kontraster och klickytor kontrollerade mot WCAG AA med ett plugin i Figma
- Vardagligt språk, inga fackliga eller tekniska uttryck
- Statusraden ”Fråga 1 av 3” visar alltid var man är i flödet
- Svarskorten har egna lägen för tryck, fokus, fel och valt, så att ett val syns direkt
- Felmeddelandet säger vad man ska göra: ”Vänligen välj ett alternativ för att gå vidare”
Failure path och handoff
Rekommendationen är den primära knappen, märkt ”Rekommendation”. Vill patienten ändå något annat finns telefontid och fysisk tid kvar som sekundära knappar, med en rad som förklarar valet: ”Jag vill hellre boka en telefontid”.
För utvecklaren finns en egen sida i Figma med centrala designval, risker, beroenden och nästa steg.
Resultat & lärdomar
klar för test, inte testad ännu
Det här lärde jag mig
Att välja bort är också design. Utan inloggning, tidsval och bekräftelse kunde jag lägga all tid på det som faktiskt minskar felbokningar: hierarkin och orden.
Nästa steg
Testa med riktiga seniorer. Prototypen är byggd för det men ännu inte användartestad, så allt här bygger på research och min egen granskning.
”Välkommen hit! Jag ska ställa några frågor nu så kommer jag berätta hur vi går vidare.”