Opened 5 years ago

Closed 5 years ago

#10264 closed enhancement (implemented)

experiment with donate positioning on download page

Reported by: phobos Owned by: phobos
Priority: Medium Milestone: Website Donations Enhancement
Component: Webpages/Website Version:
Severity: Keywords: donation website testing www-team
Cc: erinn Actual Points:
Parent ID: #10328 Points:
Reviewer: Sponsor:

Description

In order to increase our funding from individuals, we need to experiment with positioning and workflow of the download page to highlight the donate option.

The goal is to increase electronic donations from individuals by 2x over the month of December 2013. Electronic donations means paypal, amazon, dwolla, and givv as listed on our donate page.

Individual donations in December 2012 were:

Paypal: $9,230.00
Amazon: $1,425.00
Dwolla: $    0.00
Total: $10,655.00

If we can hit $21,310 in electronic donations, we've met the goal.

Child Tickets

Attachments (3)

2013-12-01-feedback-army-results.pdf (83.1 KB) - added by phobos 5 years ago.
feedback army baseline results
2013-12-06-form-design.jpg (665.0 KB) - added by phobos 5 years ago.
initial mockup design
layout.css (23.1 KB) - added by phobos 5 years ago.
updated css for donation boxes

Download all attachments as: .zip

Change History (28)

comment:1 Changed 5 years ago by phobos

A list of tests to conduct could be:

  1. Change the color of the donate box on download-easy to be more eye-catching. Experiment with Orange, Red, Blue, Green.
  2. Change the location of the donate box on download-easy to be more front-and-center. Modulo color changes.
  3. Mimic the Download button look and feel as a Donate button.
  4. Change the download-easy page to put the donation section up top, with appropriate text to ask for donations, but provide an anchor link to let users "jump" down the page to the actual downloads.

comment:2 Changed 5 years ago by phobos

First steps are to see where people look on the page now.

  1. The first step is to baseline the current page and receive feedback. Use usertesting.com, fivesecondtest.com, loop11.com, feedbackarmy.com, and webnographer.com all provide instant user feedback on the page.
  2. The second step is to collect the feedback and categorize it for each change.
  3. Implement the changes based on feedback.
  4. Let each change sit a week to see the impact on donations.

comment:3 Changed 5 years ago by phobos

Started baseline test on feedbackarmy.com for the page:

https://www.torproject.org/download/download-easy.html.en

Here are the questions I asked:

  1. What is the first part of the page that catches your eye?
  2. Did you see the donate button?
  3. Do you understand the process to donate?
  4. What would highlight the "donate to tor" section?
Last edited 5 years ago by phobos (previous) (diff)

Changed 5 years ago by phobos

feedback army baseline results

comment:4 Changed 5 years ago by phobos

And the results of the baseline test are attached.

comment:5 Changed 5 years ago by phobos

Summary by question.

Question 1: What is the first part of the page that catches your eye?

Answers:

  • The first think that I notice is the logo for Tor. I like the color and the cut onion raises my curiosity to learn more about them.
  • The first part of the page that catches my eye is the big, purple logo in the upper-left corner.
  • The first thing that caught my eye was the section near the top that includes "Tor Browser Bundle for Windows" and the orange download button.
  • The download button is the first part of the page that catches my eye. It is the largest, brightest part of the page. I think this is for the best, as, if I were on this page, I would be searching for the download button regardless.
  • The Tor logo at the top left of the page.
  • When I opened the page, I first noticed the download button for the browser bundle software.
  • The TOR logo with the download button directly below it.
  • The first part that caught my eye was actually the logo. I thought that the logo was really unique, you don't often seen onions being used as an advertising icon, and it intrigued me into learning more about the product/service.
  • The first thing that catches my eye is the box asking if you really want Tor to work and contains a link with a full list of warnings which details and explains how to make my browsing experience much safer, such as not downloading files using Tor, etc.
  • The warning catches my eye first[want Tor to really work...]
  • The first part of the page that catches my eye is the colorful Tor "onion" logo, followed by the browser bundle download button.
  • The logo at the top left of the screen was the first thing I noticed, immediately followed by the warning symbol.
  • The orange download button was the first thing that caught my eye
  • The first part of the page that caught my mind was the yellow box containing "want tor to really work?". I think the main reason it caught my eye was the yellow background with the warning sign triangular graphic.
  • The warning sign at the top of the page
  • The first part of the page that catches my eye is the "Download" button.
  • The first thing that catches my eye is the orange Download button.
  • The name "Tor" in purple is what first catches my eye.
  • The large orange download button is the first thing on the page that catches my eye. I am glad this is the case, since this would be the main reason that I or most others would be on this page.
  • The browser button and download area of the page in the middle were the first things I saw. The colour was the reason it caught my eye.
  • The first thing that caught my eye was the text box in the middle of the page with the logo and the bright orange download button.
  • The download button is the first thing that catches my eye.
  • The Tor logo in the upper-left corner.
  • The first part of this page that catches my eye is the logo for the webpage at the top left corner of the screen.
  • The Tor logos were interesting to look at.

comment:6 in reply to:  5 Changed 5 years ago by phobos

Replying to phobos:

Summary by question.

Question 1: What is the first part of the page that catches your eye?

A summary is:

Tor Logo 11
Download Button 9
Warning Box 4

comment:7 Changed 5 years ago by phobos

Question 2: Did you see the donate button?

Answers:

  • Yes I do see the donate button on the right side of the screen.
  • I saw three donate buttons in all: two in the upper-right part of the page and one at the very bottom of the page.
  • Yes, it's on the right-hand side of the page.
  • I did see the donate button, though barely. I browse with my monitor divided into two half-screen windows. The donate button was on the left side, partially out-of-view for me.
  • Yes, I saw the donate button.
  • I saw the donate button after noticing the download button.
  • Yes, it is in the top right of the screen with a yellow background.
  • I did see the Donate button at the top right-hand side of the page. It stood out fairly well, but the orange buttons are sort of clashing with the purple color palette of the website. It's not that big of an issue, but just something to think about for the designers/layout crew.
  • Yes the donate button is clearly on the upper right side of the page with a box around it and a large "donate" button.
  • Yes- the donate button is easy to locate.
  • Yes, the donate button was clearly visible in the upper right-hand corner.
  • Yes, it was very clear but did not intrude on the content of the webpage. (Also the warning text slightly misaligned the main content box with the donate box, it looks slightly unprofessional).
  • Yes, I noticed the donate buttong
  • I saw the donate button rather quickly thanks to the bright orange color of the button.
  • Yes
  • I saw the Paypal style "Donate" button after a second glance at the page. I didn't see the purple donate button until much later, after trying the donate process on this page.
  • Yes, I see the Paypal Donate button
  • Yes, I saw the donate button on the right.
  • I did see the donate button. It wouldn't be clear to most visitors that PayPal was the service being used to accept donations through that button, since there was no PayPal indicator. I had to click on the 'other donation options' link to see that the default is PayPal, along with the Amazon, Dwolla, and Givv options.
  • Yes, I saw the "donate" button.
  • I did see the donate button on the right side of my screen.
  • No, I did not notice the donate button until I was prompted to look for it.
  • Yes, it was one of the first things I noticed.
  • Yes I did see the donate button.
  • Yeah, but perhaps you could make it a different color to really highlight it from the other purple ones. The PayPal one is alright, I guess.

comment:8 in reply to:  7 Changed 5 years ago by phobos

Replying to phobos:

Question 2: Did you see the donate button?

Summary answers:

Yes found it 20
Found all of them 2
barely/no 3

comment:9 Changed 5 years ago by phobos

Question 3: Do you understand the process to donate?

Answers:

  • Yes, I understand that I can donate through Paypal, Amazon, or Dwolla. I also see how I can donate by cash, check, or money order. I don't understand the Bitcoin donations, but that is because I am unfamiliar with Bitcoins.
  • Yes. There are multiple options for donating. PayPal and Check/Cash/Money Order/Bank Transfer are the simplest to understand; I wasn't familiar with any of the others.
  • Yes, you can use PayPal to either make a single donation or pay for a subscription.
  • The process to donate seems simple. The UI presented seems to make it quick and easy, and it appears to utilize Paypal, allowing me to know it is safe.
  • Yes. You first choose the currency in which you are donating, then the amount you are donating. Lastly, you choose whether to donate once or every month. You can donate via paypal, amazon payments, dwolla, givv.org, or mail a check or money order. You can also donate hardware and services.
  • After reading the donation options link, I fully understood how to donate.
  • It is very straightforward. The donate section is clearly visible, has all the options instantly available (one time or monthly donation, how much to donate and in which currency.
  • I did understand the process to donate; it was fairly simple, run-of-the-mill, Paypal style donation process with drop-down menus, open-ended form, and an easy to locate button.
  • I understand the donation process and also that not only can you donate through Paypal, but you can also donate through; Amazon, Dwolla, and Givv. The donations will proceed to help go towards the on going research, development, and education about online anonymity and privacy.
  • Yes-I understand the process to donate-it's easy. Simply enter the amount and hit the donate button. Then you are directed to pay-pal to confirm your donation.
  • Yes, the process to donate uses PayPal and a variable amount setting, with a one-time payment, or monthly subscription option.
  • Yes, it seemed very clear, although I might recommend adding bitcoin as a possible currency for donation.
  • Yes, it looked like I can use PayPal and I can choose to donate just once if I want
  • The process to donate seemed really easy. Judging by the font, it appears at first glance to use PayPal as the money transferring service.
  • Yes
  • Yes, the process to donate is easy. The default option is to use Paypal, through the button that is displayed, but the "Other Donation Options" link allows several other ways to donate as well. All are easy to understand.
  • Yes, I understand the process to donate.
  • Yes, I see that you first select your currency and then write in the amount. Then, fill in if this is a one time donation or monthly donation. Also, there are many other donation options if you hit the "other donation options" button.
  • I understand the process to donate. It's similar to most of the other websites that solicit donations and anyone who has seen them in the past should be familiar with them.
  • Yes, I understood the process to donate.
  • I understood the donation process.
  • Yes, I do understand the process of donating money. I am familiar with PayPal.
  • Yes, it seems very simple.
  • Yes I did understand the process to donate although I would suggest that the creator of this website make it a little more clear and easy to understand because it was a little confusing at first.
  • Yes, it was clear.

comment:10 in reply to:  9 Changed 5 years ago by phobos

Replying to phobos:

Question 3: Do you understand the process to donate?

Summary answers:

Yes, understood 11
Yes, paypal 9
Yes, read donate page 6

comment:11 Changed 5 years ago by phobos

Question 4: What would highlight the "donate to tor" section?

Answers:

  • The mission of Tor seems a little vague, and I'm not sure what the money would really go towards. Adding a YouTube video maybe helpful in explaining some of the things that Tor does.
  • Moving the donate buttons to the same side of the page as the logo would help me to notice the buttons sooner. It would be a natural progression of my eyes to look below the logo first as I scan the page.
  • I think if its background color was changed to something more vibrant and made it "pop" more, it would be more visually attractive and catch people's attention.
  • Perhaps the use of another, more noticeable, but still not ugly and distracting, color for the donation box background would draw my eye more to the donate portion of the page.
  • I think the donation section is in a good location on the page, however a change in color and font of the donation section might make it more eye-catching. It might also be helpful to put some of the info from the donate page on the main page such as the "what happens to my donation?" info and the info at the top of the page under "make a donation". I think people would be more willing to initially click the donate link if they were to see this info first.
  • I would add a brightly colored border to attract attention to the "donate to tor" section.
  • It would probably be more instantly obvious on the left hand side of the screen and if the yellow used in the background was the same as in the "Want Tor to work" box.
  • I would put a block of purple behind the 'Donate to Tor' header, since it would follow through with the theme and look more cohesive. I would also shift the position of the header/cell toward the top-center section of the page, as it will more immediately catch the eye of the website's viewer. You could put some sort of border/image border around the outside, but that might be over-kill.
  • To help highlight the "Donate to Tor" section, I would add the following headers in bold black text with a yellow background? "Are you worried about your online Anonymity? Help us protect you and feel the benefits of browsing securely."
  • What the donation area needs is -A moving Tor image/figure moving his arm pointing at the Donation button with a caption-" Please Show your Appreciation " or something similar.
  • The donation could be highlighted by using the same colorful pattern as the Tor logo, possibly, or the text could be made slightly larger.
  • Possibly have some sort of goal bar and how much has been raised towards that goal.
  • Having stories which will impress the visitors enough to want to donate. There is nothing you need to do visually to make it stand out. It is the benefits that need to be highlighted, as well as trust hat Tor will use money for the cause not to benefit people who run it. I did not see any information of what is the percentage of the donation that will go to administration, for example. That's what I look for when I donate to a charity.
  • My two suggestions to make the donate are more noticeable would be to make the donation box more central to the page instead of on the sidebar or to not put it next to the yellow box mentioned above which draws the eye away from the donation area.
  • Putting a caption in that explains what the donation is for on the main page
  • I think that the easiest way to highlight the "Donate" section would be to have a call to action after the download button is pressed. Have the page show a graphic or section that is visible after the user has started the download, with text asking for support.
  • Perhaps the download button could be another standout color so it doesn't detract from the well known colors of Paypal. The "other donations options" color doesn't stand out at all, so people that dislike or don't use Paypal might not see that there are other ways to pay. Making that text a light darker might help. Possibly moving the download button farther away from the donate section might help, but it does bring your eye to the side of the page where the donate button is. I might move it to the left a little, and change the color to the Tor colors inverted: green button, purple text perhaps.
  • I think you should make the name "Tor" look exactly like the logo with the globe in the middle for the "o". Also, you could increase the letter size of the phrase "donate to tor".
  • If people want to donate, the "donate to tor" section is already visible enough. If you want to make it even more visible it would probably involve doing things that annoy people. You can do intrusive pop-overs and interstitials, or boxes/bubbles that need to be closed with an x button. Please don't ever do this, though, because that is the quickest way for me to never donate or even return to a website.
  • I think the background of the donate area needs to be a different colour, to catch the eye. As it is, the donate button is smaller and less intense than the colour in the center of the page.
  • I think it is in a sufficient spot to be seen and does not need any changes.
  • One thing to consider would be highlighting the donation box (not button) with similar colors/ complementing colors to the orange and purple used for the other buttons (i.e. browser and download button).

comment:12 in reply to:  11 Changed 5 years ago by phobos

Replying to phobos:

Question 4: What would highlight the "donate to tor" section?

Summary answers:

Add mission/quote/story 3
Move to left side 5
Change color/border/font 10
Goal bar 1
Call to action 1
do nothing 2

comment:13 Changed 5 years ago by phobos

Summary browser breakdown:

Chrome 31 (Windows) 12
Safari 5 (MacOS) 1
Firefox 25 (Windows) 5
Opera 9.8 (Linux) 1
Firefox 14 (MacOS) 1
Firefox 26 (MacOS) 1
Internet Explorer 10 (Windows) 2
Mozilla 11 (Windows) 1
Firefox 25 (MacOS) 1

comment:14 Changed 5 years ago by phobos

Changed the wording from "Donate to Tor." to "Help create more Tor!"

Next up is to hack on the css and change the color per suggestions from feedback.

Changed 5 years ago by phobos

Attachment: 2013-12-06-form-design.jpg added

initial mockup design

comment:15 Changed 5 years ago by phobos

Initial design mockup from the css/html designer.

comment:16 Changed 5 years ago by erinn

Cc: erinn added

comment:17 Changed 5 years ago by phobos

Parent ID: #10328

comment:18 Changed 5 years ago by phobos

Milestone: Website Donations Enhancement

comment:19 Changed 5 years ago by phobos

Current test page is at https://people.torproject.org/~andrew/website-testing/download/download-easy.html.en

with mis-aligned top of the box and all

Last edited 5 years ago by phobos (previous) (diff)

Changed 5 years ago by phobos

Attachment: layout.css added

updated css for donation boxes

comment:21 Changed 5 years ago by phobos

final adjustments to the css went live last night, https://lists.torproject.org/pipermail/tor-commits/2013-December/065326.html

This implements the feedback of change color and make the donation box stand out more.

Last edited 5 years ago by phobos (previous) (diff)

comment:22 Changed 5 years ago by phobos

I ran a cross-browser compatibility test with browsera and everything appears to look as expected.

comment:23 in reply to:  22 Changed 5 years ago by phobos

Replying to phobos:

I ran a cross-browser compatibility test with browsera and everything appears to look as expected.

Here are the results of the compatibility test, https://www.browsera.com/tests/49513-2013-12-11-download-easy-test?token=c9feced5-a9a1-3f18-97d9-cbe6ce5df8af

comment:24 Changed 5 years ago by phobos

Keywords: www-team added

comment:25 Changed 5 years ago by phobos

Resolution: implemented
Status: newclosed
Note: See TracTickets for help on using tickets.