Designing accessible videos to improve audience reach and optimizing for SEO
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.
How might we redesign Screencasts to be accessible for customers who are deaf or hard-of-hearing?
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.
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
"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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The next step is for product managers to work with developers, designers, and the content team to implement the solution.
- 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
- 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
- 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