UX / UI Design Android · 3.2" Public Safety

Body-Worn Camera UI

UX/UI · Interaction Design · Style Guide · 8 Weeks · 2026

An Android-based system prototype optimized for 3.2-inch displays. By integrating physical hardware controls (PTT, recording sliders) with digital operations, this design enables one-touch emergency broadcasting, covert recording, and privacy modes — balancing high-stress field performance with evidence integrity.

Timeline
Jan–Mar 2026
Duration
8 Weeks
Tool
Figma
Display
3.2" · 360×640
Role
UX/UI Designer
01

Design Brief

🎯
The Product

A specialized mobile system designed to streamline evidence collection and officer safety through multiple operational modes: Emergency & Live Streaming, Dynamic Recording (Standard / Covert), Privacy Management, Data & Storage Tools, and System Utilities.

The Problem

Research indicated significant "administrative bloat" — the burden of tagging footage could deter proactive policing. Solution: a "Safety-First, Accountability-Second" framework. The UI prioritizes immediate physical safety and effortless recording over administrative tasks.

👤
The User

Frontline emergency responders operating in high-stress, unpredictable environments. They need: operational reliability (trigger critical actions without looking), situational awareness (critical status over secondary info), and regulatory transparency (automated recording and metadata logging).

🔧
My Role

UX/UI & Interaction Designer. Responsible for design research, typography system, terminology conventions, core interactive modules (Emergency, Recording, Notification, Settings), and specialized visual accessibility for small-form-factor displays.

02

Constraints & Context

Display Limitation
3.2" · 360×640 px · 229 ppi
Minimizes cognitive load during emergencies. Layouts stacked and centered. Every pixel is a trade-off between information density and legibility under duress.
Hardware Integration
PTT · Emergency Button · Record Slider
Software must maintain seamless synchronicity with physical controls. Critical actions mapped to tactile gestures — reliability even when the officer cannot look at the screen.
Legibility Under Duress
Roboto · All-Caps · Abbreviated States
Strict Terminology Convention: EMG / REC / STD / Live. Semibold 600 button labels. No ambiguity — in a 360px width there is no room for synonym inconsistency.
03

System Concept Map

BWC System Concept Map
BWC Interaction System — Full Feature Map · Colour-coded by function cluster
Core System Nodes
Real-Time Capture
Status & Telemetry
Hardware Integration
04

Task Analysis

Primary Tasks
Core Functionality — anchored to fixed UI positions, "one-look" verification
Initiating Recording
Manual & automated — immediate capture of video and audio evidence via physical slider
Emergency Alert
One-touch SOS signaling for immediate backup or command center awareness, auto-starts live broadcast
Status Monitoring
Quick-glance checks of battery, GPS, and storage — critical telemetry anchored to fixed positions
Evidence Review & Audit
Confirming metadata, timestamps, and logs before final encrypted upload
Secondary Tasks
Supporting Functionality — accessible but not interrupting the primary flow
In-Field Evidence Tagging
Adding metadata or bookmarks during/after incident — AI-assisted with Large-Target Grid UI
Citizen Transparency
Informing the public that recording is in progress via audio/visual prompts per regulation
Live Streaming Management
Real-time situational awareness to dispatch — activates when recording starts or EMG triggers
Privacy & Tactical Controls
Pre-buffering "look-back" window and Covert Mode — deactivates all outward indicators (LEDs/screen)
05

Project Timeline

01
Jan 14 — Jan 28
Research & Conceptualization
Background research & documentation
UX design brief & concept map
Socio-technical analysis of BWC
02
Feb 4 — Feb 11
Task Analysis & Initial Design
User task identification for field responders
Initial sketches for 3.2" interface
Primary vs secondary task hierarchy
03
Feb 18 — Feb 25
Prototyping & Iteration
Annotated wireframes
Style guide & typography system
Functional BWC prototypes + test findings
04
Mar 4
Finalization
High-fidelity interactive prototype
Final style guide submission
Evaluation & reflection documentation
06

Design Process

01
User Research & Problem Identification

Investigated socio-technical factors of body-worn cameras. Research revealed significant "administrative bloat" — footage tagging burden could deter proactive policing. The flat information hierarchy emerged: critical telemetry (battery, storage, recording status) anchored to fixed positions for "one-look" verification.

Framework Outcome

"Safety-First, Accountability-Second." The UI must prioritize immediate physical safety and effortless recording — not administrative tasks. Every screen element was evaluated against this hierarchy.

02
Ideation: Bridging Hardware & Software

To solve the 3.2-inch (360×640 px) constraint, the design integrates software responses with physical hardware inputs. Critical actions (recording start, emergency alert) mapped to physical slide gesture and dedicated SOS button — reliability even when the officer cannot look at the screen. The EMG state automatically initiates a live broadcast.

Early sketches - Live Streaming Mode
Early Sketch · Live Streaming Mode
Radio Station sketch
Early Sketch · Radio Station Interface
Tactile-First Principle

Physical buttons take precedence over touch UI. The software confirms, not initiates. Digital feedback validates hardware actions — never the reverse.

03
Visual System & Typography

Spearheaded the Typography system within the Style Guide. Typeface: Roboto / Roboto Mono. Optimized font weights for legibility at 229 ppi. Established strict Labeling Convention: all-caps action labels, abbreviated system states (EMG, REC, STD), maximum two words per button to minimize reading time in field operations.

Typography system
Typography · Style Guide · Roboto / Roboto Mono
04
UI Components & Interactive Prototyping

Designed core UI modules: Emergency & Recording (hardware triggers with real-time digital feedback), Notification System (system alerts keeping officers informed), and System Settings (streamlined Wi-Fi, battery, physical button configuration). The annotated Motorola device mockups document every design decision.

Component Philosophy

Simple menus reduce decision time. Save/Cancel buttons stay at a consistent location for predictable interaction. No cognitive surprise in high-stress moments.

07

Final Screens

Recording interface annotations
Recording Interface · Annotated · Normal Recording · Pause · Emergency Mode (EMG)
UI Components
UI Components · Click Menu States · Dark Background · Figma
Settings screens
Settings Module · Physical Button · Battery · Storage · WiFi Configuration
08

Key Design Decisions

Flat Information Hierarchy

Critical telemetry (battery, storage, recording status) anchored to fixed positions, allowing one-look verification without scrolling. Secondary functions accessible but never competing for visual priority.

🔴
State-Driven Visual Language

REC = solid red circle + red border. EMG = critical alert typography, red overlay. Pause = white frame. Each system state has a distinct, unambiguous visual signature — no reliance on text alone.

Glove-Friendly Touch Targets

Inspired by the Hytera VM780: implemented a Large-Target Grid UI for post-incident tagging. Replacing standard lists with oversized touch targets functional even with gloves — accessibility is a safety requirement here.

📝
Terminology as Safety Protocol

Strict naming convention (EMG, REC, STD, Live) ensures instant recognition under cognitive overload. Always "SAVE," never "CONFIRM" or "APPLY." Consistency across 360px is not stylistic — it is operationally critical.

09

Reflections

Subtractive Design

The process highlighted the critical need for "subtractive design" when working with extreme constraints. Initially focused on feature richness, task analysis revealed that a frontline responder's cognitive load is too high for complex touch interactions during emergencies. The prototype's success lies in treating software as an extension of the hardware — immediate, clear feedback for every physical trigger.

Lessons Learnt

Consistency is a safety requirement, not a style choice. In a restricted 360px width, there is no room for ambiguity — the strict labeling convention (EMG, REC, STD) ensures instant recognition. Function over aesthetics: designing for public safety taught me to anchor every decision to the "Safety-First, Accountability-Second" framework — minimizing cognitive load rather than visual decoration.

More Projects

← Game Portfolio
Destiny of Silence
Unity · Stealth RPG · MFA Capstone · In Development 2026
Design Portfolio →
VR Environment — MOCAAD
VR Design · Spatial UX · Unreal Engine · Cultural Heritage