Product Designer
Screencast-mock.jpg

Autodesk Screencast -- Designing accessible videos to improve audience reach and optimize for SEO

 

Autodesk Screencast

Designing accessible videos to improve audience reach and optimizing for SEO

 

Overview

Autodesk Screencast is a screen recording tool that captures complex workflows in Autodesk products and other applications. Along with 2 co-designers, I was responsible for updating and improving the accessibility of Screencast for customers who are deaf or hard-of-hearing. The redesign includes a flow for publishing videos with machine-generated transcripts - with the goal of improving audience reach via accessibility and optimizing video content for SEO. The result is a modern, accessible Screencast with content that is indexable and valuable for a broad audience.

Following an agile process, I lead user research, worked with developers to create an MVP planning document, prototyped solutions in Framer, led 2 user testing cycles, and presented the solution to the VP of our corporate department.

Some details are excluded due to an NDA.

 

Problem & Opportunity

Customer feedback revealed that Screencasts lack accessibility for users who are deaf or hard-of-hearing. Our goal was to find an elegant solution for making Screencasts accessible to our target user, while achieving the business goals of reaching a diverse audience and improving video SEO.

Design Challenge

How might we redesign Screencasts to be accessible for customers who are deaf or hard-of-hearing?

Solution

We designed an interaction flow that enables users to publish Screencasts to the Autodesk Knowledge Network along with a machine-generated transcript and closed captioning. We modernized the video interface and simplified the command timeline to include only the most relevant information as determined by Screencast users. Our solution demonstrated impact across accessibility, education, SEO, searchability within Autodesk Knowledge Network, and content moderation.

My Role

UX Designer

Tools: Sketch, Framer, InDesign

Timeline: Jun 2017 - Aug 2017 (3 months)

Team: Nicole McGovern, Raden Tonev

Deliverables: Design specification document, interactive Framer prototype, research findings, minimum viable product (MVP) planning document

 

Impact

"Lillian conducted a series of customer interviews to validate and determine the best closed caption experience for Autodesk Screencast video player. During the design phase she advocated for these customers throughout the project. She did not accept a sub-par solution - radical empathy at it's best. Her dedication to them is truly inspiring. At the end of the summer she shared the daily struggles of these customers. Her design solutions were innovative, on-budget, and most importantly customer approved."

-- Mark Potterf (UX Manager, Autodesk Knowledge Platform)

 

Product Demo

 
 

Product Details

 
CC---GIF.gif

Closed Captioning

Closed captioning provides an alternative way to consume video content. With the amount of information present in typical Screencast videos, users who are deaf or hard-of-hearing rely on accommodations such as playback speed.

 
Transcript---GIF.gif

Transcript

Customers find that titles and descriptions often fail to provide enough context for videos. Using the same machine-generated text that powers the CC interface, a transcript allows users to evaluate a video’s relevance prior to watching it.

 
Timeline---GIF.gif

Command Timeline

Screencast captures a wealth of data from Autodesk applications. Yet, customers find most of the data indecipherable and irrelevant to their workflow. They prefer a simple interface that presents the most relevant information - active program commands.

 
Editor---GIF.gif

Content Editor

Accurate content is key to indexing Screencast videos. With the abundance of technical language and diversity of human speech, machine-generated transcripts occassionally require a layer of human editing to ensure accuracy.

 

Interaction Flow

Group.png
 

The Approach

 
 

Product Research

At the outset of the project, my team and I conducted a heuristic analysis, converging upon high-priority issues such as an outdated interface and a highly-confusing content timeline. I interviewed 5 product stakeholders, analyzed the product’s Google analytics, and conducted a competitive / pricing analysis on 3rd party transcription services.

From the competitive analysis, I was able to confidently recommend an accurate and cost-effective service for transcribing Screencasts.

 Screencast (Before)

Screencast (Before)

 

User Research

I facilitated 2 critical interviews with an educator and an expert on deaf and hard-of-hearing culture. With the primary use case for Screencast being education, it was important to understand these user perspectives.

I learned that individuals who are deaf share many of the same needs as bilingual users (e.g., reading ability when English is not their native language). Contextual impairments (think loud cafe) can broaden the impact of an accessible design.  Finally, accommodations for the deaf or hard-of-hearing are required by law within US educational settings, including the tools that are used within these settings. 

 Artifacts from a user interview

Artifacts from a user interview

 
 
 

Minimum Viable Product (MVP) Planning

After organizing our insights, my team and I created a prioritized list of features for our minimum viable product (MVP). We reviewed the plan with our manager and met with developers to discuss the implementation effort required for each feature. 

 Research insights organized into affinity clusters

Research insights organized into affinity clusters

 The individual components of our minimum lovable product

The individual components of our minimum lovable product

 
 
 

Design

My 2 co-designers and I divided up the work, and I took ownership of the transcript editor and was responsible for designing both its interaction flow and UI.

Welcoming feedback from my team, the major design decisions for me were: 1) the editor’s positioning with the knowledge contributions dashboard, and 2) the editor’s page layout.

 
 Sketches of the transcript editor flow and UI

Sketches of the transcript editor flow and UI

 
 

Prototyping

My teammates and I chose to prototype in Framer due to its support for video. It was my first time working in Framer, and the pressure was on to deliver a working prototype within the week.

Coding the video player and editor myself was an extremely valuable experience. Not only did it allow me to translate my vision directly into a working prototyping, more importantly it revealed to me the implementation challenges of my design by having to build out the actual features and interactions.

 Transcript Editor Prototype

Transcript Editor Prototype

 
 
 

User Testing

I took the initiative to organize 2 rounds of user testing for my team while we were still in the prototyping phase. By reaching out to Autodesk's global network, I recruited 2 customers who were deaf or hard-of-hearing. This ensured that our solution would be tested for accessibility. In total, I scheduled 8 testing sessions (5 remote, 3 in-person).

After creating a task list for my prototype, I worked with my team to create a full testing script. I facilitated 3 sessions and iterated upon my design after each round of testing.

 
 Left: Facilitating a user testing session. Right: Categorizing insights from the 1st round of testing

Left: Facilitating a user testing session. Right: Categorizing insights from the 1st round of testing

 
 

Project Outcomes

At the conclusion of the project, we presented our solution to the VP of our corporate department and product team. We demonstrated how we reframed the problem, expanding beyond accessibility to meet a number of business goals.

Outcomes.png

The next step is for product managers to work with developers, designers, and the content team to implement the solution.

 

Lessons Learned

  1. Involve the development team early on. Getting developer feedback at each stage of the project helped us manage our expectations and assess our ideas from a technical perspective throughout
     
  2. Prototyping as a series of trade-offs. The decision to use Framer enabled us to incorporate video into our prototype. However, in retrospect, it was highly time-consuming and may have been higher fidelity than needed to test our core assumptions
     
  3. Reframing around business goals when communicating with managers and leadership. During our team's presentation to corporate stakeholders, the audience was most receptive when we framed our problem around addressing business goals