Lead designer: sketched, wire-framed, and high- fidelity prototyped the UX/UI
Researcher: user evaluations
Time: 10 weeks
Team: UserTesting Pre-Test Team with UX researchers, UX Writers, marketers, product managers, developers, data scientists
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.
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.
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
I synthesized the existing UserTesting personas and created scenarios and quotes in order to better empathize and understand user needs.
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.
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.
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.
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.
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.
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.
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
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
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 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”
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
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.
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.
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!