Does your website make a good first impression? Here’s how to find out
Did you know that website visitors decide whether they like it in about 50 milliseconds? You don’t have much time to make a good impression.
Visual first impressions -can make the difference between losing prospects forever, or turning them into lifetime customers.
But how do you quantify aesthetic preferences?
This year at Unbounce, we wanted to find out. We did a brand audit. We’re a data-driven company, so we decided to run exercises with external users to prove the value of a visual refresh for our audience.
Our results? Completely eye-opening. Based on the feedback we received, we got the green light for a massive rebrand.
In this article, I’ll share a step-by-step guide on how you can run impression tests to demonstrate that visual design goes far beyond “making things look good.”
The Process
1. Audit.
We started by compiling all of our work from the previous year. We identified what was working, what wasn’t, and what we needed to improve. By comparing a large number of our visual elements, we were able to see the inconsistencies in our work.
We decided to start with the basics and focus on three main aspects of our brand: color palette, typographic hierarchies, and imagery style.
2. Internal Interviews.
While doing our audit, we began our investigation by interviewing people from almost every department at the company. Rather than make decisions on our own, we wanted to thoroughly understand how our brand got to be where it is, and where people hoped to see it in 5 years. Taking the time to do this has a huge side benefit — by asking people for their input early in the process, we helped them feel invested in the outcome.
3. Homepage Explorations.
Taking the audit and interviews insights into account, we started working on a new homepage design. We kept the copy the same so that the focus stayed visual, and designed five homepage variants to test them with our audience.
4. Internal Feedback.
Feedback isn’t easy to hear, but it’s essential. We printed our new designs on a large scale and hung them in the company’s hallways. Immediately we started to receive opinions.“We shouldn’t change our shade of blue” or “I don’t think we should be showing our builder. It’s too literal.”
We valued these opinions. However, they were internal. We decided to get out of our bubble. Our next step — recruit external participants and run an impression test.
Testing first impressions
Visual elements are increasingly expected to carry the essence of your brand’s personality. So, what can you do to measure if your design is communicating the right message?
Run an impression test. Here’s how it works.
1. Identify your goal
Our primary goal was to get a better understanding of the impact of a new color palette, typography, and imagery on customer perceptions of the Unbounce brand.
2. Recruit your participants
We recruited test participants who were representative of the Unbounce’s target audience.
3. Prep your sessions
We structured our one-hour sessions carefully, and ran practice tests to make sure that our process was remote friendly Here are the three main tools that we used:
- Google Slides: This helped us guide the session and clarify expectations from our participants.
- Zoom: This allowed us to connect on video calls with our participants, analyze how they were interacting with our prototypes, and record the sessions.
- Invision: This transformed our static homepages into one shareable prototype, which our participants were able to display in their monitors.
4. 5-second test
We kickstarted the session with a 5-second test, a great exercise to accurately capture people’s “gut reaction.”
We showed the prototype homepages for 5 seconds. After the image was gone, we immediately presented a list of traits to the participant. They chose words that represented their feelings about the images they had just seen.
Five seconds might sound like a short amount of time, but it is enough to form a strong impression of visual style.
After getting the responses from all our participants, we compiled their answers and put them together into word clouds to have a more digestible way to read and to distribute the information.
5. Run your homepage prototype.
The second part of the test involved our Invision prototype. We included our five new homepage design and the old one for comparison. Frequently, showing users more than one possible visual designs help them identify what they like (or dislike) about each variation.
We give participants 2–3 minutes to scroll down through each page and share out loud all their thoughts about the visual compositions.
Testing your designs can be very tricky so it is essential to write down neutral questions that would not imply any particular answers or give away our expectations. To get honest feedback from usability testing, here are some principles:
- Don’texplain the designs
- Don’t suggest answers
- Don’task leading questions
6. Measuring Responses
After these impressions were done, we analyzed the feedback and categorized it into patterns.
Eventually, those patterns were turned into guidelines
Results
Here’s what we learned.
Clear Openness in New Art Direction
When we asked for internal feedback on color, people were hesitant to modify it. When we tested it externally, not a single participant noticed the new color configuration. Thanks to this exercise, we got evidence that it’s okay for our brand to evolve.
Avoid Using Abstract Product Representations
When we tested our illustrations, we found that realistic examples were much faster at communicating value to our audience.
In the past, we’ve used icons, illustrations and even mockups to explain who we are, but we realized that nothing works like the real product. Based on this insight I’ve evolved our style from a more abstract approach into a more realistic one.
Color Coding Helps Differentiate Multiple Products
Our product offers landing pages, popups, and sticky bars. By giving each of these a consistent color treatment, people understood our offerings right away.
By keeping the composition neutral and implementing contrasting accent colors ONLY on these three items, our products became the stars of the page.
4. Simple & High-Quality Pics Raise Curiosity
Unbounce offers tons of templates, but this doesn’t mean that we need to show them all at once-. We tried to reflect quality vs. quantity. Less copy, fewer images, less visual noise, and it worked! People clicked on this to know more about this offer.
Conclusion
Subjective opinions can be dangerous. We think we know our brands inside and out, but by bringing testing into the process, we open ourselves to new insights and perspectives.
For Unbounce this was only the beginning of the rebrand project. Undergoing this exercise fostered a productive conversation, and allowed us to begin working collaboratively with other teams.
// Big thank you to these group of people who made this possible: Denis Suhopoljac, Rebecca Preston, Cesar Martinez, Sabrina Chan, Cecilia Martinez & Alejandra Porta //
