UserTesting Chrome Extension


My role

I was the lead Product Designer on the project for UserTesting, working with a a team of engineers and a product manager. I conducted user study sessions, mocked up early concepts, tested and refined prototypes, and worked with development on production assets and final touches.

About the project

UserTesting has a large panel of testers who are just regular people that give feedback to companies on websites and apps. In order to do this, testers record their screen and voice, which is turned into a video for the customer to watch. The existing desktop recorder is a large downloaded program with a very outdated design. This project was to build a new modern and lightweight recorder to allow more testers easily participate in feedback sessions.

 

The old recorder

DT recorder.png

The existing recorder had many problems:

  • It was a huge program that the user would need to download and run an install wizard for.
  • There are some inherent trust issues that came up in user interviews with downloading and installing an unfamiliar program. Especially one that says it records your screen.
  • The design was very outdated, losing credibility with testers who were checking us out.
  • It was not intuitive and most new testers had a hard time learning about how to use it effectively.
 

sketch it out

As always, I began this project with just sketching out ideas and mapping out possible ways to approach this new recorder. Below is just a few snapshots of my explorations around interaction models of the new recorder. 

 

a techincal challenge

Since we were diving into new technology for our team (Chrome Extensions) there was a lot of collaboration between myself and our engineering team in learning about how these extensions worked. This was a unique experience for me because I got to really challenge myself to think of creative ways given certain technology constraints. 

Iteration 1

As we began to explore interaction models, the easiest implementation would be popping open a new window to hold all the test instructions and tasks. However, as soon as we tested this concept out with users, we noticed that the dual window experience was causing trouble for users because they would often lose one window behind another. 

This was still a valuable first step because it allowed us to quickly start testing with users to find problems, and thus improve the experience.

Iteration 2

As we continued to work through the design, we tried a variety of ways to see if the separate window treatment could still work. We embedded a small widget into the browser window in which the tester was giving feedback on. This allowed a quick and easy way to bring the task window to the front of all windows. 

Even with this method, we found that testers were still getting lost with the test. This was because the typical behavior was to have the instructions always in front of the tester so they could refer to it as they were going along.

Iteration 3

I continued to work with the engineering team and pushed for a fully embedded experience, because through testing and feedback we knew that a separated experience wouldn't be enough to create a flawless experience with our testers. 

By embedding the entire testing widget into the browser window itself, the tester will always have the test instructions easily accessible and visible. Also, by fully embedding it, it allows us to do more fluid animation and transitions that bring the recording experience alive and delightful for the tester.  

 

bringing it to life

 

I used Axure to bring animation and transitions to the experience and really give it life. Check it out here!

 
 

Final designs