From Complexity to Clarity: A 54% Usability Increase in Video Management Software
I led the redesign of the configuration page to simplify NVR management and device integration, making workflows more intuitive and improving overall usability for system integrators.
Overview
Johnson Controls' ExacqVision Desktop Client is a versatile Video Management Software (VMS) with 1+ million users, capturing footage from numerous IP camera models. It enables live viewing, real-time interaction, and historical footage retrieval.
The project focuses on the configuration page of the software, which helps users manage Network Video Recorders (NVRs) and further integrate cameras with NVRs.
Role
UX Designer
Team
4 UX Designers
1 Product Manager
2 Developers
Duration
10 Months
Contributions
Research
Ideation
Design System Usability Testing Digital Prototyping​
Tools
Figma
Teams
FigJam
Problem
Exacq’s ranking dropped significantly due to an outdated interface and poor user experience.
Once ranked second for ease of use and reliability in 2014, Exacq fell out of the top 10 by 2023 as customer satisfaction declined and users shifted to more modern competitors. Users faced challenges integrating cameras with NVRs and navigating configurations, signaling the need for simpler workflows to attract new users, improve satisfaction, and strengthen JCI’s market position.
Opportunity
A redesign was essential to modernize the product and stay competitive in a rapidly evolving industry.
.png)
Outcome
54%
Increase in system usability
2.7x
Faster task completion rate
Design Process
Research
Understanding the product and areas for improvement
Define
Analyzing research insights to define the problems to address
Ideate
Generating sketches by sketching and brainstorming
Design
Building component library and creating hi-fi designs
Evaluate
Testing the designs with users to test the design decisions
ExacqVision Desktop Client serves 4 distinct user groups: Owners, Security Guards, C-suite users, and Integrators, each with unique needs and workflows.
To align the project goal with the user groups, we chose integrators as the target audience since they use the configuration page the most and are responsible for installing and setting up the system. Below is an overview of their workflow.
Integrators
Adding NVRs or servers to the client.
Accessing the camera configurations/features.
Adding IP cameras to the NVRs
RESEARCH
I conducted mixed-methods research to understand the product and user challenges, including background research, competitive and heuristic analysis of 8 competitors, 6+ stakeholder interviews, and a field visit.
ExacqVision Client simplifies device management with auto-detection for IP cameras and advanced search features. It includes video analytics and customizable video walls for efficient monitoring of thousands of cameras. Its cross-device compatibility, scalability, and reliability make it ideal for businesses with demanding video management needs.
“Integrators especially appreciate how user-friendly and simple it is” - Product manager
“Users struggle with troubleshooting due to unclear problem sources and limited guidance” - Customer support
“Initial setup complexities hinder user engagement.”
- Quality Analyst
“No clear indicators on the application to understand the current system status” - Software Developer
DEFINE
Research insights helped us define key usability issues, with complex user flows emerging as a primary barrier to efficiency and ease of use.
Research revealed that the interface was outdated and the user flows were complex, with additional issues like poor feature discoverability, ambiguous UX writing, a cluttered sidebar, and unclear system status.
.png)
Discoverability Issues
Users struggle to locate and understand camera configuration features due to a lack of clarity in the current interface.
Unclear System Status
Users find it difficult to determine the system's current state, leading to uncertainty and troubleshooting challenges.
.png)
Cluttered Sidebar
As the number of devices grows, the sidebar becomes harder to navigate due to inconsistent terminology and poor organization.
Ambiguous UX Writing
Interchanging terms like "System" and "Server" creates confusion and undermines user confidence.
IDEATE
The team brainstormed solutions to workflow-related user challenges by sketching ideas in FigJam, focusing on streamlining and simplifying user flows.
The Client Configuration landing page lacked clarity, making it difficult for new users to complete tasks and find information. The System Information page was also hard to navigate, with poorly organized data and no easy way to view connected devices or servers, leading to inefficiencies.
Updated Userflows
The Configure Dashboard helps both new and experienced users understand VMS features, while the Server Dashboard offers clear insights into server health, making device and server management easy.
Providing three key actions with a clear starting point and direction creates a more efficient and streamlined flow.
TEST
We tested the low-fidelity wireframes with users to gather feedback on the redesign, which helped us identify key areas for improvement.
I conducted task-based testing with users experienced in video management software, asking them to complete the same set of tasks on both the old and new versions for comparison.
Users value simplicity and control, preferring an intuitive interface with easy options to update configurations and rename cameras and servers.
Form clarity needs improvement, with users struggling to identify required fields when adding servers or cameras.
Visibility of system status and alerts is critical, as users often miss notifications like server addition confirmations.
Navigation preferences lean toward simplicity, with users favoring a sidebar over a tree structure for quicker access to the camera list.
DESIGN
I began building a design system aligned with Johnson Controls' existing style guide. While they had a design system for the mobile version, there was none in place for the desktop version.
They granted us the flexibility to build a design system with a new component library. The color and typography choices were made collaboratively with the team.
DESIGN
The high-fidelity wireframes were built with both existing and new users in mind. The new interface is cleaner, more intuitive, and easier to use.
Streamlined flows give users a clear starting point, making navigation and overall use of the software more efficient.
Centralized dashboard to provide users with an intuitive starting point, offering seamless access to both client and server features through a single point of access for all client features.
.png)
Global search to quickly discover features
Streamlined process for adding & managing existing servers
Descriptor for features for informed decision-making
Simplifying the user flow for adding cameras and devices with intuitive controls and clear system alerts.
Alerts to inform users about System status making it easier to take appropriate actions.
Clear sections for adding devices and servers
Server Dashboard that provides access to all server information and settings, featuring interactive data visualizations to help users easily identify storage and device issues.
Using data visualizations to process large chunks of data
Structured and Scalable sidebar for easy navigation
Separating the Server or camera list and Adding Servers or Cameras with clear tables and CTAs makes it usable for users to take appropriate actions.
.png)
Using CTAs to guide users to take appropriate actions
Using consistent tables for list of servers added to the Desktop Client
Device configurations with clearly labeled tabs for different features enhance the discoverability of camera customization options. Comprehensive device information and AI-assisted help also help.
Using breadcrumbs to provide a clear visual cues of user flow within the system
AI-Assisted Device Management Manual
Using clear tabs allowing users to easily navigate between different camera settings
TEST
I conducted 7 usability testing sessions with users and stakeholders to evaluate the interface and measure time on task for the 3 primary user flows.
These sessions provided valuable insights into how users interact with the tool and helped identify areas for improvement to better meet the needs and expectations of the intended audience.
What did users like?
Interfaces are intuitive and user- centric
Consistent layouts & clear information architecture across user flows
What can be improved?
Dashboards can be made personalizable
Navigation Sidebar can offer more visual differentiation among features
FINAL DESIGNS
I created the final target user flow prototypes after iterating on the designs based on the user feedback.
1
Adding a server to the client using a centralized dashboard with easy-to-follow steps and clear system statuses
2
Adding a camera to a server using a server dashboard with easy-to-follow steps and clear system statuses.
3
Accessing camera configurations and updating the settings using manage devices.
Impact
Users found the redesigned version usable, leading to a 54% increase in the overall system usability.
Users completed the three user-flows 2.7x faster on the redesigned version as compared to the old version.
TAKEAWAYS
I learned a lot throughout the year-long project
Enterprise tools often encompass a wide range of functionalities to support complex workflows. I learned the importance of enhancing usability without compromising functionality.
Regular feedback from users and clients acts as a valuable tool for validating assumptions and occasionally challenging design decisions.
Check out other projects
ROCKET MORTGAGE
Increased the usability of Rocket's internal tool for monitoring bond prices by 68.4%
Fintech
Sencondary Markets
Enterprise
