UserTesting Design System


My role

I was the Product Designer on the project for UserTesting, working with essentially our entire team of designers and engineers. I led our team in exercises to audit our UI, explore ways to consolidated, and worked across teams to implement changes. 

About the project

UserTesting has been pushing ahead with delivering awesome value and function to its customers and testers. In that speed, a consistent design language wasn't developed to keep the product unified and consistent. As a result, there were tons of different UI components, pages that weren't consistently built, and a visual design language that was outdated. This project was to take a phased approach in consolidating our UI to give us the foundation for a visual reimagination. 

 

what we had

DT recorder.png

Even just a glance at our dashboard revealed so many problems in our design:

  • There were 3+ styles of dropdowns, all different from each other.
  • There were 10+ types of CTAs and links
  • There were not a well developed typography rule set, so readability was difficult.
  • Our visual design was extremely outdated because it was impossible to enact change across the product since there was no underlying toolkit or global style. 
 

Audit time

I gathered our broader team, including designers, PMs, engineers, and marketing. We systematically broke down the site structure and went through to gather all the different instances of UI components that we had. While it was definitely overwhelming, it also served as a stepping point for the team to collectively identify that a lack of a system was causing tremendous problems for us. 

 

Look to the best

Since I knew that trying to implement an entire design system on an existing product was going to be a big challenge, I looked how the best in the industry did it and how they organize their systems. I benchmarked Intuit's Harmony Design System, Google's Material Design, Salesforce's Lightning Design System, as well as many others in the process of learning. I ended up deciding to approach our product with the Atomic design methodology because it gave us structure in a product that had very little structure to start with.

 

foundation first

Before we get to the reimagined UserTesting product experience of the future, we needed to build ourselves a foundation in order to even make those proposed changes down the line. Below is just one example of how that manifests. By actually setting typography rules, consolidating our UI components, and fixing layout issues, we improved the dashboard immensely without even addressing structural changes.

Old foundation-less design

New design system foundation

 

Pushing visual design

1080x768.png

NExt steps

 

Implementing a design system is long process! It will be rolled out incrementally through out all the product workflows. Once we have established the underlying global styles to give us the infrastructure for product wide change, then we can implement a new visual design language to update the look and feel of our product.