Body-worn Camera

Mobile App




Adobe Illustrator




Research, Sketching, Wireframing, Prototyping


My role: UX/UI Designer

Human Centered Design Class - Fall 2019

8 weeks


This project was part of the Human Centered Design class for second-year MFA Interactive Media students. The instructions were to design and develop an interactive mobile application for safety body-worn cameras. Body-worn cameras (BWCs) are small video/audio recording devices worn on police officers’ uniforms, usually in the chest area, shoulder, or collar. The professor chose the Motorola Si500 body-worn camera as the device for this project, and she gave us some design requirements and basic features to design the application.

The challenge of this project was also to change our minds from the classical mobile application design to think on a smaller screen, functionalities targeted for specific situations and connect the functionality with the hardware as well. 


I conducted different User Centered Design techniques to approach this project. After a few iterations of my task flows, site maps and sketches, receiving feedback from my classmates and the Professor, I designed a mobile app for a body-worn camera. This application is characterized by its simplicity, consistency, and organized arrange of items to make officers' duties easier and faster. 

Product Description

The device selected by the Professor for this project was the Motorola Si500 Body-Worn Camera. She provided us the following requirements: 


Product Requirements

  • Android OS

  • Device with a 3.2” (360x640 px, 229 ppi) touch screen display

  • Physical Controls:

    • Push to Talk button

    • Power button

    • Volume toggle

    • Programmable buttons (2)

    • Emergency button

    • Video record slider


Target Users

  • Police First Responder / Frontline

  • Highway Patrol

  • Corrections Officers

FormFactor BWC.png
Secondary Research

I first conducted a secondary research to understand the use of body-worn cameras. Some of the questions that I addressed during the research were:

  • What is a Body-Worn Camera (BWC)?

  • What are the situations and the benefits of using a BWC?

  • What are the main concerns and policies related to BWCs?

  • What are the design considerations when designing for small mobile interfaces?

  • What are the characteristics of BWCs with mobile interfaces available in the market? 

  • What are the characteristics of the Motorola Si500 BWC?

I synthesized the research and then used the key insights to derive main design principles that helped guide me during the concept development. The full report can be found here: Secondary Research Body-Worn Camera

Concept Map

The concept map helped me to organize my findings and integrate them with the design requirements given for the project. It also helped to connect the functionalities of the software with the hardware.

Concept Map Colored.png
Task Flows

Once I had an overall understanding of the product, I started working on the task flows. I used Lucidchart to develop the task flows. It was an iterative process as I shared it in class and received feedback from my classmates and the Professor. I realized that I was missing some details in my initial versions such as the device indicators, the LED and haptics notifications and being more specific with each task.

The mapped tasks were:

  • Turn device ON /OFF

  • Login

  • Lock screen

  • Send / Cancel emergency Alert

  • Settings: Turn ON/OFF Covert Mode, Low Light Mode, Pre-buffering, Bluetooth, and Wifi.

  • Start/Stop/Review/Upload video and audio recording

  • Take/View/Upload pictures

  • Search for event capture

  • Append Speech to text notes

  • Append video/audio/picture

  • View/Dismiss system notifications

  • View device indicators


Below are some of the task flows:

Site Map

The sitemap was an iterative process as well as it had been changing once I started working on my sketches and wireframes. Below is the last version of the site map.

SiteMap BWC .png

Given the constraints of a small screen, sketched helped me to explore design alternatives and I was able to organize accordingly all the elements. Below are some of my sketches.

1. Sketch Body Worn Camera
press to zoom
2. Sketch Body Worn Camera
press to zoom
3. Sketch Body Worn Camera
press to zoom

After revising my sketches and making some changes, I used Figma to create the wireframes.

The complete set of annotated wireframes can be found here: Annotated Wireframes Body-Worn Camera 

0.1 Enter PIN.png
1.0 Home Page.png
1.1 Videos.png
2.0 Video Recording.png

Finally, I designed the prototype for the body-worn camera mobile app. This was the last step that followed an iterative process as well.

Some considerations that I took for the present project:

  • Police Officers use the device and download their media after finishing their shift. 

  • Programmable button 1 will be configured to start/stop audio recording. 

  • Programmable button 2 will be configured to take a picture.

  • Power button will be configured to lock the device with a short press. 

The style guide can be found here: Style guide Body-Worn Camera

The icons and images were downloaded from plugins in Figma. Icons were from 'Iconify', a free source library and the images were from 'Unsplash', a free source library. 

Color Scheme BWC.png
Blue Prototype BWC-07.png
Blue Prototype BWC-06.png
Blue Prototype BWC-08.png
Blue Prototype BWC-05.png
Blue Prototype BWC-13.png
Blue Prototype BWC-11.png
Blue Prototype BWC-09.png
Assets Project BWC-09.png

See more projects