Restructuring the information architecture of video surveillance mobile app to improve correlation between camera and its location
Domain
Video Monitoring and Security
duration
12 weeks
Role
UX Designer
tools
Figma, Miro
my Role and contribution
As a UX Designer, I delivered the project single-handedly by
creating technically feasible features in high-fidelity, using Figma
conducting user research and competitive analysis to identify user pain points and market trends
context
ExacqVision is a leading Security and Video Monitoring Solution for enterprise-level customers
Problem
However, video monitoring was difficult for on-field security on their current mobile application
I interned for company, Johnson Controls, one of the leaders in the field of smart building technology, software and services.
Overview -
About The Project
Currently, the team is working on their Next Gen mobile application
The application included all the features provided by the desktop version, such as camera view, custom dashboard views, etc.
The team aimed at improving experince of the mobile application by exploring new and efficient ways of video monitoring
The Problem
Desktop application had a “maps module” for multiple location monitoring. But, on-field guards often used mobile devices.
Client
Locations
Sub locations/ site
Reason
Managing multiple locations,multiple buildings and sites without maps was tricky
my solution
Map feature that contextually correlates the cameras and its location
Location Search
Location labels of multiple sites
Camera previews for the selected location
Google Maps Integration
Filters for focused monitoring
Picture in Picture view for quick area surveillance
Thumbnails to identify cameras
Picture in Picture camera view
solution includes...
01
A dedicated map menu for location based surveillance
Tap to see location details
Bottom panel listing location and cameras
Image thumbnails to reduce processing load
02
Picture-in-picture video for floor maps
Pills to plot object points on map
Plottable items are as per camera capabilities
Picture-in-picture video On tapping the camera thumbnail
03
Easy switch between Camera Detail view and Map view
Provided widgets with camera video and quick actions buttons
Camera Details Panel
Frequently used quick actions
Switch to camera focus view from maps for advanced actions
03
Easy switch between Camera Detail view and Map view
Provided widgets with camera video and quick actions buttons
Camera Details Panel
Frequently used quick actions
Switch to camera focus view from maps for advanced actions
04
Spotlights the camera's location on map
Spotlights the camera's locationon map as you slide through the video panels
Let's see my journey from problem towards the solution
User interviews insights
On-field guards rely majorly on maps
On-field guards have hand-held devices. The maps are helpful to know incident location
Manager of a security service company in the city
Difficult to correlate camera footage with its locations
We have this printed floor plan to know which camera is showing which location. Helps to locate any misactivity
Floor manager of a big retail chain
Expected more data from the maps like vehicles, people...
We mostly use these cameras to locate the cars and people currently on location.
A client owning fitness company franchise
On-field guards rely majorly on maps
"On-field guards have hand-held devices. The maps would be great for identifying incident location"
It was difficult to quickly know camera's location
"We have this printed floor plan to know which camera is showing which location. Helps to locate any mis-activity."
Expected more contextual data like people, vehicles...
"We mostly use these cameras to locate the cars and people currently on location."
problems with maps on desktop app
1. Confusing iconography
Same icons are used for cameras and locations
2. Map is a static satellite-view image
Difficult to visualize the location and no one could interact with them.
3. Excessive switches between map and camera
Same icons are used for cameras and locations
4. Relies heavily on the memory of the user
Remembering which camera is on which floor is not easy when one cannot see them together
challenge was...
How might we leverage maps to enhance the video monitoring experience for on-field guards on the mobile application?
ideating solution features
Correlating camera and its location by showing it together
Plotting objects on map for identifying their location
Giving a realistic map experience
iterations
Picture-in-picture for correlating cameras and its location
Camera view
Map
The map is getting hidden behind the camera view overlay.
Map
Camera view
Map is too small to be visible when the camera panel shows up.
Map
1. Camera View
2. Camera View
Picture-in-picture is the best way. Map is visible all the time and easily accessible.
Pill filters at top for plotting objects on the map
A collapsible icon menu on top of the bottom bar
Functionality not discoverable when collapsed
Buttons links of the objects.
Looked more like a tab menu than buttons
Pills of the object names at the top of the map.
Similar to Google Map's filter buttons. Easily discoverable and intuitive (Jakob's law of familiarity)
From wireframe to High-Fi prototype
Pills for plottable objectlike cameras, doors.
Location icons with labels
Preview thumbnails of locations or cameras
Search bar with bread crumb navigation
Interactive map integrated with google maps
Bottom Camera Panel with tabs for location map and video preview
The map menu
Spotlights the camera's locationon map as you slide through the video panels
Tap to see location details
Bottom panel listing location and cameras
Image thumbnails to reduce processing load
The Floor Map
As one goes to the floor map level objects can be plotted on the map, depending on the detection capabilities of the installed cameras
Picture-in-picture view
Picture-in-picture video On tapping the camera thumbnail
Pills to plot object points on map
Plottable items are restricted depending on camera capabilities
Navigating Between Maps tab and Camera Tab
This widget has a button to navigate to the Camera Menu and also some frequently used camera controls...
Camera Details Panel
Frequently used quick actions
Switching to camera module from map module for advanced actions
This feature received high praise from stakeholders due to - its ability to maximize the strengths of two features viz. camera and map, while - leveraging existing functionality, without reinventing the wheel
Prototype in action
Here is a quick demo of how one navigates through the map menu
my learnings
UX role is beyond research and design. It also brings out negotiation skills to reason with stakeholders and engineers
Users find gradual modifications easy to adapt to
Users liked small feature changes and they performed the user tasks faster. Also, engineers found the changes easy to implement, as they were easy to integrate into existing code.
Building the right context, helped in making informed decisions
During design discussions with stakeholders, building the right context - helped to make them understand the user needs better - make then take informed decisions.
Iteration leads to quality
Design iterations helped to - evaluate the strengths and weaknesses of the design features. - design by considering the current infrastructure and device capabilities.
