CASE STUDY


Donate your hair: increasing donations through A/B testing

Donate Your Hair is a campaign that used social data to encourage the donation of locks of hair for the benefit of children with cancer.

UX Case Study - Ottawa Canada

Overview


A/B TESTING


CHALLENGE


How might we sensitize people spontaneously on the internet to donate locks of hair for a social cause?

GOAL


Encourage hair donation for wigs to help children regain self-esteem during cancer treatment.

TEAM MEMBER ROLES

  • UX Designer and Researcher (my role)
  • Project Manager
  • Copywriter
  • Web Developer
  • Digital Marketing Manager
  • Volunteers

Defining hypothesis

UX Case Study - Donate Your Hair - Defining hypothesis

We identified the hypotheses that need to be tested to narrow the path between donor and donation. In light of this, we came up with a few premises, all related to the chances of hair donation:


  • People who cut their hair frequently (once a month).
  • People who use the moon's phases as an indication to cut their hair.
  • People who donate their hair in specific months, such as October Rose, a global awareness campaign that aims to alert society to the importance of preventing and early diagnosing breast cancer.
  • People who see other people donating.
  • People who go to the salon to have their hair cut based on models’ haircuts.
  • People who ask for an indication of the best haircut style when they are in doubt.
  • People who cut their hair when they decide to change something personal in their lives, making this action a milestone of a new stage.


We refined and decided to go with a hypothesis that would be more useful to learn and that we could validate the information online.

The hypothesis to be tested:


People who use the phases of the moon as an indicator for their haircuts may be prone to donating.


AUDIENCE INSIGHTS REPORT

According to lore, the moon phases can interfere with hair strands' growth and, consequently, their aesthetics. But before creating it, we decided to understand the target behaviour to create the persona. To do so, we used Facebook’s Audience Insights feature, filtering the search for terms correlated to beauty, astrology and lunar hair cut.

Donate Your Hair - UX Case Study - Facebook’s Audience Insights

What did we find out?

  • Women are the most relevant target audience (25–34 years old).
  • They are doing college or have already graduated.
  • They work in positions related to community and social services.
  • They have a habit of clicking on ads.

Persona profile

UX Case Study - Donate Your Hair - Persona profile

We've found that women exhibit a high level of engagement with advertisements, particularly when these ads resonate with their personal and professional experiences. Many work in fields related to social action, which increases their likelihood of participating in campaigns with social purposes. With this insight, we developed a persona profile.

This profile is crafted from careful demographic research, identifying not just basic characteristics, but also the motivations, interests, fundamental needs, and challenges faced by this group.

This approach helps us create a realistic and well-founded user persona, enabling more effective communication and a design more aligned with the expectations and needs of this audience.

The idea

People who want to take care of their hair see an ad about the best time to cut their hair according to the moon phases. But, intentionally, after clicking on an ad, they would end up being redirected to the campaign’s website: Find out which moon phase is perfect for cutting your hair. The proposal was to use the curiosity factor to attract attention and then show an impactful message:


Donating your hair to children with cancer isn't about the moon's phase. It's all up to you.


Storyboard

UX Case Study - Donate Your Hair - Storyboard

From the storyboard, I created six scenes representing the user’s journey from the moment they are impacted by the ad when they share their photo (before and after) on social media using the hashtag #DonateYourHair.

Wireframes

UX Case Study - Donate Your Hair - Low-fidelity wireframe
UX Case Study - Donate Your Hair - Medium-fidelity wireframe

We created the wireframe to remember that the landing page would need to highlight the donation form, explain step-by-step how to donate, answer questions, and introduce the NGO to build trust. We also focusing on specific elements spread out over the page layout to get the user’s attention using buttons that allow visual contrast, including the donate and share buttons.

Style guide

UX Case Study - Donate Your Hair - UI Components (Style guide)

To define the colour palette, we based it on the shades identified in the client’s logos, creating elements for the landing page. We used the Raleway font. Besides being open source, it has good legibility for electronic devices and a family for different weights.

Landing page

UX Case Study - Donate Your Hair - Landing page - High-fidelity wireframe

A/B Testing

To encourage hair donation and mitigate cognitive effort in the step of filling in user data, we decided to test the following hypothesis:


We believe that using a form with little data collection may increase the conversion rate

because it will be faster and simpler to fill in the registration.


We identified that stage 4 of the user journey was the most critical since it represented the moment of decision and could directly impact the results. Therefore, we run an A/B Testing on the website, implementing two different forms with 50% percent of traffic to experiment by isolating the filling fields as a variable using Google Analytics.

WICH VERSION WOULD PERFORM BETTER?

UX Case Study - Donate Your Hair -A/B Testing

VERSION A

We created a simple form with the fields name, email and phone. The idea was to shorten the path between interest and donation by reducing the form.


VERSION B

The user might have questions about the different ways to donate. Therefore, we implemented procedures to make the donation decision more manageable, including a dropdown menu on the website form with the following options:

  • Collect hair already cut.
  • Collect wig.
  • Donate hair at the hair salon of your choice.
  • Donate hair at one of our partner salons.

We needed to determine if this implementation would facilitate or obstruct the process of form completion on our website.

PRELIMINARY RESULTS

Our A/B testing delivered clear insights. We discovered that Version B of our form design significantly increased donations. This adjustment resulted in a 30% rise in conversion rates, underscoring the impact of user-centric design in fostering positive actions.

UX Case Study - Donate Your Hair - A/B testing - Results

For this reason, the hypothesis created has been refuted. The enhanced landing page achieved a remarkable 8.75% rate in donations. Check out the full story in the video below (English closed captions available):

Lessons learned

Once the campaign lasted approximately six weeks, we considered additional ways to improve the results for further analysis.

  • Evaluate the impact of users clicking on the subject of interest and later leaving the site due to it not being what was promised in the ad.
  • Avoid defining a cutting hair date to make it more likely the donor will find an opening in the beauty salon’s appointment book.
  • Expand the budget so the campaign can be reinforced in other cities.Gain an understanding of how hair donation works for all genders.

"Small acts, when multiplied by millions of people, can transform the world." — Howard Zinn

Interested in reading more?

Feel free to hit me up. I'm looking forward to hearing from you.

Behance (Portfolio) - Marcos Rezende
Medium - Marcos Rezende
Gumroad - Marcos Rezende
Linkedin - Marcos Rezende

2024 - Marcos Rezende's UX Design Portfolio. Canada © All rights reserved. Privacy policy.