WatchGuard Video is the leading provider of mobile video solutions for law enforcement, having supplied in-car video systems and body-worn cameras along with evidence management software to approximately one third of all law enforcement agencies in the United States and Canada. WatchGuard hired me, as their User Experience Engineer, to design, develop and implement a complete solution for the Evidence Management Software.
To completely redesign the application interface, with a primary focus on optimizing it's search capabilities and the user journey for a major version update of an existing application, while addressing the shortcomings of the current application interface. Additionally, this new Major Version release would introduce two new, highly-complex features - In-Browser Video Trimming, Editing and Exporting as well as Video Evidence Sharing that retain chain of command signatures.
At it's core, UX is problem solving. This application is responsible for uploading, storing, searching, sorting and sharing Police Video evidence from Body-warn and in-car or motorcycle mounted cameras - a complex process with a variety of regulatory and feature requirements. The starting point for this project began by assessing the assumptions made of the current user journey. What do we think we know about our customers? How do we think they interact with the app? The Engineering, Marketing and Executive teams played key roles in identifying these assumptions. The current application contained known (reported) usability issues and by coming into the project late, as a replacement for a contract design team, I was facing a very short deadline for a complete interface re-design. The company had no UX Researcher(s) on staff and were not inclined to hire any this late into the development cycle.
With a deadline looming and limited staff resources it was obvious that the best solution was to dig right into the research. I attained all available user analytics, had numerous discussions with stakeholders, Department Managers and industry experts and identified existing issues as well as potential solutions to the new features coming in this major update. With the initial, though sparse, research concluded I was tasked with creating the User Story Map which provided clear visibility of the tasks the users would perform. By referencing the Story Map our teams were able to attain a clear picture of what the minimum viable product should be. With user goals defined sketches were created to provide quickly, efficient iterative testing of solutions. I made it a priority to include key stakeholders in the skething process. Engineering Developers we included in meetings and UI / UX presentations - Involving the Engineer Team in Design = Mind Blown! Not only did the Engineering team provide valuable insight into past user experiences, they also contributed to suggestions for implementation that would achieve both the UX and Launch goals.
My first step was to research what we thought we knew about our users, to uncover all available user analytics and identify the key stakeholders and industry experts for later review purposes. I conducted multiple User interviews and informal surveys. This information was invaluable and confirmed many assumptions as well as identified areas we had 'missed' the users expectations.
Once I had an understanding of our goals, I began to work up Sketches, iterating through issues discovered during user interviews and addressing usability issues with the current application interface.
After the initial wire-frames were completed, and peer-review and stakeholder feedback was received and applied appropriately, I moved directly into developing Live Mock-ups, creating much of the HTML, CSS and JS that the live app would utilize. This allowed me to demonstrate the design and usability solutions in a way that redeemed development time later in the cycle. The Engineering teams greatly appreciated this.
The Sketching process can be tedious but it's an essential method to quickly iterate and test solutions to visual design problems. Sketches were used as references during Scrum Stand-ups and Team meetings, to illicit helpful feedback and insights into the project.
With the final stretch of the development sprints firmly in front of us I went to work finalizing the front-end code for the application. The Interface was implemented with a combination of Bootstrap CSS framework and custom-coded, object-oriented modules for each of the feature requirements. All code was formatted, linted and W3C Validated. From there the interface was merged into templates used in the apps development .Net stack. Unit and user testing was completed and the app was approved for launch.
