Video Library Redesign
Panopto
A design initiative to modernize the UX to address customer objection of a "dated" look and feel
CHALLENGE:
Address the "Dated UX" sales objection by modernizing our site look and feel
Make small, "bite-sized" layout improvements, evolving our design patterns and demonstrating commitment to quality to our customers
SOLUTION:
This is Part 2 of a larger design initiative:
Why did we need a redesign?
Panopto Sales team was frequently encountering the "Dated Look" objection and was trained not to show the product until later in the sales conversation, after verbally explaining the benefits of our product.
Site design of the site has not been updated in years, had multiple usability issues. The goal of the redesign was to improve Conversion & Retention by eliminating customer objections and complaints about "dated" look and feel of the site.
My role:
Created a list of proposed changes to modernize our UX
Collaborated with Engineers, Sales, Customer Success, Support, and Stakeholders to prioritize changes
Worked as an individual contributor and to finalize UX and collaborated with a visual designer to refine and finlize new visual language
DESIGN PROCESS
1. Customer Outcomes
Due to limited recourses and tight deadlines, there was no time to conduct a full research study with our ENT customers. To save time, I talked with all of our CSA's (they are aware of the most pressing issues), a few select customers, researched feature requests, and generated a set of principles to set goals and evaluate success of redesign
2. Pain Point Analysis
I also conducted a detailed analysis of our current UX and identified a number of information architecture and usability issues. I used this analysis during the design reviews to clearly explain each proposed change, communicate the reason and value of the updates, and help drive towards a sign-off on new components
3. Competitive Analysis
In order to understand what our customers expect from a modern video platform, I conducted a detailed competitive analysis of similar solutions and identified design principles that make them stand out that are relevant to our use case. I used these principles to set clear design goals and drive towards sign-off
4. "Bite-sized" independent improvements
To work around dev availability, I split the design into small separate pieces that can be implemented and delivered to the customers independently. Over time, these small changes will add up to a beautiful, consistent, modern interface - one sprint at a time. This approach also allowed us to reflect on the previous change before making the next update
5. Iterate & sign off on UX & Visual Design
I set up a weekly cadence of design reviews where the team looked at the latest version of designs. I created high-fidelity UX proposals and prototypes, reviewed them with the team until we reached alignment. For I worked with a visual designer who took the proposals to the next level by creating pixel-perfect layouts and providing redlines for devs
.png)
6. Evolve the Design System
As new patterns were getting designed and implemented, we had to keep track of them in our design system. I worked with a visual designer who generated the pixel-perfect layouts of all new UX patterns. Once the patterns were approved, they were added to the Design System
%201.png)
7. Pixel-perfect implementation
Once UX designs were approved, and red lines were handed off, I continued working with the developer to ensure that the implementation is pixel-perfect and everything looked as expected
.png)
8. Communicate upcoming changes to customers
More importantly, we did not have clarity on how. Small, implementable changes lead to big impact over time More importantly, we did not have clarity on how. Small, implementable changes lead to big impact over time More importantly, we did not have clarity on how. Small, implementable changes lead to big impact over time
CUSTOMER OUTCOMES
Due to limited recourses and tight deadlines, there was no time to conduct a full research study with our ENT customers. To save time, I talked with all of our CSA's (they are aware of the most pressing issues), a few select customers, researched feature requests, and generated set of principles to set goals and evaluate success of redesign
-
A beautiful, modern interface that I feel good using
-
A clear, consistent way to navigate my folder system, know where I am currently located, and easily get where I want to go
-
A clear, consistent way to filter, organize and change layout of videos in a folder I am currently in
-
A consistent way to organize content
-
To use standard UX so that I do not have to learn a new set of tools
As a Customer, I want...
As an Admin, I want...
As a Sales Engineer, I want...
-
To create an amazing impression on prospects with a demo of our product
-
To be proud of the product I am selling
PAIN POINT ANALYSIS
I conducted a detailed analysis of our current UX and identified a number of information architecture and usability issues. I used this analysis during the design reviews to clearly explain each proposed change, communicate the reason and value of the updates, and help drive towards a sign-off on new components
.png)
COMPETiTIVE ANALYSIS
I reviewed a large number of video platforms, as well as platform in other areas, to determine what characteristics make them beautiful and modern, and came up with a list of principles relevant to Panopto
-
Clear Visual Structure
What makes a video library look and feel modern?
-
Organized, consistent use of spacing and fonts
-
Attention to details
BITE-SIZE IMPROVEMENTS
To work around dev availability, I split the design into small separate pieces that can be implemented and delivered to the customers independently. Over time, these small changes will add up to a beautiful, consistent, modern interface - one sprint at a time. This approach also allowed us to reflect on the previous change before making the next update
.png)
Over time, these small changes will add up to a beautiful, consistent, modern interface - one sprint at a time.
1. Video Card Actions
2. Default Header
3. Custom Header
4. Bulk Actions
5. Date & Filter Controls
6. Create new folder
7. List view
8. Data view
9. Empty state
10. Page Loading...
11. Pagination
1. Video Card Actions
Previously, all actions were shown under the video cards, wasting a lot of space. I moved the actions to show up on top of the card and added an overflow menu
2. Default Header
I added color to the header bar to create a focal point for the page, to add a splash of color, and to enhance branding. I also updated subfolders and page controls for a more modern look
.png)
3. Custom Header Image
This is an optional feature that enables orgs to do more to infuse their voice into the video collections they create by uploading a custom image to each page to set the tone or emphasize the theme of the page
.png)
4. Bulk Actions
Before the redesign, the bulk actions functionality had multiple issues, including random placement of controls, no
.png)
5. Date & Filter Controls
Replaced outdated pattern with modified Material Design controls, customized to offer customers the flexibility they need. This was also paved the way for updating all other outdated drop-down controls throughout the app
6. Folder Creation
Folder creation was inconsistent across product, with multiple layouts and options offered from different entry point. The redesigned pop-up streamlined this process while allowing for customization when needed
.png)
7. List View
Before this formative research effort, we did not have a clear understanding of how EDU orgs use our product. More importantly, we did not have clarity on how
.png)
8. Table View
In addition to the video library page, this control is used throughout the app in admin tools, and updating this control had an impact across product
.png)
9. Empty States
Identified and updated all empty states throughout the product, and added a shortcut to drag and drop upload where applicable
.png)
10. Page Loading Spinner
Upgraded loading animation for a more modern, subtle look
11. Pagination
Adapted Material Design patterns for pagination, eliminating usability issues of the older custom implementation
UPDATING THE DESIGN SYSTEM
.png)
DESIGN REVIEWS
I set up a weekly cadence of design reviews where the team looked at the latest version of designs. I created high-fidelity UX proposals and prototypes, reviewed them with the team until we reached alignment
I worked with a visual designer who took the proposals to the next level by creating pixel-perfect layouts and providing redlines for devs
.png)
IMPACT
.png)
-
Expanded & Streamlined Design Language
-
Consistent patterns made it easier to design and hand off patterns to dev
-
Initiated witching to React components and updating old code base
-
Raised the design quality bar and general expectations of quality org-wide
Internal:
-
Positive feedback from customers
-
Improved customers' confidence in our commitment to quality
External:
This project is still ongoing. Full impact analysis is not available.
Before:
After:
