Smart Video Search
Search for person, vehicle, or object across multiple cameras and sites and return accurate results.
Eagle Eye Networks • March 2023 ~ July 2023
Role: Lead UI/UX designer: Owned the UI/UX from concept to execution
Revolutionizing Security Video Management with Smart Video Search
BACKGROUND
Eagle Eye Networks is a leader in cloud based video surveillance solutions for businesses and enterprises. Using Eagle Eye’s AI based security video system, customers can manage, view, and investigate video from any device across all locations remotely.
The goal of this project was to redesign the UI/UX of Smart Video Search feature within the security system. Smart Video Search enables customers to search with natural language for a person or vehicle of interest without having to scroll through endless amounts of footage.
Through close collaboration with the Product Manager, Director of AI, and Engineering team, we designed a seamless solution that has won 3 international industry awards.
Significant Usability Challenges & Visual Overload
PROBLEM
With millions of cameras coming online, our users need a way to navigate large amounts of video quickly. Traditional methods of searching through endless footage by date and time are cumbersome and time-consuming. EEN saw the opportunity to leverage our expertise in cloud-based video surveillance (Cloud VMS) and artificial intelligence (AI) to create a best-in-class search experience for our users.
While a first version of Smart Video Search was implemented, user adoption was low. The interface faced significant usability challenges and lacked visual consistency with the rest of the Cloud VMS application, undermining the overall user experience.
Complex Density Map
Density map (blue blocks) is used to depict how many relevant events occurred in a respective time frame. It was obstructive and confusing to many users. Majority our users are not that technical.
Tedious Filtering Process
Filtering by specific attributes requires two clicks to view the filtering options. User has to click on the input chip, followed by the specific filter, and scroll through the dropdown to select an option.
Buried Results
There are too many levels of hierarchy to get to the relevant events/images.
Bulky and Atypical Time Picker
Time picker is not easy to interact with and not the default picker most people are familiar with.
Understanding the Strengths and Weaknesses of the Current Design
RESEARCH
The project kickstarted with a discussion meeting with the PM and Director of AI to understand their goals for the Smart Video Search redesign. Leveraging my prior experience designing Video Search for mobile app, I was familiar about the users and key use cases.
To establish a baseline, I dove into the existing web interface, dissecting its strengths and weaknesses. This analysis was vital for prioritizing user needs and guiding the redesign direction.
Defining the Target Users and Studying Competitors
RESEARCH
Target Users
Security officers and guards responsible for monitoring surveillance cameras may use the video search feature to quickly locate and review relevant footage in response to security incidents or alarms.
Law enforcement agencies, emergency services, and first responders may use the video search feature to gather evidence, conduct investigations, and enhance public safety and emergency response efforts.
Business owners and managers may use the video search feature to oversee operations, ensure compliance with regulations, and protect assets and personnel. They may also use it for employee monitoring, customer behavior analysis, and theft prevention.
Competitor Landscape
To ensure our solution remained best-in-class, I analyzed competitor offerings from Verkada, Open Eye, and Avigilon. This benchmark ensured our redesign remained at the forefront of the industry.
Simplify the UI/UX while still retaining valuable functionality
GOALS
Focus was to significantly improve the existing UX/UI to increase feature adoption and align it with our design system guidelines and components. Having more functionality doesn’t necessarily mean its a better feature. We wanted to redesign with intention.
DEFINE
Unveiling the Hidden Inefficiencies
Before diving into the design phase, I started by untangling the complexities of the existing Smart Video Search through user flows. Visualizing the user journey revealed inefficient and unnecessary steps. This analysis became integral for simplifying the search experience and creating a more streamlined structure for the redesign.
IDEATION
Brainstorming and Iterating for Efficiency
There were about 6 iterations for this design to which I’ll summarize the main design decisions and some ideas we tossed around.
Event Image Access: User flows revealed excessive clicks to reveal all event images related to the search query. We initially combined event images and the expanded pop up view in one page after user clicks into a camera, but ultimately opted for a simpler solution: displaying all event images on the first page right underneath the search query. Users can still click on an image for an expanded view, and have the option to switch to the original camera-grouped view.
Density Map: We explored various options for the density map (used to visualize event frequency) displaying it constantly, only when enlarged, or removing it altogether. Considering low user engagement, we decided to offer it as an optional setting, disabled by default. We also moved it to the settings menu rather than always visible on the first page since it is not a frequently interacted with option. Since we had a setting based on previous decision to either show event images or show them grouped by camera, we had to consider how density map would play out when images were NOT grouped by camera. How would we showcase it?
Filter Access: With the filter design needing fewer clicks, we explored two options: displaying all filters by default or a chip-based dropdown menu.
Other key decisions included:
Search Enhancements: To streamline the search experience, we introduced a search history and autosuggest functionality.
Image Navigation: The underutilized "swipe between preview images" functionality was removed.
Time Picker: The scrolling time picker was replaced with a more familiar and user-friendly date/time picker
Refining and Validating Assumptions
VALIDATION
We collaborated on internal A/B testing with the Product Manager and Design teams. We also included Sales Engineers who work closely with end users. We tested different versions of the flow, which allowed us to find an even simpler solution after discussion.
To ensure the redesigned Smart Video Search met user needs, we conducted usability testing This 3 resellers, who introduce the solution to potential customers, and 4 security personnel, the primary users relying on the search function daily.
User testing revealed a lack of clarity regarding clickable elements. When users enabled the "group by cameras" feature, they didn't realize camera names were clickable. This issue was addressed by adding an arrow next to each camera name, visually emphasizing its clickability and improving user interaction.
Easily Search and Find Person or Vehicle
SOLUTION
After research, explorations, several iterations, and discussions with the team, I created the high fidelity designs showcased below that addressed all the key pain points for a seamless flow.
View results faster
Reduced visual noise and redundant actions to get to results faster
Streamlined UI
Updated the feature to align with the design system components and app’s visual style
Easy time selection
Implemented a familiar date and time picker understood by majority of our users
Quick filtering
Be able to filter easily in one dropdown without having to click around multiple places
Effortless search
Introducing autosuggest and the ability to view recent searches
Increased feature adoption by 42 % and customer satisfaction from 3.5 to 4.5 stars
RESULTS
We saw significant improvment in feature adoption! Customer satisfaction ratings for video search feature jumped from 3.5 to 4.2 stars. During conversations with customers and resellers, they’ve all been consistently impressed by the feature’s accuracy and ease of use. It was not only well received by our customers, but Smart Video Search was even recognized as a best in class feature within the industry. We have won multiple international awards.
We’re not stopping there - building on this success, we’re currently working on exciting new functionalities like anomaly detection and face matching to further empower users’ experience in Video Search.
“The Smart Video Search is a powerful response to the strong market demand for a video search function that offers ease of use, speed, search versatility and precision – a true victory for customised design”
Streamlining Product and Design for Efficiency
LEARNING
Key takeaways
In our design approach for this feature, we focused on scalability and a forward-looking vision for the product. By designing a future-focused version first and working backwards, we put in extra effort upfront, but this will ultimately save us time as we scale and add advanced features. I will definitely take this approach with me for all things that I design.
What could we improve?
It would be beneficial to have defined the UX requirements for this project at the start to convey to stakeholders the vision for it earlier in the process. It might have saved us some time during design iterations, going back and forth.
This project also highlighted the importance of a streamlined design handoff process. While the initial design approach worked out pretty well for us in a mid mature company, there were slight misalignments between the Figma design file and the development stage due to a few months gap in time between design and implementation. This resulted in some general UI design changes not being reflected in the final Video Search design and having to go back and make changes as the developers pointed it out during this phase.