UserTesting Template Gallery

iterative design

Redesigning the template gallery with data visualization template cards, preview pages, and gallery to help novice users pick templates quicker and easier

Roles & Responsibilities

Lead designer: sketched, wire-framed, and high- fidelity prototyped the UX/UI
Researcher: user evaluations

Project context

Time: 10 weeks
Team: UserTesting Pre-Test Team with UX researchers, UX Writers, marketers, product managers, developers, data scientists

Tools used



Project Overview


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.


Design a engaging, interactive, visual and result-centric template gallery to
01. help novices and non-experts users to explore the template gallery for educational, guidance, and confidence resources.
02. help research experts discover testing capabilities through the template gallery.



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


Process Overview


scoping with stakeholders
synthesizing existing research
competitive analysis


brainstorming workshop


design review
concept validation
balance comparison test
visual test
information architecture test



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.

Key findings and design implication

01. Decision makers want the most help with getting trustworthy test results to make decisions
-> Prioritize test results/metrics when designing the IA of the template gallery

02. Customers believe that templates actually add work
-> Prioritize template preview

03. Trust: Some prefer in-org/org-endorsed templates
-> Prioritize template preview

04. Some customers remain concerned about content
-> Showcase who and why the templates are build

05. *Templates aren’t fitting easily into many customers’ creation workflows
-> Templates should be integrated within the test creation flow

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.



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.

Top 3 design ideas and design opportunities

01. Increase the visibility of template creator, usage, context, and example use cases.
-> template preview - interactive preview of results, use cases and tasks for each template
-> template cards - result driven visual and usage on the template card

02. Personalized template selections with popular templates and similar templates.
->template gallery - reorganization of the template gallery view by most relevant templates

03. Results view template gallery that shows the essence of the test-> template cards - result driven visual and usage on the template card


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.



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




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


Bar scale

Card sorting

Intent path

SUS/NPS scale

Gallery evaluation

With help from UX researchers I was able to validate the new design of template cards visualizations and new organizations of the template gallery. Through a balance comparison test between the existing design and the new design, 6 primary and secondary target users were able to test card visualization, template gallery navigation, organization and location desired templates.

01. Hovering over detailed text on cards is necessary in addition to the main visuals.
02. 5/6 users found suggested templates helpful - no need to search, personalized touch is always appreciated
03. 6/6 users reported that the new gallery was easier to find templates 
04. 6/6 users expressed the preference on the new gallery

Template preview before and after

Final template gallery design


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.



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!

© 2022 by sue reon kim