Back to Work

Back to Work

Back to Work

Syllabus

Syllabus

Role: Product owner, UX/UI Designer, Researcher, Design System Lead.

Client: Swedish Civil Contingencies Agency (MSB)

Tools: SwiftUI, RealityKit, Arduino, Cardboard prototyping.

Project overview

As part of a 10-week prototyping course, we were given a scenario based on the Swedish Civil Contingencies Agency (MSB):


How can people train for crisis situations like evacuating to a shelter?


In teams, we explored the problem space and developed early concepts. I then continued independently, designing and building a high-fidelity prototype that included a Vision Pro app and a connected physical device.

The Challenge

The Challenge

Public knowledge about civil defense shelters in Sweden is limited. Many don’t know:


  • Where the nearest shelter is

  • What to bring during evacuation

  • How to behave in a shelter


While MSB shares this information on its website, it’s static and text-heavy. We focused on how to make this knowledge more accessible through experiential training.

The Design Process

The Design Process

The Design Process

Research and Early Concepts

In the early phase, our team conducted background research, mapped out user needs, ran a design sprint, and created low-fidelity mockups.


We used the 4Ws Template to frame the problem and then we brainstormed and prototyped ideas. Two directions stood out:

  • A tablet-based guide for home preparedness

  • A headset-based experience for immersive, step-by-step training

In the early phase, our team conducted background research, mapped out user needs, ran a design sprint, and created low-fidelity mockups.


We used the 4Ws Template to frame the problem:


We brainstormed and prototyped ideas like foldable checklists, AR glasses, and printed wearables. Two directions stood out:


  • A tablet-based guide for home preparedness

  • A wearable or headset-based experience for immersive, step-by-step training


In the early phase, our team conducted background research, mapped out user needs, ran a design sprint, and created low-fidelity mockups.


We used the 4Ws Template to frame the problem:


We brainstormed and prototyped ideas like foldable checklists, AR glasses, and printed wearables. Two directions stood out:


  • A tablet-based guide for home preparedness

  • A wearable or headset-based experience for immersive, step-by-step training


High-Fidelity Prototype

High-Fidelity Prototype

High-Fidelity Prototype

After the initial concept and low-fidelity exploration, it was time to develop an integrated high-fidelity prototype. Here I focused on building both a digital application for Apple Vision Pro using SwiftUI and a physical Arduino-based device that interacted with it in real time.


To begin the design I created wireframes for the app with Apple Vision Pro in mind, focusing on how users might interact with immersive content in a crisis training context.

Features

The goal with the immersive training app was to translate shelter preparedness into an immersive, self-directed training experience.

The app includes four core features that is designed to be lightweight but informative, offering hands-on learning in a calm, low-stakes setting.


  1. Shelter Map: Shows nearby shelters using Apple Maps

  2. Alarm Exercise: Users explore different alarm signals, which also trigger responses in the physical prototype

  3. Shelter Room: A static image of a typical shelter with tappable objects for contextual learning

  4. Checklist Task: A timed challenge to “collect” necessary items for shelter use

The goal with the immersive training app was to translate shelter preparedness into an immersive, self-directed training experience.

The app includes four core features that is designed to be lightweight but informative, offering hands-on learning in a calm, low-stakes setting.


  1. Shelter Map: Shows nearby shelters using Apple Maps

  2. Alarm Exercise: Users explore different alarm signals, which also trigger responses in the physical prototype

  3. Shelter Room: A static image of a typical shelter with tappable objects for contextual learning

  4. Checklist Task: A timed challenge to “collect” necessary items for shelter use

The goal with the immersive training app was to translate shelter preparedness into an immersive, self-directed training experience.

The app includes four core features that is designed to be lightweight but informative, offering hands-on learning in a calm, low-stakes setting.


  1. Shelter Map: Shows nearby shelters using Apple Maps

  2. Alarm Exercise: Users explore different alarm signals, which also trigger responses in the physical prototype

  3. Shelter Room: A static image of a typical shelter with tappable objects for contextual learning

  4. Checklist Task: A timed challenge to “collect” necessary items for shelter use

The Arduino Box

To complement the app, I built a physical prototype: a small, standalone device with four buttons and integrated sound and light feedback. Pressing a button plays a specific Hesa Fredrik alarm signal and triggers a flashing LED, simulating how the alerts would feel in real life.


The device is wirelessly synced with the app. When a user triggers an alarm from the Vision Pro interface, the physical box responds instantly. This real-time interaction adds a sensory dimension to the training, which is especially helpful for users with hearing or visual limitations and it reinforces the seriousness of the signals in a tangible way.

Take Away

This project helped me explore how to design both digital and physical experiences around crisis preparedness. Prototyping for Apple Vision Pro taught me to think spatially, while building the Arduino device showed me how to make abstract ideas more tangible. Taking the project from team research to solo execution also improved my ability to make clear design decisions and iterate with focus.