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

A woman seen from behind with long, wavy hair against a soft pink and blue gradient background. Above her, the moon phases form a semicircle, symbolizing cycles and transformation. The composition evokes a meaningful moment of cutting or donating hair, aligned with natural phases of change.

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:


  1. People who cut their hair frequently (once a month).
  2. People who use the moon's phases as an indication to cut their hair.
  3. 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.
  4. People who see other people donating.
  5. People who go to the salon to have their hair cut based on models’ haircuts.
  6. People who ask for an indication of the best haircut style when they are in doubt.
  7. 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.

Facebook Audience Insights dashboard displaying demographic data for users interested in beauty, astrology, and lunar haircuts. The majority are women (79%) aged 25–34, significantly above the Facebook average. Most have completed or are attending college (69%), and 31% work in community and social services. Activity charts show high ad click rates, with 30 ad clicks in the past 30 days, suggesting strong engagement with relevant campaigns. These insights informed the creation of a realistic persona for the 'Donate Your Hair' UX case study.

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

Profile of a young woman named Ana, 25 years old, identified as a Social Welfare Assistant. The image shows her in profile view with dark hair tied in a ponytail, wearing a black turtleneck against a gray background. Text on the right outlines Ana’s motivations, personal interests, core needs, and pain points, portraying her as empathetic, socially engaged, and driven by personal and professional connection. The persona is based on demographic research aimed at improving communication and design strategies for socially conscious women.

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

Six-panel hand-drawn storyboard illustrating a user's journey in the #DonateYourHair campaign. A smiling woman sees an ad on her phone. She clicks on the campaign’s CTA (Call to Action). She lands on the website with a button labeled 'doar' (donate). She reflects and checks donation requirements. She happily cuts her hair, smiling. She shares her before-and-after photo on social media with a heart icon and the word 'share,' promoting the hashtag #DonateYourHair.

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

UI style guide showing visual identity elements for a hair donation campaign. The color palette includes four hex codes: dark navy (#1C1F2F), turquoise (#35D1D5), pink (#F5A7C8), and gray (#909090), derived from the client's logos. Two logos are displayed: 'Fazer o Bem' with a smile curve and 'Cadelegria' featuring illustrated hair. Icon set includes scissors, checklist, box, and smiley face in turquoise. Design elements include a turquoise circle and a pink flower with a yellow center. Typography uses Raleway font in light, regular, and bold weights for digital legibility.

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

Landing page for the #DOESEUCABELO campaign by the 'Fazer o Bem' project in partnership with the NGO 'Cabelegria.' The top section features a smiling child wearing a flower wig illustration, next to a form for hair donation sign-up. Below, four illustrated steps explain how to donate hair. Further down, a description introduces Cabelegria and its mission to create wigs for children with cancer. The page includes a black-and-white photo of supporters, a FAQ section, a video thumbnail of a child in a superhero costume, and a list of partner logos. The design uses turquoise, pink, and navy blue with Raleway font.

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:

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.

WHICH VERSION WOULD PERFORM BETTER?

Comparison of two web form versions for the #DOESEUCABELO hair donation campaign. Version A on the right shows a simplified form with fields for name, email, and phone number, designed to minimize friction. Version B on the left adds a dropdown menu labeled 'Como doará seu cabelo?' (How will you donate your hair?), offering four donation options: collect hair already cut, collect wig, donate at any salon, or donate at a partner salon. The A/B test split traffic equally to assess which form led to more successful conversions at the decision-making stage (step 4 of the user journey), tracked via Google Analytics.

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 the conversion rate increasing from 3% to 12%, which is an increase of 9 percentage points.

A/B test results comparing two web form versions for the hair donation campaign. Version A: 60 visitors, 2 conversions, 3% conversion rate. Version B: 60 visitors, 7 conversions, 12% conversion rate. The test reveals that Version B significantly outperformed Version A, increasing the conversion rate by 9 percentage points.

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 NGO 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?

VIEW CASE STUDIES