StepSafe — Mobile Safety App

You’re not alone,
even when you travel alone.

StepSafe helps solo travelers feel safer, more aware, and supported — before anything goes wrong.

UX/UI Design iOS Mobile Product Design

StepSafe — Mobile Safety App

A safety companionfor the moments that matter most.

Stepsafe is a mobile safety app designed for solo travelers and everyday journeys. It helps users stay aware, connected, and supported before situations become emergencies.

The real fear often starts earlier — the unfamiliar street, the poorly lit route, or the moment something doesn’t feel right.

Instead of reacting only after danger happens, Stepsafe focuses on prevention through safer route awareness, live journey sharing, and trusted emergency support.

Duration : 1 month

UX/UI Design iOS Mobile Product Design Solo Safety

Real-World Signals

This isn’t a rare situation.

Over 500 areas across Bangkok have been identified as high-risk zones — including poorly lit streets, dead-end alleys, and spaces without surveillance coverage.

View source

Incidents frequently occur in transitional spaces — escalators, pedestrian routes, and areas where people move alone and predictably.

News report — victim followed from school

View source

Victims are often followed from familiar, everyday locations. The route from somewhere safe can quickly become somewhere it isn’t.

View source

Poorly lit alleys and secluded paths remain among the most common locations for incidents targeting solo travelers at night.

How people warn each other today

These examples are based on real user behaviors and patterns observed from online community discussions, where people share safety warnings and risky locations with each other.

I went on a group motorcycle trip 30 years ago. The gravel road was terrifying — all I could think about was getting home, my parents. That experience never left me.

Internet user

I’ve been followed twice. It happened about 4 years ago — someone on a motorcycle both times. That kind of experience stays with you.

Internet user

No street lights on this road at all. Pitch black at night. Lots of bushes on both sides — you feel completely alone.

Internet user

That road is genuinely dangerous. My friend and I were once followed by a car. We had to honk and scream until someone stopped to help.

Internet user

Please amplify this — the people living here need someone to speak up for them.

Online community member

This route is very dangerous.

Online community member

Process

Objectives &
Research Approach

The goal was to design a mobile safety companion that works before an emergency happens — giving solo travelers real-time risk awareness, safer route options, and a support layer they can actually rely on.

Following a Design Thinking methodology, research was grounded in direct user input: an online survey with 28 participants and twelve 1:1 interviews — mapping real fears, avoidance behaviors, and the decisions people make when something feels off.

Research Foundation

Two methods.
One consistent picture.

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

Open survey form

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

Key insights

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

Design implications

Solo travelers don’t need more alerts. They need earlier awareness.

Safety decisions happen before emergencies.

Users wanted support while planning routes — not only after something went wrong.

People trust personal support first.

Most users preferred reaching trusted contacts before emergency services.

Users already choose safer routes.

When safety information was visible, users naturally adjusted their decisions.

The biggest gap exists before emergencies.

Most travel anxiety happened in uncertain moments — before situations became dangerous.

User Persona

Designed for Nuch. Validated across many.

Nuch — 21 years old

Tech Usage

Uses her phone daily
LINE, Instagram
Comfortable with map apps

Demographic

3rd-year university student
Status: Single
Lives alone in off-campus housing
Travels solo regularly

Pain Points

Goes out often — always anxious about the walk back to her dorm
Mostly alone and fears no one would know if something happened
Unsure which alleys are dangerous or what to avoid
Doesn’t like asking others for help — feels like a burden
No knowledge of personal safety tools — sees them as irrelevant

Behavior Insight

Picks routes by familiarity + speed — not safety
Avoids bothering others → rarely calls for help
Uses her phone the entire time she’s walking (maps / chat)

Goals & Needs

Know which areas are risky before she walks them
Have someone aware of where she is in an unexpected emergency
Feel like someone is “with her” while traveling alone
Receive alerts that are short, fast, and easy to act on

Empathy Map

Round 2 — หลังได้ข้อมูลจาก Survey 28 ท่าน | ผู้หญิงที่เดินทางลำพังเป็นประจำ อายุ 20–55 ปี อาศัยอยู่ใน กทม. และปริมณฑล

Persona

นุช

21 ปี · นักศึกษา · กทม.
เดินทางคนเดียวเป็นประจำ

Scenario: Walking through an isolated path or quiet alley in the early morning / evening / late night without a companion

THINK & FEEL

กังวลไม่มีใครรู้ว่าตัวเองอยู่ที่ไหน
ถ้าเจอคนแปลกๆ จะทำไงดี?
ไม่รู้เส้นทางที่ปลอดภัยกว่า
โทรหาใครดีไหมนะ
จะมีใครเดินทางเดียวกันไหม?

HEAR

เสียงฝีเท้าคนเดินตาม
เสียงรถมอเตอร์ไซค์
เสียงรถขับช้าๆ ตาม
เสียงหมาเห่า / จิ้งหรีด
ไม่มีเสียงคนรอบข้างเลย
"เดี๋ยวผมไปส่งเองนะ"

SEE

ไฟถนนดับ / กระพริบ
ไม่มี CCTV
ซอยแคบ รถสวนไม่ได้
คนจร / คนไร้บ้าน
ร้านค้าปิดหมดแล้ว
ข้างทางรกร้าง

SAY & DO

โทรหาเพื่อน/แฟนให้คุยเป็นเพื่อน
หาวิน/แท็กซี่ แทนการเดินผ่านซอย
เดินเร็วขึ้น ระวังตัว
เดินอ้อมหลีกเลี่ยงซอย

Pains

ไม่รู้เส้นทางอื่นที่ปลอดภัยกว่า กลายเป็นต้องหาทางเดินอ้อมโดยไม่มีข้อมูล หรือยอมเดินเข้าพื้นที่เสี่ยง
ไม่มีใครรับสาย ต้องเผชิญสถานการณ์คนเดียว
เวลาเสี่ยงสูงสุดตั้งแต่ 18:00 น. เป็นต้นไป
ไม่มั่นใจว่าตัวเองจะเอาตัวรอดได้ถ้าเกิดเหตุจริง

Gains

อยากรู้จุดเสี่ยงล่วงหน้า ก่อนออกเดินทาง ไม่ต้องเดาเอง
อยากมีคน "อยู่เป็นเพื่อน" ขณะเดินทาง แม้จะคนเดียว
อยากมีทางเลือกเส้นทางที่ปลอดภัยกว่าอยู่ในมือ
อยากให้ตำรวจรับรู้เมื่อเกิดเหตุร้ายได้รวดเร็ว

User Journey

User Journey Transformation

From fragmented, anxiety-driven moments to a calm and confident journey — StepSafe redesigns every touchpoint where safety is felt.

Current experience — fragmented information, unclear safety signals, and high emotional anxiety.

User Journey Map — current state (As-Is)

StepSafe experience — clear risk awareness, proactive support, and emotional confidence at every step.

User Journey Map — StepSafe future state (To-Be)

Reduced anxiety

Route risk is visible before the journey begins — no more second-guessing in the dark.

Faster decisions

Safety signals are surfaced at the right moment — the right action is always one step away.

Clearer safety awareness

Users move from passive worry to active awareness — supported by context, not left alone with fear.

The Response

Designed for the moment before danger not only after it.

Three principles drove every design decision.

Prevention before reaction

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

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.

Connected during the journey

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

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

Before — During — After

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.

StepSafe Information Architecture diagram

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

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

Support System

Not every moment needs an emergency response

Three layers of support, scaled to the situation. Each layer includes a countdown timer — the user can cancel or escalate at any point. If there is no response in time, the system assumes risk and automatically advances to the next layer.

01 Layer 1

Trusted Network

Share your live route with selected contacts. When SOS is held for 3 seconds, the device automatically begins recording audio and video — and alerts your trusted network immediately.

Live sharing Auto-record on SOS Missed check-in

02 Layer 2

Auto Evidence Capture

If the user does not respond, StepSafe automatically turns on voice and camera recording to capture real-time evidence and context.

Auto recording Voice + camera Evidence capture

03 Layer 3

Emergency Services

Notifies the nearest police station with your live location. One action. Always visible — never buried.

Nearest station alerted Location sent Always on

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

Traveling alone

32px / 700 / −0.02em

The fear starts

24px / 700 / −0.015em

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

4px — icon gap

8px — chip gap

12px — card inner

16px — row gap

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

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

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

UX Communication

Designing a Friendly Safety Companion

Safety experiences shouldn’t feel cold or intimidating. Instead of relying only on alerts and warnings, StepSafe introduced a companion character designed to guide, reassure, and support users throughout uncertain moments.

The mascot acted as a softer emotional layer — helping safety feedback feel calmer, more approachable, and easier to trust during travel.