Panopto Next.
Crafting Panopto's core identity through a library of components made up of colors, icons, menus, tabs, and many more.
Panopto Next.
UPDATING THE DESIGN SYSTEM.
Every successful company has a strong UX design team with creative minds, innovative thinking, and perhaps most importantly, a cohesive design system. Currently, Panopto's overall design is uninspired and needs a revamp, and it's difficult to accomplish this systematically without a modern design system to reference.
​
Being one of Panopto's only two UX designers on staff, I wanted to make it a priority to contribute to setting the design standards for our product.
TIMELINE
PROCESS SUMMARY
The design system is an ongoing project where we document new patterns as we use them in new designs. I began working on design system patterns in the second half of 2022.
​
Mentorship and Guidance
Director of UX Design — Alla Taborisskaya
As a design team, we determined a main overview of design goals and the format of the design system, including a description section, different states of the design element, and a prototyped asset for future Figma use. From there, I started creating design patterns and documenting existing basic elements like typography, colors, and elements for internal use like redline markers and dev handoff note pointers.
BASIC ELEMENTS
Introduction
As a design team, we determined the format of the design system together, and our mission and main principles. Panopto's defining objective is "Video Learning Made Easy", so our main goal as designers is to make our interface and user experience as easy to navigate as possible.
HEADER
Our original goal was to eventually make the entire design system a prototype for easy viewing for non-designers. The header of each design system element serves as an attention grabbing banner, with different colors for easy identification.
NAVIGATION
When design system patterns are completed and documented, they are linked on the left tab for easy navigation.
STATES & DESCRIPTION
The states of a design pattern, redlines, and their descriptions reside below the top banner.
BRANDING PATTERNS
The next step was to clarify our branding values, which involved a lot of research into our founding mision. This information is crucial for determining tone in any text we include in our designs moving forward.
COLORS & FONT
The previous designer created a basic color palette and font library for us to work off of, so I documented the existing colors in the design system. In the future, we will make changes to this palette and change our default font, because there are certain contrast issues with our colors against non-white backgrounds.
Building blocks
Next, I put together a product map with screenshots of every interface from our product and grouped elements together to document the building blocks of our product, including buttons, menus, and tabs.
ASSET CREATION
It was important to the design team to create Figma assets for each of the building blocks. I was able to prototype the buttons with different properties, so one prototype could work for any button state.
Menus
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control. Menus allow users to make a selection from multiple options. I documented most of the new patterns that my fellow designer Chris Hughes and I created, including the Create menu, date filters, the Browse menu, etc.
I designed and documented the pop-up menu myself after completing my Captions Discoverability project.
HELPER ELEMENTS
Internal tools
In our design process, there are certain helper elements that make our documentation process easier, including research and redlines templates, and smaller design elements like redlines markers and developer handoff note pointers. I designed and prototyped these elements to create an easier handoff process.
Visual Accessibility
Another internal tool I created was a template to check visual accessibility going forward, to prove that the colors we use have adequate contrast between the background and text. As the head of accessibility for the product team, I am passionate about keeping the design and development process accessible.
SUMMARY
Final thoughts
Creating a clear, cohesive design system requires ongoing thought and constant updates. I was fortunate to be able to contribute a fair amount to our design system, creating a digestible format for the whole company to view, documenting our product map and standardizing our building blocks, and designing new patterns for menus and internal dev handoff tools.
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.