Capture Resizing
Designing new user interface elements, interactions, and dynamic resizing in Panopto's Capture video recording tool.
Capture Resizing.
UX DESIGN PROJECT
The UX design team at Panopto was interested in exploring a possible update to the Panopto Capture tool, which is Panopto's video recording feature built into the web browser. I was tasked to explore new user interface elements, locations, and interactions, with a specific focus on dynamic resizing.
This project involved a deep dive into the current pain points that internal users had with the Capture tool and a study into prototyping the interactions and motion that a simple, reimagined interface could make.
TIMELINE
This work project began in the Spring of 2022 and became one of the main projects that I worked on individually for a span of a few months, using Figma as a prototyping and animation tool.
​
Mentorship and Guidance:
Director of UX Design — Alla Taborisskaya
PROCESS SUMMARY
This was a simple research and iterative study that I conducted solo as part of a push to reimagine one of our main products offered in our SaaS model. The process began with my own research into our current Capture product, identifying and familiarizing myself with the current functionalities and movements. After preliminary research, I explored variant prototyping in an iterative manner with frequent feedback cycles from my UX team, and presented our findings to the executive board.
SCOPING THE PROJECT
What's the problem?
Panopto's Capture tool needs to be modernized. Currently, we have two very different versions of the video recording application that need to be synthesized into one consistent format with intuitive interactions and motion.
CURRENT STATE
Documenting the product
My project focus was the Panopto Web Capture tool and how it dynamically resized as the window size changed. My preliminary investigation involved capturing the current progression of Capture's resizing UI and noting down things that could be improved.
Identifying the issues
The current version of Capture does not have the best user experience. I took some time to identify and diagram the possible issues that I saw when resizing the window and some possible changes.
INITIAL EXPLORATIONS
The basic layout
To create a basic UI framework to test resizing options, I looked into the existing video recording software solutions and created a preliminary layout to start testing.
Iterating ideas
To animate the resizing motions, I used Figma variants with Smart Animate and tested different options in the horizontal direction and the vertical direction. I began my explorations by considering only one video feed.
HORIZONTAL MOVEMENT
In the horizontal direction, I iterated options based on navigation bar button distance, icon scaling, the orientation and location of the icon labels, and other nuances.
​
I developed six different options to present to my team before we decided on our favorite horizontal motion.
Team Favorite
VERTICAL MOVEMENT
In the vertical direction, I iterated options based on similar factors as the horizontal movement, but also played with the height of the navigation bar and size of the button icons.
​
I developed five different options to present to my team before we decided on our favorite vertical movement.
Team Favorite
Settings investigation
As a side exploration, I was also interested in updating the existing Panopto Capture settings tab while keeping in mind ways it could resize with window scaling.
Updated designs
I designed four new settings options that visually worked with my new basic layout for Capture.
Team Favorite
OPTION A
Option A allows us to keep the settings menu similar to the existing one, but making the method of closing the menu more intuitive. Instead of an "X" in the bottom center of the window, a downwards carrot at the top of the window imples that the menu will close downwards.
OPTION B
Option B shrinks the menu size to only take up half the window. As the window scales horizontally, the background and smart camera options appear on the right side of the window to maximize space instead of creating more length to scroll through. It also allows for a partial view of the screens behind the settings.
OPTION C
Option C attaches the menu to the bottom right hand corner, visually tying the menu to the settings button. No matter how big the window is scaled, the menu stays the same dimensions.
OPTION D
Option D attaches the menu to the right side of the window, allowing for a partial view of the videos / screens behind the options. The width of the menu is scaled most efficiently to fit all the options horizontally.
Proposed Settings
PUTTING IT TOGETHER
Total movement
To put the horizontal and vertical movement options that the team liked together, I created an animated "Total Movement" prototype to showcase what the Capture window would look like at varying dimensions.
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.