StepSafe — Mobile Safety App

Traveling alone should not have to feel unsafe.

A safety companion for solo travelers — risk awareness, safer routes, and real support when it counts.

UX/UI Design iOS Mobile Product Design
StepSafe — mobile safety app screens

The fear starts before anything happens.

Solo travelers don't fear emergencies. They fear the street they're about to turn down — the route that felt fine on a map but doesn't feel fine at night.

Most safety tools only respond after something happens. StepSafe starts earlier.

Context

Why solo travel is still a design problem.

Environment shapes fear

Unlit streets, empty paths, and invisible safety infrastructure are the primary risk signals users scan for — before they even start walking.

Existing tools don't fit the moment

Emergency apps are designed for after something happens. Navigation apps don't account for safety. Nothing is built for the anxious in-between.

Users already build their own system

Phone calls while walking, silent location shares, longer lit routes — people have developed real safety behaviors without any product to support them.

Research Foundation

Two methods. One consistent picture.

Online Survey

A structured survey targeting women who travel alone regularly — mapping fears, avoidance behaviors, and the decisions they make under uncertainty.

28 Participants
20–55 Age range
Bangkok Location
1:1 Interviews

Twelve online interviews to go beyond survey data — understanding the emotional reality of solo travel and the workarounds people already use to feel safer.

12 Participants
22–50 Age range
Online Format
80%+

Feel alert every time they walk alone through isolated areas

98%+

Take a longer route to avoid a path that feels unsafe

85%

Contact someone they know — not emergency services — when afraid

92%

Identify unlit alleys as the most dangerous environment type

Solo travelers don't need more alerts.
They need better awareness earlier.

01

Fear is anticipatory, not reactive.

Risk awareness had to be built into the planning stage — not the emergency response.

02

Trusted contacts come first — not emergency services.

The primary support layer needed to be personal, not institutional.

03

Users choose longer routes when they know it's safer.

Users already made the safer choice instinctively. The product needed to make that option visible and easy to act on.

04

Nothing exists between uncomfortable and emergency.

That gap is where most solo travel anxiety lives — and where the product had to work hardest.

User Persona

Designed for Nuch. Validated across many.

Nuch

Student — 21 years old

Lives alone off-campus. Travels solo frequently, often returning late. Phone-first — LINE, Maps, Instagram.

Pain Points

  • Doesn't know which areas are risky before she walks them
  • Fears no one will notice if something goes wrong
  • Avoids asking for help — doesn't want to worry anyone

Behaviors Today

  • Calls a friend and stays on the line while walking
  • Shares location quietly via LINE without explanation
  • Takes the longer, lit route even when it adds time

Goals

  • Know a route is reasonably safe before she walks it
  • Feel like someone is aware of where she is
  • Have a clear, fast way to escalate if needed
Nuch — User Persona document
Empathy Map

What Nuch experiences walking home alone.

Scenario — Walking home through a quiet area, late evening, alone

Thinks
  • What if something happens and no one knows I'm here?
  • Is there a safer way to get back?
  • I shouldn't have to walk this way alone.
Feels
  • Hyperaware of every sound and shadow
  • Anxious but doesn't want to overreact
  • Reluctant to call someone — feels like a burden
Does
  • Calls a friend and stays on the line
  • Shares location quietly via LINE
  • Takes a longer route to avoid the dark alley
Sees
  • Unlit streets, no CCTV, empty paths
  • Closed shops, no one around
  • No call point, no police post, no safety signal
The Response

Designed for the moment before danger — not only after it.

Three principles drove every design decision.

01

Prevention before reaction

Risk had to be visible at the planning stage — not delivered as a notification after the user was already somewhere unsafe.

02

Safer routes, not just faster ones

Route comparison was redesigned to lead with safety signal, not travel time. A better option always sits alongside the riskier one.

03

Connected during the journey

The support layer mirrors real behavior: trusted network first, emergency services last — never the reverse.

Before — During — After

Before

Plan with confidence

  • Check route risk levels
  • Compare safer alternatives
  • Set trusted contacts
During

Stay connected

  • Share live trip with contacts
  • Receive environment alerts
  • One-tap check-in
After

Arrive safe

  • Arrival confirmation sent
  • Contacts notified automatically
  • Report risky spots for others
Key Features

Three flows that do the work.

Route Safety

Safer routes at a glance

Route Comparison shows the risk level of each path alongside travel time — so a safer choice is always visible before the user sets off.

  • Risk level scored per route
  • Safe route always presented as the first option
  • Community-reported risk signals overlaid on map
Route Comparison screen
Live Tracking

Someone always knows you're on your way

Track Me shares your live location and ETA with selected contacts. If a check-in is missed, they're quietly alerted — no panic, just presence.

  • Share route and ETA with selected contacts
  • Automatic missed check-in notification
  • One-tap arrival confirmation
Live Tracking screen
Support System

Not every moment needs an emergency response

Three layers of support, scaled to the situation. Nothing is buried. No unnecessary friction at any level.

Layer 1

Trusted Network

Share your route. Contacts notified if check-in is missed.

Live sharing ETA tracking Missed check-in
Layer 2

Nearby Helpers

Optional community support — controlled and abuse-resistant by design.

Optional Community-based Controlled
Layer 3

Emergency Services

One action. Location attached. Always visible — never buried.

One-action SOS Location sent Always on
SOS support layers screen
Design System

Visual system built for clarity under stress.

Every token, component, and color choice reinforces the same principle: fast comprehension, low cognitive load, and emotional reassurance.

Color System
Deep Blue
#304369 — Primary brand
Blue
#7895CF — Interactive
Blue Grey
#DEE5F3 — Borders / BG
Pink Soft
#F8D0D0 — Accent / warm
Safe Green
#5BB88A — Safe status
Amber
#E8962A — Warning / alert
Danger Red
#D94444 — Emergency / SOS
Background
#F3F5FB — Page surface
Typography — Inter
H1
Traveling alone
32px / 700 / −0.02em
H2
The fear starts
24px / 700 / −0.015em
H3
Section headline
17.6px / 700
Body
Regular body text for descriptions and explanations.
16px / 400 / 1.65
Label
SECTION LABEL
11.5px / 700 / +0.12em
Caption
Muted caption text
12px / 500
Radius & Shape
Input / Tag
8px
Inline Card
12px
Card
16px
Modal
24px
Button / Pill
999px
Spacing Scale
xs
4px — icon gap
sm
8px — chip gap
md
12px — card inner
lg
16px — row gap
xl
24px — card padding
2xl
40px — section gap
3xl
64px — section padding
Core Components
Start Route
Dismiss
I'm okay
View all
Send SOS
Buttons — primary / safe / danger / secondary / ghost × lg, sm
Safe — On Track
12 min to arrive
Check-in Overdue
No response for 2 min
SOS Active
Emergency services notified
Status Indicators — safe / alert / emergency states
Route Options
Park Route Well-lit — 0 reports
Safe 14 min
High Street Unlit section — 400m
Review 11 min
Start Safer Route
Route Comparison Card — safer route always first
Poorly lit area ahead
400m ahead — 3 reports
Show safer route
Dismiss
Higher risk zone
Entering reported area — 7 reports
Reroute now
Continue
Alert Cards — caution & high risk variants
Are you still okay?
Tap to confirm — contacts won't be alerted unless you miss this.
I'm okay
I don't feel safe
Check-in Prompt — appears every 20 min or on risk zone entry
SOS
Resting
2
Counting
Sent
SOS Button — resting / hold (3s countdown) / sent
Layer Tags
Awareness
Prevention
Support
Emergency
Risk Badges
Safe Review High Risk No Data
Layer Tags / Risk Badges — consistent across all screens
User Flows

How users move through the system.

Four core flows that show where decisions are made, how safety features interact, and how the product escalates support progressively.

1
Safe Route Planning
Awareness
Safe Route Planning — user flow diagram
2
Live Tracking
Prevention
Live Tracking — user flow diagram
3
Risk Awareness
Awareness
Risk Awareness — user flow diagram
4
Emergency Support
Emergency
Emergency Support — user flow diagram
Final Design

The product, end to end.

Five key screens — from risk awareness to emergency escalation.