01

Project Overview

Problem

UserTesting is a user validation platform that helps customers to test their ideas, prototypes, graphics to make informed decisions. Despite having more than 50 test templates, the text-heavy and task-centric appearance resulted in low usage. I was tasked to create a new template gallery to increase the usage and trust of the templates.

02

Solution

I came up with new template cards that highlight the result visualizations of the tests. Templates are organized and personalized by the most relevant templates where users can browse and search for a specific template. Working closely with UX writing team, I reworded some of the cards’ terms. The template preview shows a short descriptive video of the test. Users can preview the template without creating a new file on their system. They can easily share the previewing template and view similar templates within the preview. I handed off the template card design to the developers for implementation.

Template gallery before and after

03

Process Overview

04

Research

Why templates?

UserTesting has been investing in the templates because they are a great educational tool to
01. interact with the wide variety of testing capabilities
02. learn how questions, tasks and results are formulated
03. gain confidence on creating successful tests
04. inspire the discovery of new testing possibilities

It is also a great business opportunity to
01. expand the markets to the decision makers
02. increase test launchings
03. create opportunities for extra revenue through paid templates.

I have found a few key findings from past research with the help of researchers and *scoped it down with product managers to fit into the 10 week tenure of my internship.

Personas and their needs

I synthesized the existing UserTesting personas and created scenarios and quotes in order to better empathize and understand user needs.

Primary Users

"I need to quickly learn how I can create quality tests with best practices incorporated."

• Drew is a PM and a new UT customer.
• She is not familiar with UX research and the UT platform so she’s not sure what to look for when creating tests.
• Since she’s always busy, she wants to be able to quickly learn to create quality tests.
• She wants to make sure that the test tasks and questions are researcher approved.
• She wants to present the results to stakeholders to get buy-in, and hopes to make recommendations and influence decisions.

Secondary Users

"I need to discover UserTesting's capabilities and get inspiration for new ways to test."

• Riley is a researcher and a new UT customer.
• They want to explore different types of tests and get inspired to create their own.
• They are wondering what UT offers, and what their colleagues have done in UT.
  
• They want to make sure they can easily explain the findings to non-researchers.

Competitive Analysis

I created a competitive analysis on template gallery, template cards and template preview sites from different websites such as Figma, Maze, Miro and Trello. This helped me form ideas on how the template gallery is structured with key elements of template cards and preview.

05

Ideation

Brainstorming workshop: Crazy 8s

I facilitated a brainstorming workshop to generate ideas to increase user trust of the template gallery and discover ideas to incorporate results centric gallery. I had diverse participants within UserTesting including a marketer, an engineer, a researcher, a product manager and designers. I followed up with them with a survey on workshop methods, facilitation, and general feedback to improve my workshop facilitation skill.

Wireframe

My prior research into existing design systems allowed me to build a high-fidelity wireframe by using existing components.

Working with real data

I worked closely with data scientists to gather information and on the feasibility of displaying the template’s usage and creator, and to create an algorithm for the most relevant template. We found out that the raw usage metric of templates is not high enough to display on the card. By displaying the usage, it will defeat the purpose of gaining the users' trust. UserTesting currently does not provide the infrastructure for individuals to create and publicly share the template. Therefore, I removed the usage on the template card and creator. We were able to create an algorithm that can show the most relevant templates to their work based on their usage and connection to other users. I was able to hone in more on the result centric template cards, new organizations of the template gallery and dynamic interactions within the gallery. I provide these insights to the template operations team for future opportunities.

06

Design

The product manager and I agreed that the template cards pose the best shippable solution within the time frame due to a simpler implementation while meeting all the design implications. So I focused most refining the template cards and then template gallery organization.

Card visualization

In order to create scalable card visualizations for over 50 templates, the template ops team and I came up with 7 different categories: Bar scale, SUS/NPS scale, Intent path, AB testing,  IA/Navigation, Card sorting, multiple choice. After careful examination of the results views, I created a few versions of intuitive, right level of abstraction visualizations to easily understand the results view for each category.

Bar scale

Card sorting

Intent path

SUS/NPS scale

AB testing

Multiple choice

IA/Navigation

07

Evaluation

Design review within UT

I presented wireframe solutions for design reviews amongst the team. I was able to move forward with template cards visuals and adjust the carousel effect of the template to show all templates.

Card visualization test

I tested the card visualization’s readability and significant of the visuals for understanding the template. This was done through UserTesting with 6 product managers as our primary target users.

01. 80% of the users said visualizations are helpful
->Concept validation

02. Users thought the visualizations represent a single template instead of categories
-> Reconsider the template’s information architecture so that the title is on top
-> *this might be because the prototype didn’t show multiple templates with the same visuals

03. Text within the visual clarified understanding of the results
-> Questions within the visual are necessary to understand the template

04. The questions within the card are too small to read
-> Increase the font size

05. SUS scale visual is not clear. It was mistaken as a pie chart, and users were confused about what SUS/NPS mean
-> Use one color for the scale and pose a question instead of the term

06. Users confused the MC scale visual with ranking and performing different tasks
-> Utilize more colors for different options

Card information architecture test

I had another UserTesting session with 5 primary target users to understand why certain IA makes more sense for users and discover which IA makes users understand templates in terms of the title. This time I repeated multiple visuals with different template names.

Card A

Card B

Card C

Card D

Card A and D were tied between the preference, but the most preferred cards were A for aesthetic reasons and D for interactivity and capability to meet users' mental model. D also follows the same structure as the toolkit and the screen reader for accessibility.

“I like B and D, because they both help me quickly decide if this template is right for me, based on the title of the template and the overall question. However, I feel D is a bit easier to interpret as I can clearly tell that the question ties to the visualization”

Final card design

AB testing

Multiple choice

IA/Navigation

Bar scale

Card sorting

Intent path

SUS/NPS scale

Template preview before and after

Final template gallery design

08

Handing Off

I cleaned up the design file for the hand-off and met up with engineers to discuss the details of the design for the implementation. I also met with the product team to leave them with a list of next steps on iterations such as
‍
01. defining the loading status of the template cards
02. card sorting the different versions of visualizations with key takeaway questions.
03. Test on key metrics through Quantitative data: number of clicking into previews, number of launching tests from the templates, satisfaction survey of gallery users
04. Test on key metrics through Qualitative data: Compare confidence level before and after exploring the template gallery, customer interviews

I also was able to provide the template preview pages for future design ideas. The new preview contains a short how-to use the template video on a separate page where they can view the creator, usage, updates. It provides preview the template, suggests similar templates, shows the breadcrumb of the categories, and shares the template.

09

Reflection

Lesson learned

01. Communicate early and often.
It takes continuous communication and alignment with different departments (UX writers, data scientists, and template operations) in order to create shippable product.
‍
02. Use constraints as a guidance and offer visionary work.
Constraints aren't always bad, and it helped me scope down the MVP and set up realistic goal. It can also serve as the goal for the next phase.
‍
03. Visuals are always helpful but only with the help of text descriptions.

Personal reflection

It was such an exceptional experience to hand-off my design and discuss it with developers for future implementation. Scoping the project, time management, building context and feasibility constraints were big challenges, but also great learning opportunities. Through out the internship, I learned how to communicate my design decisions based on business implications, and I was able to gain visibility on my project by talking with various stakeholders to advocate for my project.

I also got to facilitate a painting party and connect with 38 UT folks!