For the Human Center Design class, we are asked to build a Body Worn Camera for the Public safety police officers as their current device has an opportunity for improvements.  This is a digital device with 3.2’’ touch screen interface and it should be able to carry multiple tasks such as pre-buffering event capture, sending an emergency alert and so on. I will be going through the standard HCD process including concept map, sitemap, annotated wireframes and so on to create this device.

1. POLICE BODY WORN CAMERA
PROJECT REPORT
CIM635 – Human Center Design
Long Qian
10/23/2017

2. INTRODUCTION
• For the Human Center Design class, we are asked to build a Body Worn
Camera for the Public safety police officers as their current device has an
opportunity for improvements.
• This is a digital device with 3.2’’ touch screen interface and it should be
able to carry multiple tasks such as pre-buffering event capture, sending
an emergency alert and so on. I will be going through the standard HCD
process including concept map, sitemap, annotated wireframes and so
on to create this device.

3. PRODUCT DESCRIPTION
-PHYSICAL REQUIREMENTS
• Android OS
• Device with a 3.2” (360X640 px, 229 ppi) touch
screen display
• Physical Controls:
• PTT button
• Power button
• Volume toggle–
• Programmable buttons (2)
• Emergency button
• Video record slider
Motorola Si500

4. PRODUCT DESCRIPTION
-PHYSICAL REQUIREMENTS

5. PRODUCT DESCRIPTION
-FUNCTIONS
• Emergency alert
• Pre-buffering event capture
• Video, Photo, & Audio recording
• Speech to text notes
• RT broadcasting
• System Notifications/ Status updates
• Device indicators (recording, battery, signal strength, recording)

6. TARGET USER
• Police First Responder/ Frontline
• Highway Patrol
• Corrections Officers

7. BACKGROUND RESEARCH
• I also looked at several top 10 ranked body worn camera manufacture’s
most popular modesl to help inspire my design
• Taser Axon: https://www.axon.com/products/body-2
• Pro-Vision: http://www.vievu.com/le3-camera-support/
• Wolfcom: http://www.wolfcomusa.com/
• This is a review and comparison chart of these renowned models:
http://www.policebodycameras.com/police%20body%20camera%20compariso
n%20chart/policebodycamera-comparison.htm

8. DESIGN APPROACH
• My design process will be divided into 5 big steps
• Step 1: Explore the requirements for the product
• Step 2: Collect information
• Method: Background research on the current product and competitive products
• Step 3: Brainstorming and analyze the ideas
• Method: Concept map, Sitemap, and task flows to generate and organize ideas
• Step 4: Develop solutions
• Method: Based on the ideas to do rough sketches and digitalize them into wireframes
• Step 5: Build the interactive mockup of the product
• Upgrade the low fidelity wireframe to hi-fi prototype with colors and design as well as making them
interactive

9. DESIGN GUIDELINES
• Based on the requirements, there are some things I kept in mind throughout my design process:
• Since the device has a pretty small physical screen, the number of text should be limited and also the most
important thing should be prominent enough for the user to recognize
• This device is for police officers to use during law enforcement process so that the structure of the system
should be straightforward and simple, and there should only be the most important functions live on it
• The color scheme should be colors that has strong contrast and should be the feel should be solemn instead
of colorful
• This device operates on an Android OS so it should follows the Android style guide
• There are two programmable buttons I have set for the device: one is for taking the audio recordings and
another one is for capturing photos

10. CONCEPT
MAP

11. SITE MAP

12. TASK
FLOWS
• This is the task flow for the user when
looking for a specific video file

13. TASK
FLOWS
• This is the task flow when the user is
trying to send out an emergency alert
through the device when they are in
danger.
• (Red color line stands for hardware
interaction such as buttons and blue color
stands for software interaction. )

14. TASK
FLOWS
• The user flow of the user trying to
record an audio voice note.
• (Red color line stands for hardware
interaction such as buttons and blue color
stands for software interaction. )

15. ROUGH SKETCHES

16. ROUGH SKETCHES

17. ANNOTATED WIREFRAME
• Low Fidelity Wireframe is the most
important part of the design process which
translates all the preparing and research
phases into straightforward drawings. By
doing that, it sets the tone and build the
backbones for projects overall and serves
for the prototypes later.
• I also annotated all the screens I have so
that not only the system interactions are
shown but also how those physical buttons
are directing the device.

18. 1.0 LOGIN
The device is using a audio lock for the user to log into the system.
The officer would have to hold the button and read the assigned the
number shown on the screen. If user’s voice matches with stored
audio data, then the device will automatically unlock itself.
When you press and hold the button, there will
be small animation surrounding the button
showing the recorder is on and that is when the
user should read the text to detect their voice.
1
1

19. 1.1 HOME
This is the home screen of the system. It has been divided
into mainly 5 sections including Camera, Voice Notes, Alert,
Files and last but the least settings.
This is top status bar which is serving as a system status
indicator showing information like battery life, signal, time,
alert, recording status and so on.
1
1
2 The menu is consists of 5 main items. Single tap on each of
the item icon or text can lead the user to go down to the
next level of navigation.

20. 2.1 CAMERA MAIN
SCREEN
Once the recording button on the device is pressed, the screen will
automatically being directed to camera screen.
This icon will turn red once the recording starts. There is also a
system storage indicator showing how much longer video it can
take.
This is telling the user that their video signal is syncing with
the dispatch center.
1
2
3
3
2
4 Press on the video recording button again will lead to 2.3.
which stops the video recording and goes to the save video
page.

21. 2.2 CAMERA SETTINGS
SCREEN
Short tap on the setting button on the interface, the dropdown menu
will pop up for user to adjust their camera settings.
The button will change color when the user turns on the
option
11
2
3
2
3
The sample functions being include here has night vision
which will change color mode of the camera to help capture
footage in the night, the pre-buffer function can be turned on
for the camera to run by itself so that it can captures the
entire event, burst function helps the user to capture
consecutive photos in no time…

22. 2.3 VIDEO TAGS SCREEN
Once the user press the recording button again, the recording will
stop and the user will be lead to this screen where the video tags will
be created. The user can choose either the preset tags or enter their
custom tags by the speech to text function.
1
1
2
3 2
3
This is an universal button that lives on every page of
the device that helps the user to go back one level
by tap on it.
User can tap on the clear button to delete the
unwanted tags.
Tap on this area and there will be dropdown menu
comes up for the user to choose the tags they want
to add for the video.

23. 2.4 VIDEO LOCATION
SCREEN
After the tag is being created for the video, the last step is to
make sure the incident location for the video is correct.
1
1
User can drag the pin to change the location to the
corrected address. When they are dragging the pin, the
address in the location bar will also be changing
accordingly.
2
Once this button is tapped on, the video file will be saved
automatically to the files section along with the user chosen
tags, locations as well as the system date, time, durations
and other information.
2

24. 3.1 VOICE NOTES
RECORDING
Once the voice recording button is pressed, the screen will
automatically be directed to this screen and the voice recording
already starts. The recording will stop once the voice recording
button is pressed again. The name of the recording will be
created by the system by order.
Here is where are the audio files are stored. And tap on any
of the item in the list will lead the user to 3.2 screen.
2 2
1

25. 3.2 VOICE NOTES
REPLAY
Simply tap on any one of the saved files under the main interface,
saved recording will automatically starts to play. The user can also
scroll to view all the files.
The progress bar can dragged to fast forward or backward.1

26. 4.1 ALERTS SCREEN
Once the user long press the emergency alert button on the device,
there will be a long vibration of the system and meanwhile the user
will be directed to this screen.
1 1
The user’s location is shown on the map view.
2
This is telling the user the status of sending out the alert.

27. 4.2 ALERTS SENT
SCREEN
Once there is someone who answered the emergency alert or if the
dispatch center has sent officer over for help, the device itself will
have a long vibrate and this screen will show on the screen showing
the status of the officer who is coming to help.
1
1 The line on the map is showing the direction from the location
of the officer who is coming for help and the user’s current
location. The text box beside it showing the estimate time of
arrival of that officer.
3
2
If the user wrong click the alert button, the user can tap on
this button to cancel this false alert. Goes to screen 4.2.2.
The user can tap on this button to get contact with the
incoming officer to communicate the current situation. Goes
to screen 4.2.1.2
3

28. 4.2.1 ALERTS CONTACT
SCREEN
If the officer choose to contact the officer who is coming to help,
he/she can choose to call him directly from the alert screen and talk to
them.
2
1
1
2
Tap on this button to hang up the phone call.
Tap on this button can allow user to exit the full screen call
mode to multitasking – seeing the officer’s routes and talking
to him at the same time.

29. 4.2.2 ALERTS CANCEL
SCREEN
If the user wrong press the button, he/she can choose to cancel the
alert call.
1
2
Tap on yes to cancel the false alarm.
Tap on cancel to go back to the previous screen.
1 2

30. 4.3 ALERTS RECEIVED
SCREEN
If the officer receives alert from another officer, there will be
notification being shown on the screen. This notification will show for
only 10 secs and it will disappear automatically after the duration. The
device will be also vibrating for three show times to indicate the user.
1
User can tap on the notification to go to screen 4.3.1 to get
to know more info about the officer who is calling for help.
1

31. 4.3.1 ALERTS RECEIVED
SCREEN
By tap on the notification or the alert icon on the main menu, the user
will be lead to this screen where the officer’s current status will be
shown.
1
2
1
2
By tap on this button, the user will be directed the way to the
officer who is calling for help. And the officer who is calling
for help will goes to screen 4.2.
By tap on this button, the user can be able to see the officer’s
recording from the real-time broadcasting function.

32. 4.3.2 ALERTS RECEIVED
SCREEN
This is how the users are going to watch the real time broadcasting
signal from the officer who sent out emergency alert. The screen will
go black and the user can choose to tap on the confirm backup at the
same time to help them make decisions more quickly.

33. 5.1 FILES MAIN SCREEN
This is the main screen for the Media files collection.
Tap on different options to switch between the photo
collection folders and video collection folders
1
1
2
2
Tap on anywhere of the list will let user start to watch the
video. Goes to screen 5.3.
3 The user can scroll down the list and the preset order is by the
date when the video is being filmed.

34. 5.2 FILES FILTER SCREEN
Tap on the filter bar can the dropdown will direct the user to
filter the videos into the orders as they want.1 1
2 The user will only be given authority to watch and replay the
video but they can not make any kind of edit to the video.
3 The information of the video such as name, location, date and
tags will be shown to the user.

35. 5.3 FILES REPLAY
SCREEN
Simply tap on any one of the video from the list and this screen will
pop up for the user to reply the play. The screen will go back full black
and the button function bar will pops out for user to fast forward
backward or stop and resume the video like how all the other media
players work.

36. 6.1 SETTINGS SCREEN
This is the settings screen to adjust all the system settings. All the
items will have their own second level navigation pages for the users
to make further changes based on their needs.

37. HIGH FIDELITY WIREFRAME

38. HIGH FIDELITY WIREFRAME

39. HIGH FIDELITY WIREFRAME

40. HIGH FIDELITY WIREFRAME

41. HIGH FIDELITY WIREFRAME

42. PRODUCT MOCKUP

43. COLOR PALETTE
2C5C7E
394D62
F5A623
E05C6C
8.71:1
7.14:1
000000
48A0D0FFFFFF
FFFFFF
1:10.36

44. INTERACTIVE PROTOTYPE
• I used Invision and sketch to create an interactive mockup for this
project to give a better understanding of my design especially the user
flows of my device. As mentioned above this camera is using an Android
OS that I have chosen the HTC one phone as my mockup template
background.
• Here is the link to my interactive mockup:
• https://invis.io/3WE2QUXVG#/259682015_Login

45. DOCUMENTATION
• Here is the link to my portfolio site with the documentation of my process tackling this project:
• http://www.amazingleo001.com/index.php/2017/10/23/police-body-worn-camera-design/