UX / UI Case Study

SOS

Safety of School

A mobile app that helps parents watch over a child's location and respond fast in an emergency, with a way for strangers to help even if they've never opened the app.

Branding Logo UI Design Flowchart
SOS Kids List screen
01 · Overview

Keeping kids safe, and parents at ease

SOS is an application for parents to take care of their children's safety. It gives them a way to check a child's location, including during an emergency. When a child gets lost, well-wishers who aren't part of the SOS system can still help, by contacting the parent through a channel that appears after scanning the child's NFC tag.

Platform
iOS · Mobile app
Category
Child safety & location
Deliverables
Branding, logo, flowchart, UI
Hardware
NFC child tag
02 · Problem & goals

A lost child is a race against time

The problem

Parents have no single place to see where their children are during school hours, and no fast way to raise an alarm when one of them goes missing.

And the people most likely to find a lost child, passersby, shop staff, other parents, have no way to reach the family.

Design goals
Show every child's status at a glance, with one clear state per child.
Make the emergency path reachable in one tap from anywhere in the app.
Let a stranger help without installing anything, scan the tag, reach the parent.
Keep the tone calm and gentle, even in the worst moment.
03 · Key features

What SOS does

Tag & locate

Every child wears an NFC tag that shares a live location, with an emergency signal that calls for immediate help.

Peace of mind

Parents can specify and follow a child's location the moment an emergency situation comes up.

Direct contact

Parents can contact a child's tag directly, to communicate with the child in real time.

Community rescue

Announces and informs people nearby, asking for assistance when a child needs to be found.

04 · User flow

Mapping the full user flow

From sign up and tag registration, through the emergency and rescue paths, to notifications and dark mode, every screen a parent, a child's tag, or a passing well-wisher can reach.

SOS user flow diagram
05 · Design system

Color

A calm cobalt blue anchors the interface, resting on a light neutral base, with small, deliberate bursts of status color: green for safe, orange for warning, red for danger.

Light Cobalt Blue
20% · #7EA4EF
Dark Cornflower Blue
10% · #20448B
Light Gray
60% · #F5F5F5
Green (Crayola)
3.3% · #1DC072
Yellow Orange
3.3% · #FFA740
Carnelian
3.3% · #C01D1D
Design system · Typography

Typography

One typeface carries the whole interface, leaning on weight rather than variety to set hierarchy.

Aa
Afacad
Medium · SemiBold · Bold
Menu Button Status Set Location
Design system · Logo

Logo

The design is based on the word "SOS," which serves as both the concept and the name of the application. The design emphasizes simplicity and gentleness.

SOS full lockup
#000000 70 %
#181F3A · 10 % #FCE0B4 · 10 % #B6DEFF · 10 %
SOS logo mark

The center of the "O" serving as the most eye-catching focal point. This is achieved by developing the idea of an outstretched hand offering help.

Design system · Components

Components

Buttons
Button states
Tab bar
Tab bar states
Status
Status pills
Contact actions
Call, message, emergency buttons
Safe area
Safe area map card
06 · Key screens

Onboarding & child registration

To use the service, a parent signs in, then registers each child: personal details, a safe area on the map, and a safe distance, before the tag connects and starts reporting location.

Sign in and register
Sign in / register
Create child's tag - basic info
Child's details
Create child's tag - safe area
Set safe area
Create child's tag - completed form
Safe distance & photos
Connecting child's tag
Connect the tag
Tag connected, then the emergency list
Key screens · Home & emergency

Home, children list & emergency

The home feed surfaces every child at a glance. Emergency mode takes over the moment a child needs help, and every detail, location, contact, timing, sits one tap away.

Home screen
Home, news feed, your kids, activity
Children list screen
Children list, one status per child
Emergency screen
Emergency, yours and nearby
Nearby child detail sheet
Nearby child, last location, contact parent
Child detail with status update
Child detail, update status
Danger warning alert
Alert, child outside the safe zone
Key screens · Map & rescue

Map & rescue chat

The map monitors every child at once and flags anyone outside their safe zone. Rescue chat opens once a well-wisher reaches out, so parents can coordinate help directly.

Map screen
Map, all children, safe zones drawn
Map with emergency
Map, focused on a child in danger
Rescue chat
Rescue chat, messages from finders
07 · Dark mode

Built for low light too

Every status color, card, and map still reads clearly against a dark base, for late nights and long pickup lines.

Dark mode emergency and children list Dark mode home screen
08 · Reflection

What the project taught me

Status is the whole interface

Safe, warning, danger, lost, found, once each state had a single color and a single pill, every screen in the app could be read in a second. Building that status set first made the rest of the UI fall into place.

Designing for a non-user

The person who finds a lost child has never seen this app. Routing them through an NFC scan into a single contact channel kept that path short enough to work without onboarding.

Calm under pressure

Emergency screens are tempting to make loud. Keeping red reserved for genuine danger, on a soft cobalt and light gray base, let the alarm read clearly without making the everyday app feel anxious.

← All projects