Team:
Erik Soriano
Role:
UX designer
Timeline:
Spring 2023
Tools:
Figma
INTUITIVE. TRANSPARENT. TRUSTWORTHY
Summary
Using a human-centered design approach, I was tasked with designing a touchscreen body-worn camera interface for the Motorola Si500. Over the course of 1 month, I did secondary research, and complied with the requirements that the body camera needed. After a few iterations and design feeback, the end result was a clean, and intuitive user interface that allows officers to easily record, and access data, as well as view and send emergency alerts.
Objectives
Design a new user interface for the Motorola Si500 Body-Worn Camera, using a design-thinking approach
Ensure that the app caters to user groups of all technology knowledge levels
Innovate on existing features, including automated features to save officers time
The Challenge
Redesign the touchscreen for a body-worn camera for law enforcement officers that allows them to complete the main tasks (i.e., recording) as well as allow them to easily organize files that could later be used as evidence. Keeping in mind all stakeholders and people that are in contact with the officers, and ensure safety and accountability.
User Groups:
Police officers
First responders
Highway patrol
Specific Needs:
Allow them to access main features as quickly and easily as possible
Allow organization of event files, as well as make it easy to find previous files
The Solution
Reduce amount of buttons and items on the screen, and make it easier for user to navigate through the app to find the main tasks (recording, and organizing files). Automate features such as recording, when user puts their gun, or comes into contact with a person, or even when the officer is down.
Features:
Reduce amount of content on the screen to only show what they need (i.e., quick video/audio recording; quick broadcasting)
Ability to search files with name tags, as well as append items to existing case files in an organized manner for more concrete evidence
Research + Define
Product Description
Body-worn cameras are used in law enforcement for a variety of uses, including accountability, and build trust with the community members, as well as provide clear evidence of officers interactions with the public. The device allows the user to record and livestream video, as well as take photos and record audio files, which can be appended to existing files to create custom event files that can also be name tagged. Body-worn cameras are normally worn on the chest, although some officers may put them near the waist or on their head. It’s important to understand where the device is worn, because that informs the design decisions in order to ensure the best user experience, and ease of use.
The product requirements are:
• Android OS
• Device with a 3.2” (360×640 px) touch screen display
• Physical Controls:
– Push to Talk button
– Power Button
– Volume Toggle
– 2 Programmable Buttons
– Emergency Button
– Video Record Slider
Click here to view full document with secondary research (PDF)
BodyCam (Touchscreen View)
BodyCam (Front View)
Concept Map
Identify minimum requirements
Discover areas of innovation and potential new features
Lay out design plan to refer back to throughout design cycle
(Click on image to expand)
Task Flows
The device allowed user to do the following tasks:
• Turn device on/off
• Change volume up/down
• Send/Cancel Emergency Signal
• Receive emergency alert/view who is sending the alert
• Start/Stop/Review and Upload video and audio recording
• Take/View and Upload pictures
• Search for an event capture
• Append captures
• View/Dismiss System Notifications
• View device indicators
Ideation + Iteration
Sketches
The next stage of the project involved ideation and coming up with the best page layout that prioritized the main functions, while allowing room for secondary features to be nested. The device is meant to aid the officer in quick recording and appending files, so they are not expected to spend much time on the screen, which means there shouldn’t be many distractions buttons and options that they may not need.
It was also imperative to consider different user groups that may or may not be familiar with the latest Digital conventions. The device is meant to cater to people of all tech levels.
Low-Fi Wireframes
The first iteration of the wireframes was shown to a group of stakeholders and fellow designers for feedback. The overall comments were that the main functions were prioritized well, as well as good usage of tabs, and bottom navigation bar, but there were also some opportunities for improvement:
Design Opportunities:
The “go back” button or left arrow was missing from some pages
Needed to create flow for creating event folder where all appended and relevant files would be
The ‘create new file’ could have its own page where users could navigate back to
Hi-Fi Wireframes
After making changes to improve the user experience and flow of the pages, we introduced a new color, dark blue, in certain areas such as the top bar, icons, and some text. The UI will still be primarily light and dark to create full contrast, while the blue helps solidify the law enforcement look and feel that we needed to comply with, as well as go well with the red that is used for REC status and emergency alerts.
Physical Controls
The device has several buttons for the officers to perform key tasks such as recording, controlling volume, etc. Since most of the time, the officer is expected to wear the device on their chest, it was important to choose the most important tasks to map to the buttons.
Style Guide
Utilized and shared between this body camera device, and a companion mobile app that was designed by another designer. Using this style guide we ensured consistency across the product suite.
Final Iteration Annotated Wireframes
The final version of the prototype includes all interaction for the main tasks, and has been updated after stakeholder comments to address previous design issues. There are more details in the design, including color images representing recorded footage and captured images, as well as recording and default device indicators in specific colors.
Next Steps
After getting more feedback from stakeholder, continue the iteration process until the design is ready for usability test. Also keep thinking about new ways to automate other tasks and innovate on the product so it can be highly competitive, while always keeping the end-user’s needs front and centered.