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.

Login to continue

Log in as an Emergency Responder

Don't have an account?

Government ID

Enter your ID

or

Email or Phone

Enter your Email or Phone

Password

Enter your Password

Forgot password?

Login

Register as an Emergency Responder

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

Register

This access is only for verified emergency personnel.

1

2

First name

First Name

Last name

Last Name

Email

Enter your Email

Phone number

Phone number

Passward

Enter Password

Confirm your password

Confirm Password

Next

Register

This access is only for verified emergency personnel.

1

2

Next

Government Issued ID Number

Enter your ID

Organisation Name

NEMA, Red cross etc

Upload ID verification (PDF, PNG, JPEG max 5MB)

Upload

Operational Zone

City

Select

Region

Select

I agree to the terms and conditions

I agree to be contacted during disaster response deployments.

Complete

This access is only for verified emergency personnel.

1

2

Login as a Respondent

Thank you for registering!

Our team will review your documents and get back to you within 24–48 hours.

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

Email

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

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

Vaishnavi Poosa

Vaishnavi Poosa