Annika Zepp
Lena Sturm
Max Mittelstädt
A mobile application designed to assist users during unpredictable emergencies (e.g., earthquakes, floods, extreme weather) by providing real-time alerts, safe routing, family check-ins, and help request features.
Ideation, Prototyping, Evaluation, Design
Natural disasters, such as earthquakes and floods, are characterised by their unpredictability, rapid progression, and profound psychological impact on individuals. In such circumstances a reliable guidance is paramount. The primary challenge of this project was to design a mobile interface that enables users to respond rapid and accurately to emergency situations, even if they are suffering from mental and physical impairments. The project followed the DIN EN 9241-210 human-centered design process, focusing primarily on Phase 3 (Ideation) and Phase 4 (Evaluation).
The process began with independent paper sketching to foster a wide range of creative concepts without early bias. While the team designed for the same requirements, the initial concepts varied significantly in complexity from feature-heavy interfaces to minimalist, fast-action screens. We then reviewed these sketches as a team and synthesized our best ideas into a shared product backlog. During this phase, we also utilized AI tools as brainstorming partners to explore common design patterns, though we noted that AI-generated results were highly inconsistent depending on the prompt.
To define the Information Architecture, the team utilized a bottom-up card sorting approach, grouping features into six core categories: Dashboard, Map, Help, Messenger, Learn, and Settings. As well a top-down approach to define the primary user goals during a crisis, such as requesting help, reporting incidents, checking the safety status of family members, and accessing learning materials.
Designing navigation for an emergency app requires a careful balance: users need immediate access to life-saving tools without being overwhelmed by interface clutter. - A purely persistent navigation bar (bottom tab bar) would feel crowded and overwhelming if it included all six main categories. - A purely transient navigation (hidden menu) would risk hiding critical, urgent functions during a crisis. Therefore, the most essential, time-critical functions were implemented in a persistent bottom tab bar, while secondary features were housed in a transient side drawer. In a later iterations, this architecture was refined: by splitting the original "Help" section into distinct "Help" and "Report" tabs for quicker access, and moved the less urgent "Learn" section into the side drawer to prioritize immediate incident reporting during an active crisis.
The team conducted comprehensive testing of AI wireframing tools (including Uizard, MockFlow, Visily and Figma Make) with the objective of digitising paper sketches. However, AI tools proved highly inconsistent, frequently altering unintended elements and lacking standard design proportions. Most importantly, they severely hindered team collaboration. Consequently, the team transitioned to a manual, low-fidelity wireframing approach in Figma, utilising a shared UI kit.
To validate the concepts, the team conducted remote, think-aloud usability testing with 12 participants using a simulated earthquake scenario. The study utilized a between-subjects design to test two prototype variants (Variant A vs. Variant B) and measured outcomes using the System Usability Scale (SUS) and User Experience Questionnaire (UEQ). Based on the user feedback, the team adapted and redesigned the application.
The final phase involved translating the low-fidelity wireframes and user evaluation into high-fidelity prototypes based on Apple iOS 26 and Google Material Design 3 guidelines. As AI generation tools failed to properly apply platform-specific details such as Apples Liquid Glass effect, the team manually designed the final screens using official component libraries, enabling dynamic variables in Figma, an interactive 6-level warning system, advanced map filtering, and location-based safety indicators inside community group chats.