ALSAC, the fundraising organization for St. Jude Children's Research Hospital, was in need of a landing page redesign to reduce the time and effort for online merchants to fundraise for St. Jude. For the sake of clarity, I will be referring to ALSAC as St. Jude since theirs is the branding identity I will be referencing in this project.

St. Jude provided:

• Target audience and industries they belong to

• App features to highlight

• Direct competitors

Vision

Reduce the time and effort for online merchants to fundraise for St. Jude.

Goal

To increase funds raised for St. Jude by allowing businesses to seamlessly integrate donating to St. Jude into their online stores.

Objectives

• creating a visual language style guide

• Creating a journey map

• Build the landing page prototype

• Test and implement findings as needed

Focus areas:

• ensure that users understand the app's functionality and how it works

• providing a responsive experience to the user

Prerequisites:

• adhering to branding guidelines

• redesigning while keeping the existing working features of the landing page

The existing landing page and user research provide insights into user expectations and preferences. Users are interested in:

• seeing how the donation widget works

• seeking feedback and case studies from other businesses

• finding details about installation and platform availability

Micro businesses

• Hyper-local

• Single location

• Owner/Operator

small business

• Local or online only

• Small staff

• Single location

• Niche audience

mid-market

• Regional business

• Have a mix of online and limited physical locations

• Online only with multi-state reach

small/medium-size corporate

• Business owners or decision-making employees

• National reach, Multiple physical locations and online presence

Top challenges for these personas include:

lack of capital/cash flow, recruiting/retention of employees, and marketing/advertising.

Merchants need an easy way to collect donations in order to fundraise for St. Jude.

• Find information about the St. Jude Donation App's purpose and the St. Jude mission.

• Find information about the potential benefits to the merchant when they choose cause marketing.

• Find information on how to the St. Jude Donation App works.

• Find the link to the Shopify app listing for the St. Jude Donation App in order to install it.

How might we make it easy to give to St. Jude while shopping online?

The process begins by gathering existing brand identity resources:

• guidelines

• fonts

• icons

• photography,

• patient artwork

Fonts, colors, iconography, and patient art were selected from brand materials.

Merchant stock photography should look like a candid lifestyle shot and avoid an overly posed and fabricated image.

Two variants are developed while creating low-fidelity wireframes that switch the order of sections of information of interest to the user.

These aim for richer designs that are attainable within the existing website framework.

Developed based on the established variants for testing.

Does the landing page support the following objectives:

• Variant 1: Merchant with a business on Shopify will click through to the Shopify listing page to install the app on their store

• Variant 2: Merchant with a business on another platform will fill out the form to express interest in the app

Findings:

• Page is wordy and long, should be compacted, made simpler

• Users preference on relevant information

• Description is unclear, users want more simple and concise information

• Some users didn't understand the purpose of having both a 'Download Now' button and the contact form

• Users wanted to know more of the benefits for their businesses

• Most users missed the header CTA

• Users would like a video about the app’s functionalities

Next Steps:

• Revise page content and compact

• Explore visual ways to portray content to reduce length

• Create how it works demo video

• make CTAs more prominent

Does the landing page support the following objectives:

• Merchant with a business on Shopify will click through to the Shopify listing page to install the app on their store

• Merchant with a business on another platform will fill out the form to express interest in the app

Findings

• Users want merchant testimonials and case studies for proof of legitimacy.

• Generally users thought the information was sufficient

• Some users want to see how many businesses are using the app and how much has been fundraised

Next Steps:

• Revisit language to use terms familiar to merchants

• Once how it works demo video is done, add to listing

• Once testimonials are collected, add to header

• Page length

• Content clarity

• Prominence of CTAs

• Addition of a how-it-works demo video to project scope

Inclusion of testimonials are pending upon collection.

Launch

The St. Jude Donation App and the finished redesign of the landing page published simultaneously after the second round of testing.

The improved landing page design tailored to merchants makes the process easy for users who visit the page and install the app, as they have accurate expectations of the process and increases user satisfaction.

The new design successfully addresses the need to simplify the process of making fundraising for St. Jude easier for merchants with a philanthropic heart.

The St. Jude Donation App’s ‘Explanimation’ video was finished after the launch of the app and landing page. It was featured on the Shopify app listing page.

During Ideation and Prototyping there were several delayed design approvals and pivots while QA was being tested on the app widget, as any timeline for a project that is being tested thoroughly would. While I waited, I found myself imagining colored flat versions of the expansive St. Jude iconography suite and how they would behave in a looping animation.

St. Jude did not have a illustration style or anything close to defined guidelines, so I got to work on this collection with broad creative freedom.

My hope was to prepare a library of ready-made animations that could be used in the how-to video, but the creative direction pivoted to a more serious, straight-to-the-point approach that did not incorporate these.

Keeping the ecommerce theme present, I designed as many icons I could think of that would potentially be useful in any future marketing campaign creative.

An ecommerce iconography set would not be complete without including receipt, order tracking, and user review icons. This part of the user journey might get overlooked by a business since the purchase transaction is already complete, but the user experience is far from over after clicking that ‘Place Order’ button.