Body Worn Camera
Design and develop an interactive mobile application for public safety patrol officer’s body worn camera.
Role: UI/UX Designer
Date: Jan 17, 2023 - Mar 6, 2023
Tools: Figma, Photoshop
Team: Wanlong He, Yuze Tian
Project Summary
Designing a Human-Centered Body Worn Camera for Patrol Officers
This UI/UX design project focuses on creating a body worn camera tailored for patrol officers, utilizing a human-centered approach to ensure its efficacy and user-friendliness. The project includes various functions and form factors essential to meet the specific needs of patrol officers in the field.
Beginning with secondary research and the construction of a comprehensive concept map, I was able to define project requirements and proceeded to construct a comprehensive product concept map. With ideations and iterations of UI flow chart, User task list and annotated wireframes. I developed high-fidelity prototype and UI style guide for my Sentinel body worn camera.
Sentinel body worn camera grants easy access to all media and voice memos with integrated meta data, ensuring officers’ safety with features like send & view emergency alerts and real time broadcasting.
The Challenge
Intuitive design for critical moments and beyond
My target users are on the frontline, safeguarding civilian lives at great personal risk. When an incident happens, the body worn camera need to deliver swift, intuitive assistance during critical moments. Post-incident, the system should allow rapid management and tagging of recordings, providing enforcement transparency and fostering improvement in response practices.
Target Users
Police First Responders
Highway Patrol
Correction Officers
Pain Points
Managing files and media are typically long administrative work
Under emergency circumstances, officers might not remember to manually record/broadcast incident.
Officer’s dynamic working environment restrict UI visibility
The Solution
A system for every officer, at any time
By assigning simple interactions on form factors, my design reduce function recall time, allowing officers to react swiftly with the device’s assistance. By simplifying system UI and interactions, my design encourage officers of all ages to understand and harness the full potential of the device effortlessly. Enhanced features like media tagging, media gallery and voice memos are also integrated, enabling officers to minimize time spent on administrative tasks and focus more on their fieldwork.
Product Description
The product’s form factor is using Motorola Si500 Body Worn Camera as the base. This device combines body-worn camera, remote speaker microphone and smart interface.
Product Requirement
Android operating system
Device with a 3.2” (360x640 px) touch screen display
Physical Controls:
Push to Talk Button
Power Button
Volume Toggle
Programmable Buttons (2)
1.Start Live Broadcasting
2.Show Officer ID
Emergency Button
Video Record Slider
UI Requirement
Recording Indicator
Real-Time transmission of footage from body-worn camera to a remote location
Simplify device status information
Data Integrity
Each Recorded incident should have its own file or files, with a unique file name or code
Concept Map
Based on requirements provided above, I created a visual concept map to help me identify and discover device features under under 4 major categories: Physical Controls, Media Capture, Media Management and Notifications
(Click image to expand or check the pdf document)
Task Flow + Site Map
Based on my concept map, I created a site map chart that also includes the following tasks flows:
Media Capture
Take Pictures
Start/Stop Video, Audio Recording
Start/Stop Real-Time Broadcasting
Emergency Alert
Receive/Send Emergency Alert
Listen to Emergency Alert
Media Management
View Media
Upload Media
View Upload Progress
Append Media
Media Access
Search for Media Capture
(Click image to expand or check the pdf document)
Sketches
Before I start creating my first wireframes, I did some quick sketches on Figma to get play around UI layout and task flows. Doing sketches on Figma allows me to quickly move different design elements and helps me to make sure all designs fit in the required screen size.
During the sketching process, I kept in mind that all buttons and media should be large size because the device only has a tiny screen on it.
After finishing my sketches, I went to other designers to get some feedback and inspirations, I learned that although my buttons are big, if the text size is too small and there’s too much content inside, it doesn’t help my user to see the information displayed on screen.
(Click image to expand or check the pdf document)
Low-Fi Wireframes
Based on the sketches and with the required user tasks on my mind, I created a few low-fir wireframes screens. These wireframes are shown to other designers for design feedbacks.
(Click image to expand or check annotated wireframes pdf)
The Feedbacks
Overall, the feedback includes:
no access to individual case files.
interactions for media tagging in not evident.
is soundwave in voice memo necessary?
text and icons are too small.
same media card layout across different media types - try to differentiate
no (exit) way to get out of many pages
it’s not clear that the assets are for the same event
Hi-Fi Prototype
The Hi Fi Prototype is fully developed in Figma.
You can view the Figma prototype by clicking this link
Style Guide
A style guide was also made along to make sure the color contrast was made well.
(Click image to expand or check the pdf document)