top of page

UX Roadmap

Panopto

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

This is Part 1  of a larger design initiative:

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.

towfiqu-barbhuiya-bwOAixLG0uc-unsplash (1).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

towfiqu-barbhuiya-bwOAixLG0uc-unsplash (1).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.

notion (4).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

ioann-mark-kuznietsov-qij8hrsnINA-unsplash 1 (1).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.

silviu-s-DUmAVQhFWZ0-unsplash 2.png

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

g1.png

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

Group 2901 (1).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 

© 2024 Alla Taborisskaya

bottom of page