Asana (A/B Test | December 19, 2022)

On a mission to enable the world's teams to work together effortlessly.

No items found.
A/B Test Variants
Asana
Previous Versions
Asana
No items found.
Previous Versions

Asana Creative Test: Team-Specific Homepage Images

Screenshots showing the creative test that Asana ran on their homepage. The first hero image they tested was a collage of two lifestyle images showing people collaborating in a modern office. Overlayed over the image are floating to-do list items that you might add to their app. The other two variations were an auto-advancing image carousel with tabs to show which part of the carousel the user was in. The tabs were labeled by functional area: “Marketing”, “Product”, “IT”, “Operations”, and “Sales”. Each tab showed stylized screenshots of the Asana product to explain how team members might use the product.

Asana wanted to see which type of imagery on their homepage would work best to convince people to try their product. They tested two different kinds of images: one with people using the product in an office, and another showing off different parts of the product and how it can help different teams like marketing, sales, IT, and so on. 

They showed the team specific use-cases with a tabbed carousel. They tested two different designs for this carousel, because the design could impact whether visitors realize that the tabs are clickable.

Screenshots showing the two different styles of tabs that Asana tested for their image carousel. The first type of tab was pill-shaped buttons and the second type of tab underlined which section the user was in

Why might they have tested this?

It’s hard to create a single homepage hero image that captures all of the different ways that people use Asana. For example, a marketing team might use it to plan campaigns while a product team might use it to build a roadmap. Asana can be customized to look completely different based on how a team uses it. With so many different looks, what should visitors see when they land on the homepage?

One solution to this issue is to use a generic image, like a picture of people working on laptops in an office. This kind of image can represent any team, making it easy for anyone to imagine themselves in the picture.

A screenshot of the hero image that Asana tested on their homepage. It's a collage of two lifestyle images showing people collaborating in a modern office

This idea is similar to a technique used by Chipotle in a billboard ad. If you see a picture of a burrito wrapped in foil, you'll think of your favorite type of burrito: no matter whether you prefer black or pinto beans, steak or chicken. If you see a picture of a team working together in an office and you work in marketing, you will imagine that the team works in marketing just like you.

A billboard showing a Chipotle burrito wrapped in aluminum foil
Credit to Caitlin Hudon (@beeonaposy)

Another approach is to have different pictures on the homepage based on what team the person says they belong to. This way, each person will see how Asana can help their team specifically, which could make them more likely to buy it. But it's not guaranteed that they will click on the carousel to find their team's section, or even notice the carousel at all. And even if they do notice it, it might make them confused or overwhelmed — that's a lot of options to see at such an early stage.

A screenshot of the image carousel that Asana tested on their homepage. It has five tabs that are labeled by team:  “Marketing”, “Product”, “IT”, “Operations”, and “Sales”. Each tab shows stylized screenshots of the Asana product, showing how team members might use the product.

Results

The results of the A/B test showed that the control hero image, which included a collage of people working together in an office, was more effective than the carousel of team-specific use cases.

👍 Pros

  • The image is generic, which makes it appealing to a wide range of visitors
  • To-do list items overlaid on the image give a clear idea of the app's purpose
  • Image shows a modern office, hinting that Asana would make their company more modern and efficient

👎 Cons

  • Not personalized for individual teams, which might make it hard for visitors to see how the product would specifically benefit them
  • Doesn't show the different functional areas that Asana can support, which might make it hard for exec-level decision-makers to see the full scope of the product

Takeaways

When users are first learning about a product, it might be too much to ask them to pick which use case is best for them. Instead, it can be helpful to create separate landing pages for different teams, based on how they use the product. This way, users can see how the product would work for them specifically. And to make it easy, those team pages should be easy to find from the homepage.

A screenshot of Asana's navigation, that has dedicated pages for marketing, operations, and product teams to show how they could benefit from Asana.
December 19, 2022
Current Version
December 19, 2022
Current Version
No items found.
Variant
Control
No items found.
December 19, 2022
Variant
Control
Join the Conversation
Share your thoughts on this hero section.
Join the Newsletter
Unlock the secrets to successful SaaS landing pages with Glance Weekly
Let me read it first
Sign up for a free Glance account
Save favorites, unlock exclusive content, and discover websites you'll love.