Research, Sketching, Wireframing, Prototyping
My role: UX/UI Designer
Human Centered Design Class - Fall 2019
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.
PROCESS & DELIVERABLES
The device selected by the Professor for this project was the Motorola Si500 Body-Worn Camera. She provided us the following requirements:
Device with a 3.2” (360x640 px, 229 ppi) touch screen display
Push to Talk button
Programmable buttons (2)
Video record slider
Police First Responder / Frontline
SOURCE: Motorola Solutions
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
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.
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
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
Search for event capture
Append Speech to text notes
View/Dismiss system notifications
View device indicators
Below are some of the task flows:
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.
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.
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
THE FINAL DESIGN
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.