Love Waern

02 / 03 Parprojekt med Lukas Fallström Mobil UX/UI och Flutter

Skyddsrums­kompassen

Idén var rak: låt en pil peka mot närmaste skyddsrum. När designen blev en fungerande app visade sig den centrala frågan vara fysisk: position, rörelseriktning och telefonens orientering är tre olika signaler. Stabilare betydde inte alltid bättre.

Min roll
Kompass-, kart- och UI-design samt utveckling
Period
VT 2026
Team
Love Waern och Lukas Fallström
Verktyg
Figma, Flutter/Dart och ArcGIS-geodata
Fokus
Sensorlogik, tillgänglighet och mobil interaktion
Status
Komplett Android-app, ej publicerad
Kompassvyn visar riktning, avstånd, adress och närliggande skyddsrum.
Huvudvyn prioriterar ett beslut: åt vilket håll ligger det valda skyddsrummet?
En senare mobilversion med kompasspil, avstånd och lista.
Avstånd, adress och kapacitet ger sammanhang utan att konkurrera med pilen.
Tidig teknisk prototyp med kompass, mål och lista.
Den tekniska kärnan prövades innan den visuella formen var satt.

En komplett app,en planerad partner

Vi utvecklade den fullständiga appen för telefonen först. Där kunde kompass, karta, lista och inställningar fungera tillsammans i ett komplett flöde. WearOS fanns i planen som en senare partnerapp: en förenklad vy för snabb riktning på handleden.

Telefon

Hitta, jämför och byt mål. Se kompass, karta, lista och inställningar tillsammans.

WearOS · plan

Korta vägen till den mest tidskritiska informationen: riktning och avstånd till valt skyddsrum.

Offentlig skyddsrumsdata via en ArcGIS-tjänst gjorde idén tekniskt konkret. Vi kunde hämta skyddsrum nära telefonens position och koppla dem till en första Flutter-prototyp. AI-stöd användes i den tidiga utforskningen och som bollplank i implementationen, men genomförbarheten avgjordes först när datan och sensorlogiken fungerade i prototypen.

Lugnare signal,samma riktning

Magnetometern reagerade på störningar och fick kompassnålen att darra, särskilt inomhus. Vi lade därför till ett lågpassfilter som dämpade små hopp i signalen och gav nålen en mjukare rörelse. Riktningen blev lättare att följa utan att vi ändrade vad pilen pekade mot.

Vi prövade även GPS-färdriktning som extra stabilisering under gång. Signalen blev lugnare, men när telefonen vreds åt sidan följde pilen rörelsebanan i stället för telefonens riktning. Därför behöll vi magnetometern som grund och använde filtret för att jämna ut rörelsen.

Designinsikt

En stabilare signal är inte bättre om pilen slutar följa hur användaren håller telefonen.

Det som såg ut som brus i sensorn var också en fråga om tillit: följer pilen telefonen, eller följer den min rörelsebana?

Från implementation till användarupplevelse

Tre vyer,tre frågor

Kompassvyn var utgångspunkten, men en ensam pil gav för lite sammanhang när användaren ville kontrollera sin position eller välja ett annat skyddsrum. Därför byggde vi tre kompletterande vyer kring olika frågor.

01 · Kompass

Åt vilket håll ska jag?

Visar riktning och avstånd direkt.

02 · Karta

Var är jag i förhållande till målet?

Visar användarens position och valt skyddsrum.

03 · Lista

Vill jag välja ett annat skyddsrum?

Gör det möjligt att jämföra och byta mål.

Designbeslut blevproduktbeteende

Vi arbetade från wireframes till en hi-fi-prototyp i Figma och vidare genom fyra dokumenterade mobilversioner, V0–V3. Fokus flyttades från att bevisa datakopplingen till att skapa en tydlig hierarki för riktning, mål och alternativ.

Flutter gjorde designen prövbar som beteende, inte bara som skärmar. Den valda adressen behövde uppdateras när positionen ändrades, pilen behövde kombinera bäring och heading, och ett manuellt valt mål fick inte omedelbart ersättas av automatiken.

Automatiken valde ett närliggande skyddsrum vid start. Ett tryck i listan låste sedan ett nytt mål, och samma val följde med mellan kompass och karta. Ett system som försöker hjälpa får inte samtidigt ta tillbaka ett medvetet användarval.

Tidig teknisk prototyp med mål, avstånd och lista.
Tidig kärna: position, mål och riktning i samma flöde.
Version 1 med kompass och kalibreringsinstruktion.
V1 gav kompass och kalibrering en tydligare struktur.
Version 2 med tydligare pil, avstånd och lista.
V2 skärpte hierarkin mellan pil, avstånd och lista.

Riktning utan krav påvisuell tolkning

Tillgänglighet ingick i kraven från början. Standardkomponenter behöll sitt inbyggda stöd, medan egenbyggda delar fick Semantics-beskrivningar för bland annat riktning, avstånd, adress och valt skyddsrum. Vi använde TalkBack under utvecklingen och i den färdiga appen.

Information kommunicerades inte enbart genom nålens form eller färg. Avstånd, adress och kapacitet visades i text, valt skyddsrum markerades tydligt i listan och kompassvyn samlade riktning, avstånd och adress i ett uppläsningsbart meddelande. Listan blev också ett alternativ till att tolka kartan visuellt.

Den färdiga Android-appen innehöll kompass, kartväxling, valbar lista över närliggande skyddsrum, adress, avstånd och kapacitet. ArcGIS-data filtrerades på aktiv status och sparades lokalt som reserv efter ett hämtningsfel.

Nästa steg

Lösningen behöver valideras med användare och på fler enheter—framför allt hur snabbt riktningen förstås i rörelse och hur stabilt sensorerna beter sig mellan olika telefoner och miljöer.