The Safety Beacon
Initiative
Authentication Flow
Visual and UX designer [Volunteer]
2025
The Safety Beacon Initiative is a disaster readiness platform
that equips communities with tools, training, and real-time
alerts. Through VR/AR simulations and responder registration,
it empowers swift, informed action during emergencies.
Login
Centered layout draws immediate attention to form
Hero image communicates urgency & action (emergency context)
Remember me / forgot password options are familiar to users
Soft blue background with a white card layout helps the form feel organised, trustworthy, and non-intimidating, making users more likely to complete it.
UX Goals & Design Approach
🔐 User wants secure and successful registration
OTP verification, confirmation screens, and step-by-step feedback
🔠 Non-fluent English speaker needs understandable form
Plain language, no jargon, standard global input patterns
🔄 Returning user forgot password and wants quick recovery
Linear reset flow, clear OTP feedback, confirmation of email sent.
📱User on phone in disaster zone needs easy interaction
Mobile-first layout, large touch targets, high contrast, single-column forms
🕝 First-time responder wants quick registration
Short, simple form with large CTAs and progress indicators
User Story
How My Design Addresses It
Registration Flow
Multi-step form avoids overwhelming new users
Dropdowns used for region/role help reduce typing effort
Success state includes next-step CTA for smooth transition
Responsive Design Strategy
Buttons and input fields sized at 44px+ to ensure effortless interaction during high-stress scenarios.
The registration process is broken into multiple steps with visual progress indicators.
Primary actions placed within easy reach for one-handed use.
Color contrast, font size, and touch zones are optimised for visibility and usability in outdoor or emergency settings.
Password Recovery Flow
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Email sent
An OTP has been sent to your email.
check you inbox or spam folder if you don’t see it. If you still haven’t received the email, you can request a new one.
Ok done!
Didn’t get the email? Resend email
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
Verify
Didn’t get the email? Resend email
4
4
4
0
0
0
Welcome Back!
Send Email
change password to continue
New Password
Enter your new password
Confirm your password
Confirm new password
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
New Password Created
congratulations!
You can now login with your new password
Login
Initiates the reset process
Email Sent Confirmation
OTP Verification Screen
Set New Password
Password Reset Confirmation and redirection
Registration Flow
Password Recovery
Forgot your password?
Follow the prompt to verify your account
Email address
Enter your Email
Continue
An OTP has been sent to your email.
check you inbox or spam folder if you don’t see it. If you still haven’t received the email, you can request a new one.
Received
Email sent
Didn’t get the email? Resend email
Forgot your password?
Follow the prompt to verify your account
Verify
Didn’t get the email? Resend email
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
Forgot your password?
Follow the prompt to verify your account
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
1
2
3
4
5
6
Forgot your password?
Follow the prompt to verify your account
Verify
Didn’t get the email? Resend email
Continue
Welcome Back!
change Password to continue
Forgot your password?
Follow the prompt to verify your account
New Password
Enter Password
Confirm New Password
Confirm Password
Login
New Password created
New Password created!
Congratulations!
you can now login with your new password
User Testing Insights
80% of testers successfully completed the OTP step without confusion, citing the clean layout, clear instructions,
Users hesitated at unclear microcopy like “Resend” until tooltip help was added.
Mobile users found bottom-aligned CTAs easier to reach, improving task completion speed.
First-time users skipped reading confirmation screens, this highlighted the need for visual checkmarks and brief summaries.
Design Takeaways
Clarity builds trust: Secure flows must inform, not overwhelm.
Inline validation, confirmation messages, and visible errors reduced drop-offs.
Designing for constraints early helped eliminate redundancies.
Splitting steps lowered form fatigue and improved conversion.
Register as a Responder
First name
First name
Enter your email
Phone number
Enter your mobile number
Password
Enter your password
Confirm your password
Confirm your password
Last name
Last name
Next
This access is only for verified emergency personnel.
1
2
1.Personal information
3.Registration complete
Thank you for registering!
Log in as a Respondent
Our team will review your documents and get back to you within 24–48 hours.
Go back to Homepage
1
2
The Safety Beacon
Initiative
Authentication Flow
Visual and UX designer [Volunteer]
2025
The Safety Beacon Initiative is a disaster readiness platform
that equips communities with tools, training, and real-time
alerts. Through VR/AR simulations and responder registration,
it empowers swift, informed action during emergencies.
UX Goals & Design Approach
🔐 User wants secure and successful registration
OTP verification, confirmation screens, and step-by-step feedback
🔠 Non-fluent English speaker needs understandable form
Plain language, no jargon, standard global input patterns
🔄 Returning user forgot password and wants quick recovery
Linear reset flow, clear OTP feedback, confirmation of email sent.
📱User on phone in disaster zone needs easy interaction
Mobile-first layout, large touch targets, high contrast, single-column forms
🕝 First-time responder wants quick registration
Short, simple form with large CTAs and progress indicators
User Story
How My Design Addresses It
Login
Centered layout draws immediate attention to form
Hero image communicates urgency & action (emergency context)
Remember me / forgot password options are familiar to users
Soft blue background with a white card layout helps the form feel organised, trustworthy, and non-intimidating, making users more likely to complete it.
Password Recovery Flow
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
New Password Created
congratulations!
You can now login with your new password
Login
Password Reset Confirmation and redirection
Welcome Back!
Send Email
change password to continue
New Password
Enter your new password
Confirm your password
Confirm new password
Set New Password
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
Verify
Didn’t get the email? Resend email
4
4
4
0
0
0
OTP Verification Screen
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Email sent
An OTP has been sent to your email.
check you inbox or spam folder if you don’t see it. If you still haven’t received the email, you can request a new one.
Ok done!
Didn’t get the email? Resend email
Email Sent Confirmation
Forgot your password?
Email Address
Enter your email
Send Email
Follow the prompt to verify your account
Initiates the reset process
Registration Flow
Multi-step form avoids overwhelming new users
Dropdowns used for region/role help reduce typing effort
Success state includes next-step CTA for smooth transition
Register as a Responder
First name
First name
Enter your email
Phone number
Enter your mobile number
Password
Enter your password
Confirm your password
Confirm your password
Last name
Last name
Next
This access is only for verified emergency personnel.
1
2
Personal information
verification
Register as a Responder
Government-issued ID Number
Enter your ID Number
Organization Name
NEMA, Red Cross, etc.
Upload ID Verification (PDF, PNG, JPEG Max 5MB)
Upload
Submit Application
This access is only for verified emergency personnel.
Operational Zone
City
Select
Region
Select
I agree to the terms and conditions
I agree to be contacted during disaster response deployments.
1
2
Registration complete
Thank you for registering!
Log in as a Respondent
Our team will review your documents and get back to you within 24–48 hours.
Go back to Homepage
1
2
Responsive Design Strategy
Buttons and input fields sized at 44px+ to ensure effortless interaction during high-stress scenarios.
The registration process is broken into multiple steps with visual progress indicators.
Primary actions placed within easy reach for one-handed use.
Color contrast, font size, and touch zones are optimised for visibility and usability in outdoor or emergency settings.
Registration Flow
Password Recovery
Forgot your password?
Follow the prompt to verify your account
Email address
Enter your Email
Continue
An OTP has been sent to your email.
check you inbox or spam folder if you don’t see it. If you still haven’t received the email, you can request a new one.
Received
Email sent
Didn’t get the email? Resend email
Forgot your password?
Follow the prompt to verify your account
Verify
Didn’t get the email? Resend email
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
Forgot your password?
Follow the prompt to verify your account
Enter OTP here
Enter the 6-digit code sent to your email address
Time expired. Resend code
1
2
3
4
5
6
Forgot your password?
Follow the prompt to verify your account
Verify
Didn’t get the email? Resend email
Continue
Welcome Back!
change Password to continue
Forgot your password?
Follow the prompt to verify your account
New Password
Enter Password
Confirm New Password
Confirm Password
Login
New Password created
New Password created!
Congratulations!
you can now login with your new password
Design Takeaways
Clarity builds trust: Secure flows must inform, not overwhelm.
Inline validation, confirmation messages, and visible errors reduced drop-offs.
Designing for constraints early helped eliminate redundancies.
Splitting steps lowered form fatigue and improved conversion.
User Testing Insights
80% of testers successfully completed the OTP step without confusion, citing the clean layout, clear instructions,
Users hesitated at unclear microcopy like “Resend” until tooltip help was added.
Mobile users found bottom-aligned CTAs easier to reach, improving task completion speed.
First-time users skipped reading confirmation screens, this highlighted the need for visual checkmarks and brief summaries.
Go to next project
Creative Highlights
Go to next project
Creative Highlights