Fundraiser Landing Page

UX Strategy, Frontend Development, & Optimization


Inspiration

Every now and then something just falls into your lap at the right moment. I had been studying how to design and develop landing pages after reading Conversion Rate Experts' case study on improving Crazy Egg's conversion rate. Next thing I know, a Marine buddy of mine contacted me asking if I could put together a site for the family members of our local unit to donate in our yearly fundraising event.


1:1 Attention Ratio

Any great landing page strives to achieve a 1:1 attention ratio, which is the number of things you want the user to do compared to the number of options the user has. In this case, the client was looking for donations. This is the foundation of a high-converting landing page.


The Dream Solution

The ideal solution needed to be accessible via mobile devices, on older browser versions, and by an older demographic (parents and grandparents).


The Design

After writing a blog post series on the subject, Medium, I wanted to focus on the following landing page techniques:

  • 1:1 attention ratio
  • Removing the navigation

Also, I structured the page's content in a specific way to build user trust.

  1. "A family-friend competition supporting..." - A precise explanation of what the fundraising event was.
  2. "Who We Are" - An emotional appeal of who the donations are going to.
  3. "Red vs. Blue" - Now that I hoped the user would be emotionally bought in, I wanted to explain what the event was.
  4. Example cards - The cards, if the project had been completed by the client, would have described the different parts of the competition.
  5. "How I Can Help" - In my mind, the user has now emotionally bought in, is interested in the event, and is now wondering how they can get involved.
  6. "When and Where" - Great, we've got an emotional, interest, and a donation buy-in, so I wanted to provide the location of the event in case a user didn't already know.
  7. "Support Your Marine" - In case the user didn't buy in via a donation, I wanted to add one last punchline. This is a direct call-to-action to support their Marine.

The Fix

Using HTML5, CSS3, and Vanilla JavaScript, I created a solution so fast and responsive any user with a mobile device can use it fluidly with a 3G connection. Here is an example of the Google Map's API.


What next?

Feel free to fork the project's GIT repo here.

If you have a project similar to this or would like to work with me, send me an email!