What is DANAlerta?
DANAlerta is a Mobile-First focused app designed to warn the community of possible flood risks. It displays current and forecast flood risk levels in a single interface. The primary goal was to create a tool that reliably alerts users when a water level reaches a critical value, allowing them to react in time. The app helps users set an alarm by showing official risk values and includes an Emergency Mode (SOS) to call for help in dangerous situations.
💡 The Challenge and Research: Usability in Crisis
The challenge for DANA Alerta was designing a critical utility application for flood alert management. The primary UX goal was reliability and usability under stress, where the user needs clear information and quick actions. Research focused on identifying common friction points in emergency interfaces and Mapping Critical Flows to ensure messages and maps were legible for all users.
✅ UX Strategy: Accessibility as a Design Priority
Accessibility was the pillar of the design strategy, understanding that visual or cognitive disability should not be an impediment in an emergency situation. Through wireframes and prototypes, the strategy focused on reducing the user's cognitive load, prioritizing critical content over any decorative element.
Information Architecture and Design for WCAG Principles
The design of the Site Map and the Information Architecture (IA) was the core of the strategy. A simple structure was defined to reduce the user's cognitive load under stress. This was reflected in the definition of Operable alert flows (WCAG 2.0) that require the minimum number of taps, and the guarantee that the language and navigation structure were Understandable (WCAG 3.0), using clear UX Writing to reduce anxiety.
Tab Order & Alt-Text Stark Plugin Implementation
Clear UX Writing
Clear UX Writing
💻 Technical Feasibility and Hybrid Role: Designing Critical Systems
My Frontend and Backend Development experience was essential to ensuring the reliability and performance of the alert system. Every design decision was made with a focus on feasibility and accessibility.
Technical Consideration (Backend) of Alerts:
My knowledge of APIs and database management (Fullstack) allowed me to design the notification architecture keeping in mind how critical data must be prioritized and sent without latency.
Critical Frontend Specification:
We specified the interface design so that map components and risk indicators were fast to load, using a clear HTML tag hierarchy and essential landmarks for keyboard and screen reader assisted navigation (Technical Accessibility).
Advanced Prototyping and AI Integration
To address aspects that are difficult to simulate in Figma, I used AI tools (Figma Make) to enhance the traditional prototype designs. This allowed me to simulate functionalities that require coding in the real world, such as location search using a map and a search bar with predictive text, streamlining the design process and demonstrating my ability to design with real functionality in mind.
Stark Plugin Landmarks
Figma Make Leaflet Map Implementation
Figma Make Prediction Text Implementation
🎨 Visual Design: Extreme Contrast and Clarity
Typography and WCAG Contrast:
The design adhered to the WCAG principles of Perceptibility (WCAG 1.0). A color palette with WCAG AAA contrast was defined for emergency messages, and a sans-serif typeface with high visual weight was selected to ensure the legibility of critical text.
Iconography and System Robustness:
Universal and simple iconography was designed, ensuring status communication was Understandable without solely relying on color. Furthermore, the Robustness (WCAG 4.0) of the design was specified, ensuring critical components (action buttons, alert zones) were compatible with a wide range of assistive technologies and browsers.
📈 Conclusion, Impact and Learning
Impact and Trust-Centered Design
The final proposal is an application that prioritizes total accessibility and usability in moments of stress. This approach is expected to increase user trust in the service, reduce cognitive load, and enable faster, safer decision-making during an emergency.
Key Learning
The main lesson from this project was the necessity of designing under the most stringent restrictions of accessibility and reliability. It proved that the UX process, when combined with technical vision, is the only way to guarantee usability in moments of crisis.
Impact Proof: "Before vs. After" Comparison (WCAG Achievements)
The effectiveness of the accessibility-focused strategy is demonstrated by the direct comparison between the initial design and the final proposal. The "Before vs. After" shows how the implementation of WCAG criteria transformed a complex interface into a clear, reliable, and fast alert system.
Key achievements per screen:
- Navigation and Structure:
I designed consistent and predictable sidebar navigation, increasing the size of click areas to improve usability (Large Clickable Targets, WCAG 2.5.5) and including options for adjusting text size without disrupting the design, as well as a Languages option to aid assistive technologies (Language of Parts, WCAG 3.1.2).
- Alert Detail:
Reliance solely on color was avoided to convey information by replacing icons with universally recognized warning triangles and ensuring sufficient color contrast (minimum 4.5:1) for reading alerts, essential for users with low vision. Additionally, I **modified menu label text to be more descriptive (Clear Labels, WCAG 3.3.2).
- Main Screen (Alerts):
I increased the size of information containers (Large Clickable Targets, WCAG 2.5.5) and font size, and set a wide interval for alert messages and notifications to allow users enough time to interact with the content (preventing auto-disappearing or session expiry), which is critical when reading evacuation instructions.
- Critical SOS Emergency Menu:
The SOS functionality was redesigned from a dedicated screen to a globally accessible overlay (modal). This architectural decision ensures immediate access to aid from anywhere in the application (critical in panic situations) and improves perceived load speed. The overlay design was drastically simplified, using clearer and more descriptive labels for each emergency action (WCAG 3.3.2) and a clean visual hierarchy to reduce cognitive load.
Before vs. After
Want to work together?
If you like what you see and want to work together, get in touch!
