Captions Discoverability
Design updates to Panopto's video player feature to include a more discoverable captions selection menu and a more intuitive settings changing experience.
Captions Discoverability
UX DESIGN PROJECT
The Panopto Viewer is a big part of our overall product. Customers use our product to store and share videos for many to view, whether that be students, employees, or others, so the viewing experience must be discoverable and intuitive.
Currently, our selection menu experience in our video player needs to be updated to provide a better experience for the users in both our embedded viewer and the interactive viewer.
TIMELINE & TEAM
PROCESS SUMMARY
This work project began in the Spring of 2023 and I was the main designer on this feature. I worked with Sean Haneberg, the lead developer on the Viewing Experience team, to design and hand off some initial changes to Viewer settings, but more design changes will be needed in the future.
​
Team:
Main Designer — Amy Zhang
Mentorship & Guidance — Alla Taborisskaya
Lead Developer — Sean Haneberg
​
I worked with Sean Haneberg to identify needs from the customer and issues with the current Viewer settings design, set goals and priorities, pinpointed a design direction, designed and prototyped in Figma, and produced redlines for dev handoff. After implementing the feature, we plan on performing a round of of retesting with customers to make sure the design meets customer goals.
SCOPING THE PROJECT
What's the problem?
The original problem we were trying to tackle was that Panopto's Captions language settings are currently not discoverable and are confusing in Embed Viewer and Interactive Viewer.
INTERACTIVE VIEWER ISSUES
EMBED VIEWER ISSUES
Other issues
After identifying the design issues pertaining to our original problem, we realized that in order to standardize the UI between the two viewers to save dev time and give our users the best experience, we would need to make that a priority on our list. As a future goal, we also wanted to make sure the settings menu could further integrate other settings to make a clean, navigable toolbar.
PRIORITIZATION
Prioritization our needs
Next, I made a list of pain points that correlated with specific design changes and prioritized them based on our goals. This list informed the design explorations.
Compare / Contrast
Because one of our goals was to unify the designs for both Interactive and Embed Viewers, I wanted to better understand the similarities and differences in our requirements for them.
RESEARCH
References
Before starting my design explorations, I studied the toolbars and menu elements for well-known streaming services.
CROSS-COMPETITORS' STUDY
After examining some other video streaming platforms in depth, I developed a list of criteria to see what the most common features are for modern video players.
​
The results of my study concluded that Panopto is missing a lot of key settings and captions menu components.
LOW-FI PROTOTYPING
A plethora of iterations
Through my research, we learned that there was not just one right solution for this settings revamp process. Because of this fact, I decided to explore a variety of options and push the boundaries on what we could implement.
FIVE INITIAL DESIGNS
I created a working prototype and a flow diagram for each option, documenting exactly how the user experience would work in each step of the menu.
MED-FI PROTOTYPING
Internal team review
The next step was to review with the UX design team and get initial feedback regarding visuals and narrow down the options to show the broader team. After meeting with the design team, I produced some medium-fidelity prototypes in preparation for the technical design review.
OPT 1: EXPANDING RIGHT
We narrowed down to two design options with different methods of navigating between menu items.
Option 1 has a style settings menu that expands to the right via a settings button in the top right corner of the menu. This allows the primary focus to be on the language selection.
OPT 2: ACCORDION
The accordion menu provides the ability to shift focus from the language selection to style settings by the user's choice. This allows the menu to be completely collapsable to save space.
DEV HANDOFF P1
Technical design review
Because we did not have the opportunity to test designs on customers, we had to rely on the feedback from other designers, developers, and QAs. At the technical design review, we decided on a final direction (Option 1) and I started preparing the redlines and the dev handoff notes for the Priority 1 items.
Redlines format
Because Panopto did not have a redlines format that we applied to every project, I had the opportunity to design an organized way to present redlines to the developers.
EMBEDDED VIEWER
The purpose of the Embedded Viewer is for the user to embed the video player within an existing site, such as an LMS (learning management system). All the contents like settings for the Embedded Viewer lies within the dimensions of the video.
INTERACTIVE VIEWER
The interactive viewer provides users with a more comprehensive viewing experience, complete with a left menu that includes a transcript, discussion board, etc. It allows users to adjust caption style settings, which is not available in Embedded Viewer.
P2+P3 PLANNING
All-in-one settings
Now that the P1 items were addressed, completed, and handed off to devs, I began planning and designing for our P2 and P3 pain points regarding unifying all the settings into one comprehensive menu and the accessibility of our captions.
FINAL HI-FI DESIGNS
Final designs
For the final design, we took a lot of inspiration from the tried and true features of existing video player settings menus, including adding icons in the main settings menu and showing the status of each menu item before the user clicks into it.
Visual accessibility
As the accessibility liason at Panopto, I believe it's super important for the design team to always perform contrast checks before sending final designs out to implement. Because our P2 designs utilize more variety of opacities within the design, I had to take a couple passes to find the colors that not only worked in the context of our design, but also were visually accessible.
Dev handoff comments
To make the final dev handoff run as smoothly as possible, I made a series of helpful notes that accompanied the design frames and included which priority level the comment pertained to. Furthermore, I included a guide on tooltips as part of the redlines.
EMBEDDED VIEWER
The purpose of the Embedded Viewer is for the user to embed the video player within an existing site, such as an LMS (learning management system). All the contents like settings for the Embedded Viewer lies within the dimensions of the video.
INTERACTIVE VIEWER
The interactive viewer provides users with a more comprehensive viewing experience, complete with a left menu that includes a transcript, discussion board, etc. It allows users to adjust caption style settings, which is not available in Embedded Viewer.
REFLECTIONS
Key takeaways
The Panopto Viewer settings/captions improvement endeavor was one of the first design projects that I've taken on as an individual contributor where I was the main designer from start to finish.
​
I managed my own deadlines, communicated with customer success personnel, developers, and leadership to get feedback, determine a direction, and deliver a completed set of design drawings in a timely manner. I learned a lot in this process and developed a lot of my own ideas on the design process within the company.
Congrats! You made it to the end of this page.
Hope you enjoyed coming along for the ride, and I truly appreciate you taking the time to check out my work! You can reach me at amyzh425@gmail.com — I'd love to chat with you.