Overview Problem Screens Process Results View Prototype →

iOS App · UI/UX Case Study

Design & PM Case Study · Not developed

KeyChain

Safety Alert System

A one-button iOS safety app concept: one press of a physical Bluetooth keychain sends an emergency SMS with GPS location and timestamp to trusted contacts. I designed the full experience and managed the project through developer handoff.

📱 iOS · Bluetooth hardware
👤 UX/UI Designer & PM
🛠 Figma
🔗 View Prototype →
View Screens ↓ View Prototype →

The Problem

When Seconds Matter

In a real emergency — medical crisis, personal threat, accident — fumbling to unlock a phone, open an app, and navigate to send help can be the difference between life and death.

Existing emergency apps require 4–6 interaction steps. KeyChain reduces that to zero phone steps — a single press of a physical Bluetooth button does everything.

⏱ Too Many Steps
Existing apps require unlock → open → navigate → tap. Unusable under stress.
📵 Phone Inaccessible
Users may be physically unable to operate their phone in an emergency.
📍 Unknown Location
Without automatic GPS, contacts don't know where to find you.
Project Snapshot
Client Private client
Designer / PM Asanka Palle
Developer Assigned; build not started
Platform iOS (planned: Flutter)
Status Paused before development

High-Fidelity Designs · 3 Core Screens

App Screens

Final high-fidelity screens designed in Figma, ready for development handoff.

Home
Recipients
Emergency Message

Planned Build

Proposed System Architecture

Defined with the developer during planning to scope the build.

Physical KeyChain
BLE Button Press
→
Flutter iOS App
GetX State Management
→
Firebase
Firestore Database
→
Cloud Function
Serverless Trigger
→
Twilio SMS
SMS Gateway
→
Recipients
Up to 3 contacts
Frontend
Flutter (iOS build) GetX state management Flutter Blue BLE Background BLE support
Backend
Firebase Authentication Firestore database Firebase Cloud Functions Twilio SMS API

Design & Handoff

Design Process

1
Research & Define
1 Day
Analyzed emergency scenarios: medical emergencies, personal safety, elderly care. Competitive analysis: Life Alert, bSafe, Noonlight. Core constraint: zero phone steps on the critical path.
Problem Statement · Competitive Analysis
2
Wireframes
1 Day
12 screens wireframed in Figma — onboarding flow, BLE pairing, home/dashboard, recipients, message composer, settings. IA validated with the client.
12 Figma Wireframes · User Flow
3
UI Design
1 Day
High-fidelity screens in Figma. Key decision: SEND ALERT in red (#DC2626) — universally understood emergency color. Blue (#2563EB) for all interactive UI. Full component library built.
Hi-Fi Prototype · Design System · Component Library
4
Developer Handoff
Delivered Figma specs, architecture plan, and acceptance criteria to the developer.
Figma Specs · Architecture Plan · Acceptance Criteria
5
Project Paused
The client decided to stop the project before development began.
Documented Handoff Package

Design Rationale

Key Design Decisions

Decision 01

Red for Emergency, Blue for UI

Context

The wireframes used dark/black for the SEND ALERT button. In the final design, this was deliberately changed.

Decision

SEND ALERT uses red #DC2626 — the universal color of emergency. All interactive UI uses blue #2563EB. This creates an instant visual hierarchy: one button is for emergencies, everything else is for configuration.

Outcome: Users immediately understand which button sends the alert and which controls manage settings — zero confusion, critical for a stress scenario.
Wireframe
Black button — blends with UI chrome
Final Design
Red with glow — instant emergency recognition
Decision 02

Priority-Ordered Recipients

Context

When sending a mass SMS in an emergency, order matters. First responders (partner, parent) should receive alerts before secondary contacts.

Decision

Designed a priority-numbered system — Priority 1, Priority 2, Priority 3 — with blue badge labels. Contacts are ordered and clearly labeled in the list.

Outcome: Users can configure who gets alerted first, and the alert order is visible at a glance. Critical for real-world emergency scenarios.
👤
John Smith
Priority 1
👤
Sarah Johnson
Priority 2
👤
Mike Davis
Priority 3
Decision 03

Real-Time Message Preview

Context

Users compose their emergency message in advance but may not know exactly what the final SMS will look like with GPS and timestamp appended.

Decision

Added a live Message Preview section that shows the exact SMS recipients will receive — including formatted GPS coordinates and timestamp.

Outcome: Users gain confidence their alert message is correct before any emergency occurs. Reduces the chance of sending a confusing or incomplete alert.
Message Preview
I need help. This is my current location. Please contact me immediately.

📍 Location: 37.7749° N, 122.4194° W
🕐 Time: Monday, February 23, 2026 at 2:30 PM

Project Status

Why It Stopped

The design and handoff package were complete, but the client chose not to move forward with development. As PM, I documented all deliverables so the project could restart without losing work.

Deliverables

What I Delivered

1
Interactive Figma prototype
1
System architecture plan
1
Complete developer handoff package
Zero-step emergency flow designed around a physical button press
Priority-ordered contacts so the right people are notified first
Message preview showing exactly what recipients will receive
Full account flows designed (register, login, reset, logout)
Dark mode designed throughout
View the interactive Figma prototype →

Reflection

What I Learned

Lesson 01
Design for the Worst Case
Emergency apps can't assume a calm, focused user. Every decision — button size, color choice, step count — was made for someone in a panic with shaking hands. Red for danger, large tap targets, zero navigation steps.
Lesson 02
PM Skills Are a UX Skill
Acting as both designer and project manager meant bridging the gap between design intent and technical reality — BLE background constraints, Twilio rate limits, iOS permission flows. Scoping the build with the developer early kept the design realistic.
Lesson 03
Preview Builds Trust
The Message Preview feature was added after realizing users couldn't visualize their full SMS with GPS appended. Showing the exact output before any emergency occurs dramatically increases user confidence in the system.
Lesson 04
Validate Commitment Before Design
The design was ready, but the project still stopped. Next time I'd confirm budget, timeline, and business buy-in with stakeholders before detailed design starts, so effort goes into projects that will ship.