Rise Interactive
Redesigning the American Lung Association's Website
Background
Rise Interactive is a digital marketing agency in Chicago. I contributed to a couple of different projects while working for them as a Contract UX Designer, but most of my time was spent on redesigning the American Lung Association's website. When I came onto the project, the user research, site-mapping, and some early wireframes for the site had already been completed. Thus, I was responsible for creating most of the wireframes for the American Lung Association's redesigned site​. In the end, my redesign of the site led to a 39% increase in traffic and a 51% increase in average session duration.
Tools
Sketch
Skills
User-Centered Design, Interaction Design, Wireframing
Final Deliverable
Series of Low-Fidelity Annotated Wireframes
Process
My work on the ALA redesign was split into 3 sprints:
-
Donation Page​ & Form Elements
-
Listing Pages & Search
-
Event Listing Pages & Get Involved Page
For each of these sprints, my process looked something like this:
For a more in-depth look at what this process looked like in action, please visit this page on your desktop.
Donation Page Case Study
Here is an in-depth look at what this process looked like in action during one of these design sprints.
User Research
Before I started on this project, a series of interviews was done, and from this a series of user personas was created. There were 9 primary and 5 secondary user personas that each represented the different types of people that might be using the site.
​
After analyzing the personas, some of my key takeaways that were relevant to my work on the donation page included:​
Users want to understand the full impact of their donation.​​
The donation process couldn't take a long time or be hard to figure out.
There needed to be an easy way for users to donate to a specific person's fundraising page.
Whiteboarding
After catching up on the research that had been done, I had the opportunity to participate in a whiteboarding session where I worked with designers, developers, and project managers to map out exactly what the page needed to include and some potential ideas for how to lay everything out.
Market Research
I then started taking a look at the donation pages of similar organizations in order to understand some of the strategies they use to try to maximize donations. From this, I was able to get a good sense of how these forms are typically laid out and a was able to figure out how things like opt-ins, monthly donations, and memorial donations are generally handled.
Juvenile Diabetes Research Fund (JDRF)
American Cancer Society
American Heart Association
I also spent a lot of time learning all about past research that had been done regarding how to maximize conversion rates when designing donation pages designing donation pages. This ended up being quite difficult because a lot of the research I found either used small sample sizes, or conflicted with something else I had already read.
Round 1 Wireframing
The main deliverable for each sprint was a set of annotated wireframes. On the right side of the wireframe is some short blurbs for the client explaining the reasoning behind some of the design decisions I made. On the left are some annotations that explain any extra details about page elements that couldn't otherwise be shown in a static wireframe.
(Click to image to expand)
Feedback and Revisions
After completing the first set of wireframes, I presented them in an internal review with a group of designers, developers, and project managers. Then, once these wireframes were approved, they were presented to the client. From there, the process involved some back-and-forth with the client about revisions until I was able to get final approval.
Here is a look into some of the main changes I made during this process:
Hero Image
Round 1 Wireframe
My original goal with the 'Your Impact' section was to remind users exactly why they were donating to this great cause, and hopefully entice them to give more. However, the client felt that there was too much going on at the top of the page, and users should already be sold on the impact before they get to this page, and I agreed.
Final Version
The solution I decided on was to have a plain static image with some basic text in order to minimize distractions.
Donation Type and Amount
Round 1 Wireframe
Post-Internal Review
The round 1 wireframe housed both Honorary & Memorial Donations and Event Participant Donations as expandable sections within the main form. However, during the preliminary internal review, I found out that these features would need to be housed on separate pages.
The Event Participant Donation section was a new feature we chose to implement in order to This was a new feature for ALA so we weren't sure how we would be able to implement it right away, so I ended up designing a couple of different versions of how it might work.
Eventually, it was decided that they would build out a way to search for participants by name on their end at a later date.
Client Revisions Round 1
In my first wireframe, I handled monthly donations the same way that most competitor sites did: by having radio buttons that let users quickly toggle between making monthly and one-time donations.
​
However, due to some internal requirements for the client, monthly donations had to take place on a separate page.
​
The client also wanted donation amounts to be ordered from high to low rather than low to high. I had found research that went both ways on this, so changing it wasn't a problem.
Client Revisions Round 2
Another thing I focused a lot on was finding the best way to lay out the links to the three other ways to donate. Originally, it felt too cluttered and distracted from the donation process.
After designing a few versions and discussing with the client, we eventually decided on the one you see below in the final wireframe.
Final Version
Payment
Round 1 Wireframe
After speaking with the client, we agreed that the process of paying with Paypal was too complicated. After clicking the Paypal radio button, users would have to submit the form in order to be redirected to the Paypal website, and we agreed that this could be confusing for users.
Final Version
My solution to this was to instead have a Paypal button that would immediately redirect users to the Paypal website, and any info they already entered would be automatically transferred to the Paypal form.
Final Wireframes
To see the final published version of the ALA donation form, click here (and feel free to donate if you'd like).
​
In the end, my redesign of the site led to a 39% increase in traffic and a 51% increase in average session duration.
Event Listings
User Research
Before I started on this project, a series of interviews was done, and from this, a series of user personas was created. There were 9 primary and 5 secondary user personas that each represented the different types of people that might be using the site.
​
After analyzing the personas, some of my key takeaways that were relevant to my work on the donation page included:​
Users want to understand the full impact of their donation.​​
The donation process couldn't take a long time or be hard to figure out.
There needed to be an easy way for users to donate to a specific person's fundraising page.
Whiteboarding
After catching up on the research that had been done, I once again participated in a whiteboarding session where I worked with designers, developers, and project managers to map out exactly what the pages needed to include and some potential ideas for how to lay everything out.
Event Listings
Old Design
In the old version of the site, the process for finding an event to participate in was extremely difficult. Users would first need to choose the type of event they wanted to participate in.
From there, they could see a list of upcoming dates for the event, but sometimes there weren't even any in their area (as shown here).
Preliminary Wireframes
In the old version of the site, the process for finding an event to participate in was extremely difficult. Users would first need to choose the type of event they wanted to participate in, and from there they could see a list of upcoming dates (if there were any in their area).