02 / 03 Parprojekt med Lukas Fallström Mobil UX/UI och Flutter
Skyddsrumskompassen
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
A Telefonen först
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.
Hitta, jämför och byt mål. Se kompass, karta, lista och inställningar tillsammans.
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.
B En stabilare kompassnål
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.
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
C Kompass, karta och lista
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.
Åt vilket håll ska jag?
Visar riktning och avstånd direkt.
Var är jag i förhållande till målet?
Visar användarens position och valt skyddsrum.
Vill jag välja ett annat skyddsrum?
Gör det möjligt att jämföra och byta mål.
D Från visuell prototyp till app
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.
E Tillgänglighet och resultat
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.
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.