Vbrick Rev
  1. Overview
    2.
  2. Research & Evaluation
    3.
  3. The Initial Design
    4.
  4. Prototype Development
    5.
  5. Finalizing the Demo
    6.
  6. Charting the Future
    7.
PRODUCT UI REFACTORING

Employing Design Leadership as an Agent of Change

Vbrick Rev Platform
1
Overview

Summary

A live streaming and enterprise video platform (EVP) used by some of the largest companies in the country, including Ford, Walt Disney, Visa, Pfizer, Morgan Stanley, and more. The Rev platform allows for global large-scale live events with tens of thousands of simultaneous participants, robust integrations, and cutting-edge VOD enrichment features.

Problem Statement

Rev is one of the more powerful live streaming / EVPs in the market today, but with a heavy investment in architecture, integrations, and features, the user experience has often been ignored. Increased competetion over the last couple of years from startups and blue chips alike have generated internal intest in revisiting the UI and UX of our platform, but with no clear vision and the lack of a champion, the effort never materialized. I was tasked with realizing the vision for the next generation of the platform (which we'll call Rev 2.0), generating internal support for the project, leading discussions on how to implement the redesign, and validating our decisions with both our internal stakeholders and our clients.

Project Goals

  • Identify major pain points on our platform through a combination of heuristic evaluations, affinity mapping, and user testing.
  • Develop a functional prototype for Rev 2.0 that could be used to showcase preliminary design ideas and generate internal support.
  • Land the project on the 2021 project roadmap with both firmwide support and resouce commitments.
  • Gather feedback from internal stakeholders and power users, then test and validate our decisions prior to development.
Vbrick Rev

Project Duration

  • 7 months

My Role

  • Product Design Lead

The Team

  • 2x Product Managers
  • VP Product
  • Engineering
  • Customer Experience

My Contributions

Design Leadership
Research
Prototypes
UI design
Interaction Design
Component Library

Software Used

Adobe XDMiroAdobe PhotoshopAdobe Illustrator
2
Research & Evaluation

In my initial review of the platform, one pattern repeatedly stuck out — a lack of consistency. It appeared as though certain sections of the platform were designed at different times, and by different designers, engineers, and product managers. That turned out to be the case. To understand where opportunities for improvement lied, I turned to a couple of methods to help uncover the most glaring pain points and areas of inefficiencies.

Existing Screens

Home
Existing Vbrick Rev Screen
Media
Existing Vbrick Rev Screen
VOD
Existing Vbrick Rev Screen
VOD Settings
Existing Vbrick Rev Screen
Webcast
Existing Vbrick Rev Screen
Webcast Settings
Existing Vbrick Rev Screen

Uncovering the problems

Platform Evaluation

A. What are the frustrations?

Many of the platform's frustrations were already well known, but not all were documented. I performed a heuristic evaluation against several key heuristics from Shneiderman, Norman, Nielsen, and Molich, that I felt would best uncover the nature and severity of the UI and experience violations.

Heuristic Evaluation

For this particular evaluation, I focused on six key heuristics that would address many of the high-level issues we were looking to solve for. We wanted to focus our efforts on modifications that would provide the greatest return on investment...

Heuristic Evaluation

For this particular evaluation, I focused on six key heuristics that would address many of the high-level issues we were looking to solve for. We wanted to focus our efforts on modifications that would provide the greatest return on investment, and were less concerned with the minutiae of less trafficked areas of the platform. Addressing the lack of consistency across the platform was a key priority, as was creating a more consumer-like experience—one that felt more familiar and intuitive.

Key Heuristics used in this evaluation

  • Consistency and Standards
  • Simplicity
  • Learnability
  • Flexibility
  • Simple and Natural Dialog
  • Provide Feedback / Display Status
Heuristic Evaluation

1 - Cosmetic
2 - Minor Usability Problem
3 - Major Usability Problem
4 - Likely Task Failure

Affinity Mapping

B. How do they affect users?

I also wanted to uncover additional insights about the platform from a human perspective. What are our clients saying? What would product and engineering like to do different? I called for an affinity mapping session to find out what colleagues really thought of our Rev Platform.

Affinity Mapping

A cross-functional representation of company stakeholders were chosen to participate in this session, with members of product, engineering, sales engineering, customer experience, and marketing eager to help out....

Affinity Mapping

A cross-functional representation of company stakeholders were chosen to participate in this session, with members of product, engineering, sales engineering, customer experience, and marketing eager to help out. By this time in the pandemic, all employees were remote, so we utilized Miro to complete the session. Initial organization of ideas and comments focused on individual features, but subsequent reviews revealed a more logical grouping, as seen below.

Questions & Key Considerations

  • Where are there opportunities for immediate impact?
  • What areas of Rev present our customers with a frustrating user experience?
  • What areas of Rev present you with a frustrating experience?
  • Are there inefficiencies within Rev originiating from questionable design decisions?
Affinity Map
3
The Initial Design

With a better understanding of our platform's user experience, I turned to exploring some of the design ideas I had formulated during my evaluation. In essence, our goal was to make it look better, improve the user experience — but don't blow it up. While I was given a great deal of freedom throughout this process, two guiding principles were provided: "content is king" and "keep back-end mods to a minimum"

Design Ideas

Incorporating some intelligent borrowing from Webex, YouTube, and Slack, as well as addressing several of the primary trends uncovered during my research, I sketched out some preliminary ideas to try and solve many of the high level frustrations. These intial sketches not only served to quickly get my ideas in front of product leadership, they provided me with a rough framework as I began to design the high fidelity prototypes in Adobe XD.

Initial Designs
Initial Designs

Iteration & Evolution

I developed wireframes for several of the key experiences, based on trends gleaned from both the research and evaluation sessions, to quickly solicit input from key stakeholders. I also developed a component library to ensure consistent prototypes and rapid development. The wireframes were iterated upon, and the designs evolved into what I've showcased below.

Wireframes

Home
Homepage
VOD
VOD
Webcast Settings
Create an Event

Evolution and Enrichment of the Video Card

Iteration on Video Cards

Themes

Light theme

Homepage Light Theme

Dark theme

Homepage Dark Theme
4
Prototype Development
Vbrick Rev 2.0 EVP

The Approach

Prototype interactivity was key. We needed to be able to showcase how the UI and user experience could evolve and improve when interacting with key features on our platform. In order to generate excitement, it needed to feel real. I focused on the five to six key areas of our platform uncoverd during my research and evaluation.

Check out the before and after screens of several of the primary platform views below, as well as a demo video that shows many of the key interactions.

|After

Home
ProposedVbrick Rev Screen
Media
Proposed Vbrick Rev Screen
VOD
Proposed Vbrick Rev Screen
VOD Settings
Proposed Vbrick Rev Screen
Webcast
Proposed Vbrick Rev Screen
Webcast Settings
Existing Vbrick Rev Screen

Before|

Home
Existing Vbrick Rev Screen
Media
Existing Vbrick Rev Screen
VOD
Existing Vbrick Rev Screen
VOD Settings
Existing Vbrick Rev Screen
Webcast
Existing Vbrick Rev Screen
Webcast Settings
Existing Vbrick Rev Screen
Quick demo of the interactive prototype...

A more granular look...

While the screens and demo video above do a great job at showcasing the high-level UI improvements, I dove a bit deeper. Using data and insights synthesized from both the heuristic evaluation and affinity map, I formed an actionable list of key frustrations from throughout the platfrom and a corresponding set of proposed solutions, which I've outlined below.

If you have the time, let's walk through how these frustrations impacted users and take a look at how I solved for them. I've included before and after walkthrough videos to compare and contrast the updates.

Homepage & Navigation

Some very questionable design decisions had been made not only on the homepage, but throughout the platform, as well. Between the overloaded top nav bar, full-size hero banner, and dated video cards, the initial impression of the Rev Platform isn't very welcoming. While the client does have the option to select from one of three navigation systems, as well as one of three hero configurations, none of the other options lead to a more pleasant experience.

Existing Homepage & Navigation

Primary Frustrations

  • Clients have expressed frustration with the hero options. None of them provide the right experience.
  • The navigation bar is awkward, with platform navigation interspersed with user actions, and active-state colors mixed with default-state colors.
  • Video cards feel small, and lack both visual interaction and many of our enrichment elements.
  • Horizontal tabs and fixed-width dropdowns lead to button stacking and busy navigation interfaces.

Proposed Homepage & Navigation

Key Modifications

  • Standardize the hero option or improve the layout of the other options to provide a more engaging hero design.
  • Standardize the navigation throughout the site, with search being the focus — user actions in the top right, platform actions on the left vertical menu.
  • Enhance the video cards. Provide visual interaction and surface our enrichment elements.
  • Standardize secondary and tertiary menu systems — block tabs in a fluid, vertical orientation.

Media Pages

Overeall, the media pages serve their purpose. For anyone who has used Youtube or video streaming services, though, the current Rev media pages are lacking in both features and usability. The experience could benefit from some styling improvements, and the card size and content was much larger than on the homepage. The list view, while practical, seemed like a view from an Excel spreadsheet.

Existing Media Page

Primary Frustrations

  • Card size and content not consistent with homepage. Why design them differently?
  • UI and styling for many of the right menu tab options feels dated.
  • List view experience is much like scrolling through a spreadsheet.

Proposed Media Page

Key Modifications

  • Standardize and enhance the video cards across both the homepage and media pages.
  • Update the UI and styling of the tab content, label all menu options.
  • Enhance the visual appeal of the list view experience.

VOD Experience & Settings

Much like media pages, the VOD experience was in fairly good shape. This is one of the primary features of the Rev Platform, so it has received more attention over the years. The styling still feels a bit dated, and the tab options in the right menu aren't labeled, forcing users to hover over each option to view the intended action. In addition, the Video Settings button experience was a bit convoluted, with a mixture of settings and actions. The VOD Settings page was cluttered and lacked cohesion, and it felt as though features were just added withouth much thought with regards to their position.

Existing VOD Page

Primary Frustrations

  • Right menu options not labled, certain options enabled only for users on certain ACLs.
  • UI and styling for many of the tab options, such as comments and sharing, feels dated.
  • Video Settings menu offers a mix of settings and actions, which could be reorganized prevent confusion.

Proposed VOD Page

Key Modifications

  • Video options avaialble to all users are placed in the right hand menu, while options available only to those on certain ACLs moved to the dropdown.
  • Update the UI and styling of all tab content, especially Pulse and Comments, label all menu options.
  • Rename the dropdown to Video Actions and retool the language to be more clear.

Existing VOD Settings

Primary Frustrations

  • Strange 3-column layout with vertical scrolling and seemingly random placement of settings.
  • Ambiguous terms such as basic settings and advanced settings offer no indication of what the user will find.
  • Our key AI features, user tagging and auto transcribe/translate, are buried either below the fold or in advanced settings.

Proposed VOD Settings

Key Modifications

    • Group tasks and settings in a logical manner and create additonal tabs for key settings.
    • Move to the new vertical tab menu system and rename the tabs to be more descriptive.
    • Surface our key AI features on their own tabs to provide easy and direct access without having to search.

Webcast Experience & Settings

Overall, the webcast experience is pleasant. The functionality is sound and the audience engagment features are robust... But UI elements and components are different from those found throughout the rest of the site. Furthermore, the UI is a bit dated — last receiving any UI work over five years ago.

Existing Webcast Experience

Primary Frustrations

  • UI looks completely different than the rest of the app.
  • Webcast control buttons not consistent with modern standards.
  • UI for audience engagement features feels dated, with inconsistent placement of input fields.

Proposed Webcast Experience

Key Modifications

  • Implement consistent UI elements used throughout other sections of the redesign.
  • Created webcast control buttons with action instructions to remove ambiguity.
  • Developed a more modern aesthetic in line with the rest of the app, with consistent placement of input fields.

Existing Webcast Settings

Primary Frustrations

  • Lengthy scrolling with awkward accordion interface to toggle sections.
  • Large number of settings can feel overwhelming, and there's no quick way to assess what fields are actually required.
  • Non-standard components and error handling that doesn't shift focus to what's wrong.
  • Major action buttons located at bottom of lengthy scroll.
  • Inconsistent implementation of system status — the user isn't easily aware of what tasks need to be completed.

Proposed Webcast Settings

Key Modifications

  • Switched from an accordion/scroll UI to a vertical tab UI that can be standardized and used throughout the app.
  • Redesigning the components and moving to tabs reduces the feeling of being overwhelmed.
  • Required fields are clearly marked, and each section keeps track of your progress.
  • Button placement will be standardized across the app — on the right side of the screen.
  • System status will be clearly visible, letting the user know what sections are complete and what still needs to be done.

Branding & Themes

The Rev Platform gives extraordinary flexibility to our clients should they decide to apply their brand to our platform. Users have the options to control background colors, header colors, navigation styles, hero configurations, and several layers of accent colors. This has led to an increase in development and testing times, as major feature additions or enhancements must be validated in every branding configuration. Furthermore, we've only applied this branding functionality to half of the platform.

Existing Branding Features

Primary Frustrations

  • The Rev experience can be jarring as users navigate across the platform and encounter some sections that are controlled by branding, and some sections that are not.
  • Users don't know what objects and components will be affected by the colors they select, which has led to several instances where components and navigation "disappear," especially with one client who selected white as their "accent" color.
  • The platform doesn't consider contrast violations, leading to some bizarre color combinations that can ruin the user experience.

Proposed Branding Features

Key Modifications

  • To ensure a consistent user experience for all customers, implement a "theme" approach to customization.
  • Limit branding color options, and be transparent about exactly what they will affect.
  • Enact contrast validation according to WCAG 2.1 AA standards.
  • Standardize component library across all sections, preventing branding colors from having an impact.
5
Finalizing the Demo

The demo day had arrived, and I unveiled the prototypes at our October Town Hall. Very few collegues outside of the product team, CEO, and the VP of engineering had seen the concepts. The purpose of doing the demo in such a setting was to reach our entire local, national, and international staff in a state at which they would be engaged. The demo was a success, with many of the Sales, SEs, and CX team voicing approval in the live chat and in follow-up emails to the both the executive team and product team.

Vbrick October Town Hall
6
Charting the Future

Fresh off the success of the demo, I began charting the next phase of the project. While the prototypes were conceptual in nature, they did represent a potential vision for what the Rev platform could become. The challenges now were as follows...

Product Roadmap

Product Roadmap

With the demo a success, and leadership's desire to reinvigorate the platform, the challenge was to get the Rev 2.0 on the product roadmap for 2021. There were a number of massive architectural and integration features planned, so obtaining engineering and QA resources was key to success.

300-450 points in 2021

Rev 2.0 was officially added to the product roadmap for 2021. Point allocation came in at a respectable 50-75 points per release, which should be enough to make good progress in 2021.

Engineering

Engineering

I set up a series of ongoing meetings with the engineering, product, and QA teams to discuss the optimal ways in which to divide and phase the workload. Each meeting focused on a key section of the platform, potential technical challenges, impact value, and other factors that would determine direction.

Dedicated resources

Engineering was receptive to the design recommendations, and we received dedicated engineering resources devoted to working on front-end enhancements associated with Rev 2.0.

User Feedback

User Feedback

I scheduled meetings with key internal stakeholders, such as our sales team, sales engineers, and CX team to discuss feature priorities and customer impact. We also met with seven of our power users, and several of their most engaged end-users, to gather initial feedback on the prototypes.

Excitement & Optimism

Discussions were productive, and all parties were excited for what the future held. Several common themes emerged from these talks, which helped inform which enhancements to tackle first.

© Todd Hayward Studios. 100% original & completely hand coded—except for a few scripts (credit given in source code).