JS

Case Study: Vidyo Remote Collaboration Solutions

Video conferencing and collaboration that go well beyond the typical Zoom call

Vidyo had a complex video conferencing suite that spanned many platforms, but the experience was inconsistent across devices. I defined crucial UX processes and led the design team in establishing a unified presentation across the entire product line.

Vidyo products displayed on various devices (laptop, tablet, phone, etc.).
VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)

Vidyo built their brand on breakthrough technology that enables high-quality, low bandwidth video conferencing with hundreds of participants across pretty much any device you can imagine: phones, tablets, computers, and even multi-screen conference room systems. The superiority of the underlying technology was enough to drive their initial success, but today’s customers expect great technology to be paired with great design. Recognizing that crucial need, Vidyo hired me to establish UX process, manage and grow the UX team, and drive the adoption of user-centered design across the organization.

Problematic process

Vidyo’s original video conferencing applications, VidyoDesktop and VidyoMobile, had languished for years, and their replacement, the Vidyo Neo software suite, was an attempt to address the bulk of their outstanding issues in one fell swoop. Being new to the company and the project, I was asked to supplement the existing design team as a UX designer, with the UX team reporting to the engineering lead. It was an odd arrangement, but there was a tight deadline and heavy pressure to complete the work, and I wanted to help however I could.

Vidyo Neo ended up serving as an unfortunate case study on how not to implement a redesign for a bevy of reasons:

Design by committee

A designer expects their designs to be subject to review to ensure the requirements are met and implementation is feasible. However, the product manager and engineering lead on Vidyo Neo effectively acted as the design leads, overruling the design team frequently despite neither having a design background. To make matters worse, no single UX designer was assigned as the design lead, so establishing process and consistency across the UX team was difficult. Design by committee became the norm and reaching consensus involved uncomfortable, contentious meetings where the loudest and most stubborn participant got their way.

Insufficient design resources

The UX designers at Vidyo not only performed all design functions, but all UI development as well (myself included), so in addition to dealing with design reviews and deadlines, they were also responsible for meeting engineering production deadlines while being hammered by QA for defects at the same time. It was impossible to give design tasks the focus they deserved.

Lack of user and customer research

Many assumptions were made about what was lacking in VidyoDesktop and VidyoMobile because no qualitative or quantitative data existed to identify shortcomings and prioritize features, leading to no clear vision or strategy. In addition, the Vidyo Neo design was heavily influenced by Vidyo company culture and employee mindset; it was assumed our customers used our products the same way we did, leading to a false-consensus effect.

Overemphasis on competitive analysis

Competitive analysis has its place in any product development workflow; good design often entails a certain amount of inspiration by competitors. However, it's a risky gamble to assume that your successful competitors are doing everything right and that your customers’ goals align with their customers’ goals. Rather than interviewing our customers to discover what they felt our product lacked, conducting appropriate usability studies, and creating a product based on user input, the Vidyo Neo roadmap was pulled almost entirely from competitors’ existing feature sets.

No user testing or iteration

While talented designers have good instincts, nothing can replace proper usability testing. Everything we designed went straight into the development pipeline and was released to the public. We received our first feedback from customers after the feature went into production. Once a feature went into production, it was usually forgotten in favor of the next set of features.

Not surprisingly, working on Vidyo Neo with broken or lacking process was a tough slog, and while customers told us it was an improvement over the previous generation of products, I knew we could do much better.

Redesigning design at Vidyo

After my experience with Vidyo Neo, I was determined to implement a proper UX process that would establish research and customer data as the primary drivers behind our feature roadmap and design decisions, while at the same time making the design/development workflow more collaborative and productive. I was afforded that opportunity when management decided to embark on a massive rebranding effort and product overhaul.

The following products were part of the rebranding initiative:

  • VidyoConnect (formerly Vidyo Neo), consisting of desktop, mobile, and web video conferencing clients
  • VidyoRoom, our conference room system
  • VidyoCore, our web-based meeting resource management suite

I began my new role as UX Lead fully empowered to incorporate process improvements and expand the UX team in order to undertake redesigns of all the above-mentioned products. Here is what I did:

Introduced a UX-driven design workflow

I was reassigned from the engineering team to the product group and given responsibility for all final design decisions. My team worked with a new group of product managers on our new projects and they focused their time on managing the roadmap and feature requirements rather than dictating design. To help explain the process changes I was proposing, I created documentation for Product/Engineering/QA and walked them through examples of healthy UX workflows.

UX and development process flow chart
My recommendation of a healthy design workflow within a development environment

Built a tiered UX team

I was provided budget to make several new hires, which I allocated as follows: a senior designer, two mid-level designers, and a junior designer, all with varying levels of experience across different aspects of UX (research, information architecture, interaction design, visual design, etc.), giving us a well-rounded skill set. With this structure, I was able to allocate resources effectively by assigning myself or the senior designer as project lead while the mid-level and junior designers were assigned tasks based on availability. I also empowered the designers by encouraging them to take ownership of their designs and run their own review sessions with stakeholders.

Involved customers in the product design process

I reached out to a cross-section of our customers and requested on-site interviews and tours of their facilities so we could better understand how they used our products. We listened intently to their feedback and saw the unique and varied ways they put our products to use—some of which we hadn’t even considered as use cases. These revelations gave us a new perspective, but just as important, we established meaningful relationships with our customers, reinforcing their value to us and reassuring them that their needs were being addressed.

Conducted extensive usability studies

I wanted a true understanding of our competitors’ products and how we stacked up against them, so my team conducted usability studies on both our existing products and our competitors’ products. We moderated the first batch of sessions in person and conducted additional studies with remote participants. Combining the results of these studies with our customer interviews, we created a UX audit containing recommendations for Vidyo Neo enhancements.

A screen cap of a usability study session
A Vidyo Neo usability study participant attempts to search her contact list

Created a style guide for design components and document templates

Even a small team of designers can struggle with consistency across many design documents covering multiple products. We created a shared UX library consisting of a simple style guide, common design elements, and UX document templates so engineering received consistent and predictable static mockups.

A screen cap of the Vidyo UX style guide
Part of our UI library

Built prototypes and iterated designs based on research

Continuing with our new testing procedure, we iterated our static designs and built prototypes to address previously unseen usability problems and also created entirely new approaches in our rebranded products like VidyoConnect. We then built prototypes of varying complexity in order to demonstrate new features and functionality and conduct usability testing prior to implementation. In most cases, we used tools like InVision and Adobe XD to quickly convert static mockups into clickable prototypes. For the redesign of the desktop app, VidyoConnect, which involved complex user interactions and an extensive new set of features, I created an almost fully-functional prototype built in Electron that behaved as the real app would.

A screen cap of the VidyoConnect prototype
VidyoConnect desktop prototype built with Electron (note the live camera capture)

I brought process, guidance, and years of experience to a relatively junior team who brought dedication, a willingness to try new things, and their own perspective. That combination enabled us to transform a fledgling product lineup into an example of what UX can bring when it’s correctly applied.

Below are various samples of my team's output across several Vidyo projects.

VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
A screenshot of VidyoConnect (Vidyo Neo v2.0)
Vidyo Neo v1.0
A screenshot of Vidyo Neo v1.0
A screenshot of Vidyo Neo v1.0
A screenshot of Vidyo Neo v1.0
A screenshot of Vidyo Neo v1.0
VidyoCore conference management suite
A screenshot of the VidyoCore conference mannagement suite
A screenshot of the VidyoCore conference mannagement suite
A screenshot of the VidyoCore conference mannagement suite
A screenshot of the VidyoCore conference mannagement suite
VidyoConnect Mobile
A screenshot of VidyoConnect Mobile
A screenshot of VidyoConnect Mobile
A screenshot of VidyoConnect Mobile
A screenshot of VidyoConnect Mobile