Video conferencing analytics platform: Speeding up issue resolution by 28% with data visualizations

Project overview
Video conferencing is a lifesaver for organizations with large distributed teams worldwide. However, this is true only if the tool of choice works smoothly: there is no unexpected downtime or dips in performance at peak times.
Keeping track of hundreds or thousands of video calls to optimize performance and quickly pinpoint issues can easily become a drag on developers’ limited resources. For our client, a U.S. startup called Agent Walrus, there was an obvious solution: a web platform that tracks stats for video calls at scale and alerts developers about issues as they arise.
However, as a data-heavy SaaS web platform, Agent Walrus would need a fast, responsive front end with intuitive, highly customizable real-time data visualizations.
Services


Challenges
Our client took on UI/UX design and backend development. We, in turn, were tasked with translating existing wireframes and prototypes into a functional frontend and integrating it with the backend.
Agent Walrus is a data-heavy SaaS product. So, our key challenge was minimizing refreshment latency for data visualizations while ensuring they were easy to navigate and comprehend. We also had to ensure optimal performance throughout the platform when processing dozens of metrics and thousands of video call sessions.
Since the platform offered diverse monitoring and analytics capabilities, comprehensive onboarding was also necessary. This involved not only the traditional setup workflow but also a demo app to help users understand the platform’s capabilities.
Our discovery phase outlined the key business needs and technical requirements for our project, including:
Strategic business needs
01 Deploy a video conferencing monitoring and analytics web platform with responsive data visualizations
02 Achieve an average monthly product sign-up growth of at least 15% within the first year
03 Keep the user churn under 15% within the first year
04 Reach a user satisfaction rate above 85% within the first year
Technical requirements
01 Develop the web platform’s frontend based on the client’s wireframes and prototypes
02 Integrate the frontend with the backend codebase and ensure seamless and secure flow of data between the two
03 Implement real-time data refreshment and visualizations with customization, search, and filter features
04 Limit the latency for data visualizations to 50 ms at all times
05 Ensure the application availability of at least 97.5%
06 Keep the average response time below 0.3 s
07 Secure a system usability scale (SUS) score of at least 85
We’ll ensure your product can visualize large volumes of data with ease while making user experiences delightful.


.webp)
Solutions
We selected React, Typescript, and Redux to build a fast, responsive frontend to seamlessly update the displayed data in real time. This tech stack is also perfect for creating interfaces that support high request throughputs and large data volumes.
Our component-based approach to frontend development, along with iterative performance and scalability optimizations, bore fruit. The platform showed a 92 Apdex score, 99.9% application availability, <50 ms latency, and <0.3 s average response time.
As a result, our client received a data-heavy interface that was seamlessly integrated with the backend codebase. The web platform came equipped with the following capabilities:
- Sign-up, sign-in, and onboarding
- Demo calls for user training
- Individual session analytics with customizable charts and graphs
- Video conferencing tool analytics with customizable charts and graphs
- Continuous error monitoring and detection
- Data search and filtering



Sign-up and onboarding
Agent Walrus welcomes new users with a simple sign-up form that requires only a work email address and password. We added validation rules and error handling to make the process even smoother and prevent mistakes during data entry.
Once signed up and logged in, users are guided through entering their organization’s details and setting up their first metric-tracking app. When implementing this user flow, we paid extra attention to usability and error handling. It paid off: During user satisfaction assessments, users cited smooth onboarding as a strong advantage, contributing to a 91% satisfaction rate.

Demo app
The demo app allows users to take Agent Walrus for a test drive and learn the ins and outs of its inner workings before using it on an in-production video conferencing tool. This demo app demonstrates how Agent Walrus can track video call metrics and adjust settings like audio quality and video resolution.
This demo app makes the learning curve gentler and allows users to explore the full feature range. This promoted feature adoption across the board, all while helping limit the user churn to 7%.

User sessions
This component provides users with a full overview of all video calls. The list displays participants' platforms and locations, call status, and user feedback. Thanks to comprehensive search and filters, the list is easy to navigate. For example, users can choose to view only active sessions or the ones where errors occurred.
We ensured the session list and information are seamlessly updated in real time, quickly displaying the latest changes without disrupting the user experience. We also added a connection matrix to provide users with a simple visualization of all connections and their statuses.

Session details
Agent Walrus allows users to review stats for every individual video call. A variety of charts and graphs display metrics like the bit rate received and packet loss rate throughout the call. Users can also view data about the call participants, their locations, used devices and platforms, browser versions, browser console outputs, and more.
The ensemble of this data provides development teams with a comprehensive overview of all data related to a specific video call. This enables better root-cause analysis for issues that may arise during the call. Our intuitive, customizable data visualizations streamline this analysis even further, strengthening the product's key value proposition.

Dashboard
The dashboard is where all session data for a specific video conferencing tool lives. The dashboard aggregates and visualizes the said data, allowing users to narrow it down with filters and custom date and time ranges. The data in question includes the number of user sessions, serious issues detected, and successful calls, displayed in widgets, charts, and graphs.
Some users may need to track real-time metrics, while others may want to investigate historical data. To meet the needs of both, we added the auto-refresh toggle, a refresh button, and an indicator of when the data was last updated.
As a result of our work, metrics get refreshed in real time without dips in performance or friction in the user experience. Early users also reported that the intuitive, customizable data visualizations on the dashboard helped them speed up issue resolution by 28%.

Search and filtering
Users can manipulate all data appearing on the dashboard and session pages with comprehensive search and filter settings. On the dashboard, for example, users can set custom date ranges or select predetermined intervals from a drop-down list. On the sessions page, users can narrow the list down with advanced filters like session status and date range.
While developing this interface part, we suggested several improvements based on user testing results. With our client’s approval, we introduced them, speeding up search and filtering, streamlining user experiences, and securing an 89 SUS score in the process.

Tech stack
Impact
Highly customizable data visualizations and consistently high performance allowed Agent Walrus to achieve:
We’ll minimize latency for data refreshment and average response time while driving user satisfaction with intuitive visualizations.


Related case study
Connect with us
.webp)
We are a tech partner that delivers ingenious digital solutions, engineering and vertical services for industry leaders powered by vetted talents.