Client: The VCC
Role: UX Associate and Manager
2020 – 2022
Background
This case study begins in April 2020 – major companies like the NFL are unsure of how to hold their annual draft remotely. Enter The VCC! Forbes covered the VCC (Video Call Center) demonstrating a glimpse into our remote present. I was lucky enough to join The VCC team in late April of 2020, just after the NFL remote draft success.
The VCC had the workflows, project management, process, and in-house software built for remote production down to a science (all of those are without a doubt, under NDA).
In 2020, The VCC that I joined was a fast growing, enterprise-level remote production company, with a powerful set of in-house software tools built for the VCC team to use.
By 2022, we were also SaaS company.
I cannot understate how incredibly hard everyone worked for us to take the leap from in-house utilization tools, to enterprise-level SaaS. This could not have been done without an incredible team of developers, incredible marketing leads, and a company-wide drive to succeed.
In 2020, no one outside of our company could use the in-house software tools that were made for remote broadcast/ professional engineering environments without months of training, not even broadcast professionals.
Without breaking the NDA I signed, let’s look over the scope of the 2 year long process of improving the user experience. Improving, designing, breaking, and working to recreate the VCC process as software. Finally -holistically- create a SaaS product that was eventually able to sell to the largest well-known Network Television Broadcast companies. 😁
Rebrand & User Interface
Branding & User Interface Decisions
I redesigned the VCC logo and branding as well during the evolving process of updating the VCC’s flagship software. This branding massively informed much of the User Interface decisions that would be made for the software that would become AirFirst.
You can see some of my process work on the rebrand here and The VCC brand guidelines here.
UX Overview
Challenges
During the development from in-house “Caller Queue” and “Queue Management” cloud based tools that would eventually become the product AirFirst.
The goal we set was to create a streamlined and user-friendly solution that would save time, reduce errors, and improve communication among producers, bookers, and guests.
Reliable Connection Evaluation: One thing that is impossible to fix remotely, is a bad internet connection. The earlier it’s spotted, the better. VIP guests notably do not like to join links early, as their time is valuable, which can leave producers with little time (if any) to troubleshoot a wonky internet or data connection.
Simplified Guest Connections: Back to interaction basics. The closest we could get to just one click to join a live TV program as a contributor, the better.
Real-time Return Video and Interaction: Real time was one of the most important factors to keep in mind. Everything demands urgency, and no delay for the guest to the studio.
Solutions
Reliable Connection Evaluation:
–Before connecting contributors, the system assessed the connection quality, ensuring a seamless experience and minimizing disruptions during live broadcasts.
Simplified & Improved Remote Guest Connections:
–Creating a true one-click experience. Prioritize ease of use, eliminating the need for downloads, accounts, or usernames.
-Instant connect for VIPs – take a guest from booker to control room with first video in as little as 12 seconds!
-Connect from any device, anywhere, and at any time.
-Support call-in and call-out workflows.
-Audience queuing system with filtering, localization, and social amplification.
Real-time Return Video and Interaction:
-Real-time interactions and engagement in live broadcasts are important. Real-time return video for each guest and facilitated direct interaction between VIPs, crowds, and audience participants.
-IFB Mix/Minus.
-Multi-participant with assigned seating and animated full-screen selection
Tools
Adobe XD + Figma
Jira
Notion
Teams
Team
1 UX designer
3 developers
My Role
UX design
UX research
Workshop facilitator
Timeline
Overall: 1.5+ years
Discovery & Research: 7+ months
Design & testing: 8 months
Design Process
1.
Interviews
2.
Surveys
3.
Journey Map
4.
Sketches
5.
Wireframes
6.
Usability Test
1. Interviews
During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design.
Brainstorming with the CEO, in-house producers, and development team, we prepared an interview script with 30 open-ended questions, focusing on our target audience.
Across many months, I recruited and interviewed more than 30 individual users remotely.
The interview script was designed to explore various aspects related to remote video connections and the challenges our Producers, Bookers, and Guests faced.
Here are some of the questions:
Can you describe your typical workflow when setting up remote video connections?
What are the main pain points or challenges you encounter during the process?
How do you currently handle communication and coordination among producers, bookers, and guests?
What features or capabilities would you find most helpful in simplifying the guest connection process?
How do unreliable connections impact your work, and how do you manage them?
Can you share any specific instances where the remote video connection process caused delays or errors in your broadcasts?
What are your expectations in terms of real-time interaction and engagement with guests and the audience?
How do you evaluate the usability and effectiveness of existing remote video connection solutions?
Are there any specific security or privacy concerns you have when it comes to remote video connections?
2. Surveys
After the project kickoff, we defined our research strategy and objectives. Understanding the target audience and their challenges were our priority.
Our company had spent years collectively within the broadcast industry- our CEO and chairmen were all ex-NBC execs. Market research into what producers wanted was laid out.
We did a lot of informal surveying of guests and producers across weeks with open ended questions.
Ordinal data was gathered on guest connection quality to gain insight on connection quality due to multiple factors.
Ordinal data was also gathered by producers and VCC team members on difficulty of use.
The conclusions drawn all went back to our 3 problems and priorities. The speed and ease of our software needed to be high- but the complexity to be able to be used across any device, any connection, with no mirroring, lag or latency.
3. Customer Journey
Awareness: We examined how they discovered the service, whether through online searches, referrals, or marketing efforts.
Consideration: Here, customers actively evaluated AirFirst as a potential solution for their remote video connection needs. We explored their decision-making process, the criteria they used to evaluate the service, and any challenges they encountered during this stage.
Adoption: Once customers decided to adopt AirFirst, we examined their onboarding experience, including the signup process, account setup, and initial interactions with the platform.
Usage: This stage involved customers actively using AirFirst to conduct remote video connections. We identified the main touchpoints, such as creating and managing connections, scheduling events, and interacting with guests and bookers.
Support: We considered the support touchpoints, including customer service interactions, troubleshooting assistance, and access to resources or documentation.
Loyalty: At this stage, we looked at the post-usage experience and aimed to foster customer loyalty. We examined touchpoints related to customer satisfaction, feedback collection, and opportunities for upselling or referrals.
Suggested resolutions and changes included:
Streamlining the onboarding process to ensure a seamless and intuitive signup and account setup experience.
Enhancing the user interface and navigation to improve usability and simplify task completion during connection creation and management.
Improving communication and providing proactive support during troubleshooting or technical issues.
Enhancing resources and documentation to empower users to find answers and troubleshoot independently.
Implementing features to facilitate collaboration and coordination between bookers, producers, and guests.
Mapping the customer journey helped us identify pain points, prioritize design changes, and develop new features that addressed the specific needs and challenges users encountered at each stage. It allowed us to take a holistic view of the user experience and ensure that our design decisions were grounded in user insights and aligned with the high stakes demands of broadcast needs.
4. Sketches
There were too many distractions in the flow – users had to learn routines and memorize button placement, which is a huge roadblock in live broadcast TV, where every second is important.
The version that we felt best addressed the identified distractions, and provided a clear and simple user flow was selected and iterated on.
The layout and arrangement of elements in the sketches were designed to prioritize the essential functionalities and minimize distractions.
Clear visual hierarchy, and grouping of related elements was established.
By revisiting the sketches, myself and the dev team could stay focused on the main objectives, refine the design solutions, and maintain a clear direction while avoiding unnecessary detours or distractions.
5. Wireframes
Using Adobe XD at first, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding branding, and revised micro copy. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I had made a few alternations and moved on to creating high-fidelity prototypes.
The low fidelity wireframes were clear enough to discuss with the development team and CEO to discuss the process we were envisioning.
Some wireframes were created purely to showcase one small element of a product. Those would go on to become high fidelity wireframes.
We went through about 6-8 iterations across nearly two years. As the goal of AirFirst evolved, more conversations were had about how to solve the user needs, along with improving the backend.
We discovered the need for a tool that evolved into Crowdview.
During this process we came up with a diagnostic tool- the tool, TenacIT, was developed and produced before UX was designed and improved upon.
TenacIT is a software tool to help gauge a video call connection before the initial video has launched for a remote guest, to help production teams to understand the strength of a connection in aiding troubleshooting of any video issues.
6. Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using figma. Concurrently, we did 4 usability tests in the first round, and 3 after iterating on the issues that we’ve identified:
Issue:
Producers, bookers, and guests expressed frustration and confusion while navigating through the workflows, describing them as complex and time-consuming.
Solution:
Our solution involved simplifying the steps, providing clear instructions, and improving the overall user interface.
We iterated on the design twice based on feedback from producers, bookers, and guests, and conducted additional usability tests to validate the effectiveness of the solution.
By implementing these changes, we aimed to enhance the user experience for all stakeholders involved in the AirFirst platform, reducing frustration, saving time, and improving overall usability.
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with The VCC’s values (see the branding and identity here).
The VCC’s Tagline has evolved over the years- from “Smartphones Make Smart Television”, to recently, “Infinite Remote Possibilities”.
Working with the marketing team, I also spent many weeks in 2020-2021 researching, comparing our competition (stream yard, zoom, BitFire, and vmix, to name a few), and checking on market trends.
We used Material UI.
The main development went toward mac and pc on safari, chrome, firefox, and edge.
The secondary development was for guest use on all systems, including, chromebooks, tablet, mobile phones, laptops, desktops, ultra wide, etc.
Next steps
If I were to personally continue the project, there are a few critical places where the site architecture cannot be adjusted without undoing years of code, that it makes more sense to start over.
For the team and designers following me, I left the 40 page VCC brand guidelines, assets, and web-safe suggestions. I leave behind suggestions to always, always, always use KPI’s and valuable metrics in your research to validate the areas you are looking to make improvements upon.
It is the clearest thing in the world – design and do work that will benefit the company’s bottom line in correlation with the many User Experience touch points, as it will benefit everyone.
You know it can be better- find it, and make the case for it. Take the time and do the homework yourself.
Dig deeper! Make a presentation for stakeholders, and deliver with integrity.
Learnings
Working at The VCC challenged me in a million ways- it was incredibly rewarding, fun, and inspiring. I would say, I learned the most about selling a design.
I’m incredibly proud of the hard working and intelligent powerhouse of a team I worked with, the logo, the branding, the design, and the product that we created, and eventually sold to Nextologies.
Here’s how I would break down the biggest takeaways:
Importance of User-Centric Design: Conducting user interviews, usability testing, and gathering feedback provided valuable insights into user needs, pain points, and preferences, which massively guided my design choices. I was surprised to look back and see how drastically my design choices evolved with user feedback.
Wow! Iterative Design: Each iteration allowed me to address issues, validate solutions, and make incremental improvements, resulting in a more user-friendly and effective (profitable!) product.
Collaboration and Stakeholder Management: Working with a diverse team and engaging with stakeholder needs was crucial to ensuring we created an excellent product in the end.
Problem-Solving and Decision-Making: Identification of and solving complex problems when transitioning an in-house tool into the AirFirst platform.
Validation and User Testing: I recognized the significance of gathering real-world feedback from users through usability testing and validation. It allowed me to validate design choices, uncover unforeseen issues, and make data-driven decisions, ultimately improve the user experience and satisfaction.
Don’t Always Let Perfect Get in the Way of Very Good: It’s tough, as designers, perfectionists, and pixel obsessed artisans, we want to create the very best thing that we can. But a very good product that helps people and can continue to evolve, is much better than no product because perfect is still in development. You know the things that you absolutely cannot compromise on.
Thank you for reading my case study!
Let’s Connect
Get in touch for opportunities or just to say hi
