Embedded Files
The St. Jude marketing is full of compelling photographs of patients, but arriving on an online form to give to this charity lacked that inspiration to give.
Boring to Inspiring
Before
Before
After
After
A/B Testing showed a 3.17% lift in conversion rate at 99% confidence with this experience!
Competitive Analysis
Competitive Analysis
Image Analysis–Desktop
Image Analysis–Desktop
Layout variations included:
Full background image, with form overlaid (ie. United Way and Charity Water)
Full width banner image at top of page with text overlaid, for is below (ie. American Red Cross)
Full width banner image at top of page with headline below (ie. Unicef and Wounded Warrior Project)
Image is width of form content and is just before beginning of form (ie. Shriner's Hospital for Children)
Image Analysis–Mobile
Image Analysis–Mobile
Full width image at top of form with headline below (ie. Unicef and Wounded Warrior Project)
Full width image at top of page, with text overlaid (ie. American Red Cross)
Image is width of form content and is just before beginning of form (ie. Shriner's Hospital for Children) – image is not very tall
Image at bottom of form (Charity Water)
Forms without images
Forms without images
Several organizations (including Livestrong, the Leukemia & Lymphoma Society, and the Nature Conservancy) display an image that is relevant to their mission on their desktop site, but not on mobile.
Several organizations (including Children's Hospital of Philadelphia, Children's Miracle Network, and the Salvation Army) never include an image on their primary donation form.
Other organizations (including the American Red Cross, the American Cancer Society, and PETA) include an image on their primary donation form regardless of the device.
Ideation and Wireframing
Ideation and Wireframing
Preference Testing
Preference Testing
Part 1 – Wireframes
Part 1 – Wireframes
Objective: What is more visually apealing and why? Of the different options are any more trustworthy than others?
Insights for mobile
Insights for mobile
The image at the top, made the page feel longer even though the length of the form was the same on all three options.
The headline was noticed more often when it preceded the image.
Preference was for the larger image, when it was full width as opposed to the one at the width of the rest of the content.
Insights for desktop
Insights for desktop
Results here were a bit more scattered, with no unanimous decision on favorite layout
We determined that on our next round of testing, we will have more users so that results are more conclusive.
We decided that the next iteration of testing will also narrow the design options, while asking a direct questions of “which design do you prefer?” so we can have that as a definitive answer that is statistically significant for our decision.
"...I really think that having the image of the girl really resonates with me in terms of helping me feel good about I am doing and almost increases the likelihood that I'm going to click through to complete it."
"...I really think that having the image of the girl really resonates with me in terms of helping me feel good about I am doing and almost increases the likelihood that I'm going to click through to complete it."
My initial impressions of the page are that I see the picture and I want to help. I like the way its laid out. Its simple and easy to understand so you know that you are making a donation to assist in childhood cancer."
My initial impressions of the page are that I see the picture and I want to help. I like the way its laid out. Its simple and easy to understand so you know that you are making a donation to assist in childhood cancer."
Part 2 – Prototypes
Part 2 – Prototypes
Objectives: Of two layout options, which causes more people to be more likely to donate and why? Which do the potential donors prefer and why? Does one of the two layouts help users better understand the purpose of the page (to make a donation)?
Insights for mobile
Insights for mobile
The purpose of the page was clear regardless of the layout.
The difference between the two layouts for mobile was too subtle.
The layout would be a determining factor in likelihood to donate. The inclusion of brand messaging was rated by 18 out of 20 participants to increase liklihood to donate.
Insights for desktop
Insights for desktop
Showed version with image to the right, sticky vs version with image full width horizontal at top of the form.
Strong preference for the version with image to the right, for the following reasons:
The photo is visible while scrolling.
The form and the photo are visible at the same time (some talked about it "feeling more balanced" while others talked about it being nice to have the reminder of why you are donating throughout the page).
The child's face is larger and according to one participant, "that draws sympathy." Other users talked about her blue eyes.
The page is more compact.
The page requires less scrolling, which made it easier and quickier to identify the purpose of the page.
"...I really think that having the image of the girl really resonates with me in terms of helping me feel good about I am doing and almost increases the likelihood that I'm going to click through to complete it."
"...I really think that having the image of the girl really resonates with me in terms of helping me feel good about I am doing and almost increases the likelihood that I'm going to click through to complete it."
My initial impressions of the page are that I see the picture and I want to help. I like the way its laid out. Its simple and easy to understand so you know that you are making a donation to assist in childhood cancer."
My initial impressions of the page are that I see the picture and I want to help. I like the way its laid out. Its simple and easy to understand so you know that you are making a donation to assist in childhood cancer."
Next Steps after testing
Next Steps after testing
After sharing the highlight reels with the engineering team, we decided to create the ability to upload two image files in our content management system to allow for the horizontal image on mobile and tablet devices and the square/vertical image on desktop.
I worked
The catalyst for this test is:
In usability testing, participants stated they were more likely to donate when the form included a patient image.
One participant in usability testing said, "And I really think that having the image of the girl really resonates with me in terms of helping me feel good about I am doing and almost increases the likelihood that I'm going to click through to complete it."
Another participant stated, "My initial impressions of the page are that I see the picture and I want to help. I like the way its laid out. Its simple and easy to understand so you know that you are making a donation to assist in childhood cancer."
Additionally, if this test proves out as successful, we could continue to iterate with testing, personalize image donation form experiences, and make the form feel more connected to journeys for our donors.
Finally, this test is to validate that work done to fix an existing PayPal issue has been corrected. If the PayPal issue we are looking at has been fixed, this allows for future redirect A/B tests.
Test results
We achieved a statistically significant lift in conversion rate on the image donation form. We saw a 3.17% lift at 99% confidence.
The image version of the form also saw more total revenue and higher average gift amounts (even with outliers removed).
We also saw that PayPal performance was not negatively impacted by running this redirect test. Percentage of PayPal donations remained the same between the experiences, and we did not see an increase in "pending" transactions in the database.
We saw more total gifts on the image donation form experience.
We saw no true impact to mobile experience, with almost even number of orders in each experience.
My role:
I visited over 20 other charity's websites to determine which included an image and note how they displayed it.
I completed several low-fidelity wireframes and did preference testing to determine which layout was most appropriate.
I created higher fidelity mockups and conducted usability testing to determine if the image was distracting from the task and if so, how much.
I worked closely with the development team to build this experience. Since the team did not have any dedicated UI developers on the team at the time, I also helped by writing the html and css to illustrate how the layout could be made possible.
I planned A/B tests to validate our hypothesis that this would increase conversion rate and not negatively impact other performance metrics like average donation amount.
After a strategist launched the A/B test and I worked with the business analyst to review results.
After A/B test showed success of this feature, I advocated for making this something we always use across all digital donation form experiences for St. Jude.
I documented the process for selecting and cropping images appropriately for mobile and desktop layouts so that other campaign designers could create appropriate files as needed.
Page updated
Google Sites
Report abuse