Overview Problem Screens Process Results View Prototype →

iOS App · UI/UX Case Study

Real Shipped Product

KeyChain

Safety Alert System

One physical button press sends an emergency SMS with GPS and timestamp to all your trusted contacts — no phone interaction required.

📱 iOS · Flutter
👤 Designer & PM
🛠 Figma · Firebase · Twilio
⏱ 2.5 Weeks
🔗 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 Steve Hamilton
Designer / PM Asanka Palle
Developer Rukshan Malishaka
Platform iOS (Flutter)
Timeline 16–18 Days
Status ✅ Shipped

Real App · 3 Core Screens

App Screens

Built in Flutter. Shipped on iOS. Every detail from the real product.

Home
Recipients
Emergency Message

How It Works

System Architecture

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 & Delivery

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 stakeholder Steve Hamilton.
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
Handoff & Dev
13 Days
Delivered Figma specs to developer Rukshan. Acted as PM — daily syncs, design QA, iteration on BLE background mode, Twilio integration, iOS permissions.
Developer Specs · HOWITWORKS.md
5
Testing & Launch
2 Days
QA testing across iPhone models. Bug fixes. App Store deployment support. 30-day warranty support post-delivery.
Shipped iOS App · App Store Submission

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 shipped app, 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
Shipped
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

Outcomes

Results & Impact

0
Screens designed
0
Days to ship
0
Recipients per alert
0
Button press to send SOS
Real iOS app shipped and deployed — not a concept
Zero-step emergency path — physical button press does everything
Twilio SMS delivers alerts in under 3 seconds
GPS + timestamp automatically appended to every alert
Priority-ordered contacts ensure right people are notified first
Background BLE support — app works even when phone is locked
Full authentication system (register/login/reset/logout)
Dark mode supported throughout
30-day post-launch warranty support delivered
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. The best design is one that actually ships.
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.