Project Timeline: December 2021 - March 2022
Redesigning Live and Recorded Video
Eagle Eye Networks Internship
Background
Eagle Eye Networks is a cloud-based video surveillance company. It is innovating at scale and pace with a secure, open platform and AI that is flexible to meet customers’ evolving needs quickly. I am responsible for the mobile design of the Eagle Eye Cloud Video Management System (VMS).
-
Challenge
Viewing recorded and live video are the most frequently conducted actions on the Eagle Eye VMS app, and the importance of redesigning it could not be overstated. The app in its entirety looked outdated since the mobile app design had not been touched for a few years. As a part of the new mobile app release planned for April 2022, the history browser and live video experience was one of aspects that had to be revamped.
-
My Role
As the sole product designer on the mobile team, I worked closely with the product manager and engineering teams for IOS and Android. I approached the design with fresh eyes since mobile UI/UX was back on the drawing board after many years.
Research
The product manager and I teamed up to gather insight into key pain points and areas of opportunities with the following methods:
Read through response forms from customers
Spoke to company stakeholders
Obtained internal feedback
Competitor Analysis - looked at competitor apps on how they implemented live and recorded video
With the info we gathered, we identified key pain points/problems and areas of opportunities and established the main use cases.
Recorded Video Before Redesign
Pain Points
Too many confusing controls in the control panel that are hard to distinguish functionality from one another
“Now” button and “Live video” button is used interchangeably by users, unknowing that they provide different functionalities
Area of Opportunity
Improve the self-monitoring experience (in more detail in the next section)
Use Cases
Watch live video
Retrieve past motion events at a specific date/time
Discover any motion events that occurred last night easily
Defining Requirements
We came up with requirements on how to improve the overall self-monitoring experience and address pain points.
Have easy to use controllers to navigate the timeline
Be able to zoom in and out of timeline to see an event in detail
Hide nonmeaningful info/controls so user can focus on recorded video only
Clear and intuitive way to switch easily between live and history browser
Update the visual design to make it look more modern and inline with competitor apps
Ideate & Iterate
Once we defined the requirements, I went through several iterations of designing wireframes in Figma. Typically, each iteration consisted of a few different structural ideas. I would discuss and gather feedback from our team of executive stakeholders, PM, and web designer. Numerous design decisions were made through this stage, but I’ll highlight a couple below to give some insight on my approach.
-
![]()
Interactive Control Panel
One of the biggest pain points was the overwhelming and confusing controllers. We kept only the necessary controls and took out the unnecessary and infrequently used ones. In the beginning, we maintained the static, always shown controller panel beneath the timeline. However, after user testing and discussion, we concluded that users mainly interact with the timeline and not much with the controllers. Yet, the controllers were still crucial as this was a video surveillance app after all. I came up with an idea to have a control panel that could be easily shown or hidden as per the user’s choice. The user takes control by having the option to access the panel when they want to use it or hide it if it interferes/is not necessary for them.
-
![]()
Switching Between Live & Recorded Video
We knew that we wanted an easy and intuitive way to switch between history browser and live video. There were a few different ways I thought of going about it: segmented control, chips, or state switch control.
The segmented control is clear for both IOS and Android users but it would better suit different views of similar content. Live and recorded videos are quite different from each other. More importantly it would take up more real estate, which I wanted to keep minimal.
The chips would be more familiar to Android users, and I wanted to cater to both IOS and Android users equally. Similarly like segmented control, it would be another component that took up space.
The state switch control seemed like the best option as it is used to represent two different system states. It would also take up minimal real estate and the visual depiction of the icons were clear to discern the two different states(recorded and live video).
-
![]()
UI: Timeline Component
We wanted to update the old-fashioned and “boxy” timeline. Initially, I was experimenting with a clean and modern timeline that was easily functional as well. However, since our main goal was to “refresh” and update the app for the Version 1 release, we still had to maintain similarity to the web app. I decided a better approach would be to keep the timeline, eliminate the boxy rectangles surrounding it, and change the colors for a cleaner look.
User Testing
In between wireframe iterations, we conducted frequent user testing sessions within the company, which gave us valuable insight in terms of design improvement and validation.
Visual Design
To give it a more clean and modern look like competitor apps, I went with a minimal approach. I applied darker grays for the timeline and eliminated the “boxiness” that arose with all the unnecessary containers (top bar and controller panel).
The clickable buttons were a dark gray while still maintaining significant contrast with the gray background.
I wanted to ensure that I stayed true to Eagle Eye Networks’ brand and kept the blue color in the timeline.
Interaction Design
We had to consider the interaction for all different states. For example, how would the user swipe up to show the controller panel when they are zoomed into the video versus when they are not zoomed into the video? We had to consider interaction differently between IOS and Android in order to stay true to each operating system’s innate behavior and users’ expectations.
Onboarding Tutorial
In order to notify users of these new interactions in the new design, we created a one-time tutorial that the user could follow through to be aware of these features. I utilized animation in order to provide a visual of what it means to “pinch to zoom” and “swipe up”.
Inform users on zoom timeline functionality
Inform and show users how to access and hide control panel
Development
Once the design was finalized, it was sent to development. I was in the loop with the development team by viewing the in-progress builds, providing feedback, answering design questions, and working with them through any design concerns that came along the way.
Takeaways
The rewarding part was seeing the approval and appreciation we got from members of the company when we showcased our new design. The mobile app was back in the game!
Some things were neglected in terms of UX. I would like to have spent at least one sprint on just designing the timeline component, but we we had to prioritize our goals against the deadline we had.
And that's just the beginning
After the new mobile app is released, we will dive deeper into improving the information architecture and UX in order to further increase our conversion rates. Stay tuned :)