UX Roadmap
Panopto
A long-term Design-led initiative to add missing functionality, modernize the UX, and align the org on a shared vision

PROBLEM:
Outdated design language, missing functionality, usability issues, design debt, and customer complaints
A vision of where we want to go, and a plan of how to get there
SOLUTION:
Why did we need a roadmap?
The product outgrew its design system, slowing the design and development process by forcing us to work around limitations of current patterns. We had numerous usability issues, and some functionality requested by customers was missing. We needed to redesign our entire site, update our design system, and resolve numerous usability issues. This was a big challenge, but also an excellent opportunity to demonstrate the true value of great design and move the org towards a design-led culture.
My role:
Created a list of proposed changes to modernize our UX
Collaborated with Engineers, Sales, CA's, and Stakeholders to refine and prioritize proposed changes
Worked as an individual contributor and supervised work of two other designers
DESIGN PROCESS:

1. Collect "Overflow" ideas over time
I started this work without realizing that this was a stand-alone initiative, by proposing more advanced, post-MVP functionality for each project, getting feedback, and saving them for later. The stakeholders liked the proposals, but they could not be implemented at the time due to lack of resources. After a year, I had a list of vetted ideas that could significantly improve our product.
2. Realize & communicate the need for a UX roadmap

As the number of backlog ideas increased over time and I grew more frustrated by our inability to deliver a greater quality product, I realized that what it was our UX patterns that were were holding us back, and that it was not enough to just continue producing UX ideas and hoping for the best - I realized that Design needs to lead this change, and the UX Roadmap is the tool that we need to make this happen.

3. Create a "10,000 Foot Overview" of each proposal
I went back through the backlog of design ideas and organized them into a single Roadmap project. I also conducted a detailed analysis of our current UX and identified a number of information architecture and usability issues, and created designs for them as well. Now I could use these designs to have meaningful conversations across the org about the future of our product.

4. Group UX Changes into buckets
As I started socializing the proposed changes across the org, I realized that having a huge list of design ideas was not enough - it was vast, overwhelming, and not conductive to decision-making. So the next step was to organize this list of improvements into buckets of functionality, and figure out which buckets would make the most impact, and therefore should be tackeld first

5. Create a framework to prioritize changes
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. I also talked to key stakeholders in our org to get understand which changes would make the biggest impact for the org.

6. Impact Analysis
I worked with key stakeholders across the org, as well as Customer Success, Sales and Engineering to understand the impact of each change - what area of revenue will be impacted, how long will it take, and which dev teams will need to be involved.
.png)
7. Schedules Work & Track Progress
Dev resources were already stretched pretty thin, but there were two devs who could dedicate some of their time to this work, so I worked around their schedules and planned a sequence of the design updates that could be implemented and released independently of each other, that were released every two sprints, making steady progress towards our long-term design vision

8. Communicated the vision internally and externally
Once the roadmap was completed and prioritized, we needed a communication strategy to share our upcoming changes with customers. To ensure that we have
10,000 FOOT OVERVIEW

I went back through the backlog of design ideas and organized them into a single Roadmap project. I also conducted a detailed analysis of our current UX and identified a number of information architecture and usability issues, and created designs for them as well. Now I could use these designs to have meaningful conversations across the org about the future of our product.
This was an essential step for driving the roadmap process. Without these wireframes, conversations about the prioritization were too abstract, making it difficult to get everyone aligned behind a shared vision

FOLDER BASICS
VIDEO LIBRARY

LANDING PAGES

CUSTOMIZATIONS


EDU INTEGRATION
SETTINGS

ADMIN TOOLS

SEARCH & AI


NAVIGATION

NEW LAYOUTS

VIDEO PLAYER
VIDEO RECORDER

GROUPING UX CHANGES INTO BUCKETS
As I started socializing the proposed changes across the org, I realized that having a huge list of design ideas was not enough - it was vast, overwhelming, and not conductive to decision-making. So the next step was to organize this list of improvements into buckets of functionality, and figure out which buckets would make the most impact, and therefore should be tackeld first
Once I created the vision, it was a bit unwieldy and overwhelming, so I did an inventory of our product and came up with "buckets of functionality" that could be prioritized

Video Recorder
Video Library
Landing Pages
Customizations
Settings
Interactive Player
Navigation
EDU Integrations
Admin Tools
PRIORITIZATION FRAMEWORK
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.
I modified our existing prioritization framework to be more suitable for talking about design, and worked with key stakeholders across the org, as well as Customer Success, Sales and Engineering to understand the impact of each change - what area of revenue will be impacted, how long will it take, and which dev teams will need to be involved.

DESIGN:
-
Is it a Pain Point, Feature Request, Delight?
-
Is it a style update, or a change in functionality?
IMPLEMENTATION:
-
How long will it take to implement?
-
Which components should be delivered together?
-
Which components should be build in sequence?
REVENUE:
-
How much revenue could this generate?
-
Which revenue stream (EDU, ENT) will be impacted?
-
Will it contribute to New Revenue or Retention?

IMPACT ANALAYSIS
I worked with Stakeholders, Customer Success, Sales and Engineering to understand the impact of each change and prioritize design work
Revenue

Now
Change Type

Next
Later

.png)
SCHEDULE WORK & TRACK PROGRESS
Dev resources were already stretched pretty thin, so to work around their schedules, I planned a sequence of the design updates that could be implemented and released in "bite-sized" pieces, independently of each other.
At the time, Panopto was using Google Sheets to track work, but it was not enough for this initiative. So I created a solution in Notion and introduced it to our org as a project-tracking tool.
.png)
Milestone 1:
VIDEO LIBRARY REDESIGN

1.1 Grid View
Move the video actions over the video cards, replace outdated sort and filter patterns with Material Design Controls and update the visual treatment of header and subfolders


1.2 List View / Empty States
Update list view, empty states, and add functionality for a custom header image
Milestone 2:
CUSTOMIZATIONS



2.1 Enhancements
Final touches to get to pixel-perfect layouts - responsive reflowing of the video cards and dark mode



2.2 Customizations
Enable admins to create custom layouts for their video libraries to best serve their orgs' unique use cases
Milestone 3:
LMS / EDU

3.1 LMS Folder Embed
Update LMS integration with the changes made on the main site and resolve EDU-specific usability issues uncovered by research
Milestone 4:
SETTINGS & ADMIN TOOLS

4.1 Settings Panel
Update settings panel with Material Design patterns and add entry points into management functionality by adding action menus to folders and videos

4.2 Admin Tools
Reorganize admin tools by moving related functionality into tabbed pages and reduce the number of patterns used across different pages
Milestone 5:
NAVIGATION

5.1 Navigation
Fix inconsistencies and usability issues in navigation. Make it easier to find relevant content by adding auto-curated swimlanes

5.2 New Layouts
Add new layouts such as calendar view and inbox view, expanding ways in which customers interact with video content
Milestone 6:
NORTH STAR

6.1 SEARCH & AI
Update the search experience, add filters to make it easier to find exactly what customers are looking for, and integrate AI into search experience




6.2 VIDEO RECORDER
Update Capture to make recording and editing experience seamless, simple, and frustration free.

6.3 INTERACTIVE VIEWER
Currently, Panopto has multiple video players. Create a single responsive player that is optimized for learning and seamlessly adjusts to whatever space is allocated for it
IMPACT
.png)
Provided a "birds' eye" view of all parts of our product
Without the roadmap, all the conversations about modernizing the UX were a bit abstract. With these designs it became much easier to discuss what we wanted to do. Even though some aspects of design would change, we were able to sign off on functionality and estimate dev effort in advance.

Created a clear long-term action plan
Having a clear, specific design proposals and dev time estimates enabled the stakeholders to prioritize and schedule work with confidence. We were able to plan several months in advance, and move work around to accommodate dev availability

Built excitement and aligned teams behind a vision
I gave a presentation to share the long-term vision with the entire org, and it generated a lot of positive feedback across teams. Devs were excited to take on modernization work and produce features that they were proud of, and sales were looking forward to the improvements as they would help them close more deals
.png)
Generated reusable UX patterns & components
Devs were excited to to replace our outdated, clunky controls with React components based on Material Design. Design team was happy to expand our visual language and switch to Material Design-based UX components, evolving our design system and leverage each other's work as new components were getting added, speeding up design cycles for new features


Shifted org towards design-led culture
The feedback on the changes helped demonstrate the true value of great design and moved the org towards a design-led culture. It also energized the sales teams, and invited non-designers to participate in design discussions, and created additional opportunities for collaboration across teams

Introduced Notion to other teams, improving productivity
Once I created and shared my Notion solution for tracking and prioritizing design projects, other stakeholders started using Notion to prioritize business initiatives. I was asked to build a solution for company-wide annual planning to define the org-wide FY24 Roadmap