Problem
Emergency information can be difficult to scan and act on when a user is under pressure.
School project
AquaShield
A tsunami emergency guide designed to turn critical information into clear actions before, during and after a warning.
Target group
Residents or visitors in tsunami-risk areas who need a quick overview and a more detailed personal plan.
My role
Frontend development, interaction design, UX writing, responsive layout and form feedback.
Tools
HTML, CSS, vanilla JavaScript, native form validation, dialog elements and responsive testing.
Process
From information to actions
1. Prioritise the situation
I divided the content into preparation, active warning and recovery so the user can start from the situation they are currently facing.
2. Add progressive detail
The interface gives a short overview first and uses accordions, dialogs and the interactive house diagram for information that needs more space.
3. Turn advice into a plan
The personal emergency form lets a user review required contact and evacuation information before showing a saved-plan summary.
Interaction evidence
The main user journey
Understand
The opening content explains the purpose and presents the most important safety routes.
Explore
The interactive diagram connects situations in a house with relevant safety information.
Prepare
The checklist and emergency-plan form turn general advice into personal information.
Review
Validation and a dialog summary help the user check the plan before leaving the form.
Evidence boundary: The interactions and validation are implemented in the live project. The content hierarchy has been reviewed responsively, but it has not yet been tested with people in a real emergency context.
Design and code
Choices behind the interface
UX writing
I kept headings action-oriented and separated required information from optional detail so the page is easier to scan.
Native browser features
I used semantic forms, native validation and the dialog element because the project did not need a framework or a custom component system.
Responsive structure
The navigation, cards, diagram and form stack at smaller widths so the main actions remain readable and touch-friendly.
Testing
What has been checked
Form states
The form handles empty required fields, invalid values, a complete summary, dialog closing and clearing the saved plan.
Responsive behavior
I checked the page at mobile and desktop widths and adjusted the navigation, cards and content order where they became crowded.
What is still missing
The next useful step is a task-based test with external users, followed by a review of the accuracy and tone of the emergency content.
Result and reflection
What I learned
The result is a responsive emergency-information prototype with several interaction types connected to one clear task. It demonstrates UX writing, forms, interface feedback and JavaScript behavior beyond a static layout.
I learned that interaction should reduce uncertainty. A dialog, animation or form state only helps when it makes the next action easier to understand.
Next step: I would run an external usability test and simplify any content that users hesitate over.
Usability testing plan
Can users find and act on the emergency information?
Status: Planned — external testing has not yet been completed.
Objective and participants
Test whether 3–5 adults who have not seen AquaShield before can find relevant guidance, understand the interaction and complete a personal emergency plan in a calm test setting.
Tasks
- Find the most important preparation advice.
- Use the interactive house diagram.
- Complete the personal emergency plan.
- Recover from an invalid required field.
- Find guidance for after a warning.
Observe and measure
Record task completion, critical errors, moderator assistance, hesitation or wrong turns, and participant comments. Observe scanning order, unclear labels and any form fields that cause confusion.
Pending evidence
Findings: Pending external sessions. Resulting design changes: Pending analysis of the completed test notes.