Design teardown: designing for personas with UserTesting

The shiny new UserTesting homepage!

Eventually, every startup has to answer the million-dollar question: how are we going to make money from this? For many, that means appealing to enterprise companies—without turning off both existing users and other potential audiences. And that often means a redesign.

But how do you redesign with several important personas in mind, especially when one of those is the traditional enterprise buyer, with a board of executive stakeholders to persuade?

The old UserTesting homepage

Step 1: Identify challenges

Before you can solve a problem, you have to have a deep understanding of its nature. We identified 2 major challenges for this redesign:

1. Appeal to enterprises with different research needs and capacities

Some of our clients have dedicated internal teams with plenty of bandwidth for research, while others rely on our full range of user-research services. We needed to convey that our product can scale to meet any client’s needs. We also wanted to demonstrate how our platform can meet all the diverse needs of enterprise marketing, design, and research teams: market research, conversion rate optimization, concept validation, usability testing, and more.

2. Retain high conversion rate

Even before our redesign, we were quite successful at acquiring loyal, happy customers. We had to make sure we could maintain our current success while maturing our aesthetics and brand positioning. To ensure this, we would need to:

• Reduce barrier to entry. Make setting up a user test and creating test plans less intimidating for customers who didn’t have previous experience.
• Avoid negatively impacting power users’ existing processes. We didn’t want to force experienced customers to go through a lengthy tutorial or relearn behaviors to get started.
• Help users keep their “sense of place and flow” in the product. So both experienced and new customers can set up their tests more quickly and get results faster.

Step 2: Identify the right personas for revenue and conversion

We developed 6 different personas before we started the redesign. Personas helped us focus on the higher-level discussions of who we were trying to reach and what information they’d be looking for well before we got into design. This shared vision and concise language to describe our customers helped our team organize and prioritize content.

Redesign flows based on optimized personas

We ran numerous tests both internally and externally to determine where people expected to see certain sections. We looked at other companies that offer enterprise services and tried to learn from their information architecture (IA). We also debated names and structures internally, then tested our decisions with real users.

Step 3: Design with personas in mind

We tried to develop an enterprise-friendly aesthetic that clearly and effectively communicated the capabilities of our DIY research tools as well as our full range of client services.

When you design a site around personas, you eventually have to ask users which persona best fits them—but you can do it either explicitly or implicitly.

Some sites explicitly ask users to select which type of customer or persona they are when they first come to the site. We found this approach dull and annoying. “Don’t force me to make a decision—just show me the content,” we thought. Instead, we opted to design the site so that there was a clear flow for each of our 6 personas. The look and feel of the pages remains consistent regardless of which persona it was designed for, but the content varies to speak to each persona’s unique needs.

We avoided using photos or naming our personas because we’ve found that people can get lost in those somewhat insignificant details. Instead, we picked an image that we thought each person might use as a slide in a slideshow to better describe them.

Step 4: Prototype and test

Next, we prototyped our completed designs in InVision to:

• Test assumptions and design elements that might affect conversion
• Test overall design to find gaps in design process and information architecture

User testing helped us see how potential customers really saw and interacted with our site. It also helped us spot places where our structure wasn’t clear, designs weren’t helpful, and content wasn’t what people expected. The process led us to add and remove entire sections and increased our overall conversion rate substantially.

At one point in the design process we had a very different hero image. In testing, we showed the image to potential customers and asked them what kind of company they thought we were. The results were very surprising. While we thought the image clearly showed what we did, people assumed that we provided some kind of presentation or video conferencing software. We were able to change the imagery to better show what we do without running an A/B test on the public site and confusing half of our potential customers.

We also tried to make sure the page converted well. To do that, we kept the design simple to focus users’ attention on the primary message and call to action.

Striking the balance between new and power users

When we interviewed and observed new users interacting with the software, we found that we were stuck between catering to power users and onboarding new users.

Our old test creation interface

We realized that by giving all users a sample template for ordering tests, we’d give new users a nice head start. As a result, we were able to create a draggable interface for the tasks, which made our power users more efficient by allowing them to:

• See popular tasks and questions at a glance
• Easily rearrange the sequence of tasks in a test plan

Our shiny new test creation interface!

Things to consider when you’re designing for personas

Here are 4 general principles we’ve taken from our redesign experience.

• Test your assumptions before you start visual design. Make sure you truly understand the people you’re designing for by testing the flows with lo-fi prototypes. This makes your visual design process clearer and more efficient.
• Focus on the big picture. Naming your personas or using photography or icons to differentiate them only increases cognitive load. Don’t make users think!
• Test everything against existing designs. Because you’re rolling out something completely new, you have to keep any eye on the baseline set by your old design.
• Get an unbiased testing pool. Potential users who’ve never used your product make the best research subjects, as they won’t be comparing your new design to the one they’re used to.