UX Design

UX Design with Focus on Domain-Specific Features

The Neighborhood Emergency Preparedness Hub is designed for emergency preparedness, help requests, volunteer coordination, and user safety. Since users may interact with the system under stress, the UX prioritizes speed, clarity, trust, and privacy.

Core UX Priorities

• Fast access to critical actions such as requesting help, checking assignments, and viewing emergency information
• Clear forms with readable labels, grouped sections, and direct validation messages
• Low cognitive load for users who may be in urgent or stressful situations
• Privacy-aware handling of health, location, contact, and profile information
• Consistent experience across web and Android clients

Target Users

User Group	UX Need
People requesting help	Submit a structured help request quickly, optionally as a guest
Volunteers	Toggle availability, view assigned requests, resolve or cancel assignments
Registered community members	Manage profile, health, location, privacy, profession, and expertise data
Admin users	View system-level users, help requests, announcements, and statistics

Domain-Specific Design Decisions

Emergency Help Requests

The help request flow is structured around information that matters during an emergency:

• Type of help needed
• Number of affected people
• Risk flags and vulnerable groups
• Description of the situation
• Location details
• Contact information
• Explicit consent

The system also supports guest help requests, because requiring account creation during an emergency could delay assistance. Guest users receive a request-specific access token, which limits access to only their own request.

Volunteer Coordination

Volunteer UX focuses on actionability. Volunteers can mark themselves available, receive an assignment, inspect request details, and resolve or cancel the assignment. The assignment screen emphasizes task-relevant information such as request description, contact details, location, and current status.

Profile and Privacy

The profile is designed as emergency-response data, not just account information. It separates:

• Basic profile information
• Physical information
• Health information
• Location information
• Privacy settings
• Profession and expertise areas

This separation helps users understand why each type of data is collected and gives them control over sensitive information. Privacy controls allow users to manage visibility for profile, health, and location data.

Emergency Information

Emergency numbers, news, gathering areas, and emergency information pages are separated from general app content. This makes critical resources easier to find and scan quickly.

Visual Design Language

The product uses a clean red-white visual language:

Design Element	Purpose
Primary red	Main actions, selected states, urgency-related emphasis
White surfaces	Forms, cards, and primary content areas
Soft gray background	Calm page structure and visual separation
Subtle borders	Input fields, sections, and dividers
Clear typography	Fast scanning and readability

Red is used as an action and urgency color, but not as a dominant background. This keeps the interface calm while still fitting the emergency domain.

Web and Mobile Consistency

The web and Android clients follow the same product language:

• Shared red-white color direction
• Similar authentication and profile flows
• Reusable button, input, card, dropdown, checkbox, and toggle patterns
• Consistent section-based layouts
• Similar navigation concepts for core features

This consistency helps users move between platforms without relearning the interface.

Accessibility and Usability

The UX supports accessibility through:

• Large page titles and clear section headings
• High contrast between text and background
• Predictable primary and secondary actions
• Direct validation messages
• Avoidance of crowded screens
• Grouped forms based on user intent

These choices are especially important because emergency users may have limited time, attention, or device conditions.

Summary

Domain Need	UX Response
Request help quickly	Structured help request form with required emergency details
Support users without accounts	Guest request flow with request-specific access token
Coordinate volunteers	Availability toggle and assignment workflow
Share useful responder data	Profile, health, location, profession, and expertise sections
Protect sensitive data	Explicit privacy and visibility controls
Provide trusted resources	Emergency numbers, news, and gathering areas
Maintain consistency	Shared visual language across web and Android

Overall, the UX design reflects the emergency preparedness domain by focusing on clarity, speed, privacy, and trustworthy interaction patterns.