Project
Redesign online donation flow for a nonprofit to boost conversion rate.
UX consultant / Product designer
UX consultant, operation manager, project manager, community manager, librarians
June. 2020 - Sep. 2020
Jan. 2021 - Apr. 2021
Product Design Project @ Lightbox Photo Library
Lightbox Photo Library is an art nonprofit dedicated to promoting photography culture in Taiwan by providing free access to limited edition art books, workshops, and lectures. From the user's reflection, we realized that they experienced difficulties donating online. Hence I launched a redesign project to approach this problem from a UX perspective.
In this project, I Led a team of 5 to conduct interviews, UX workshops, usability tests, as well as building up new pages on Squarespace.
Before we started working on the redesign, we conducted interviews with past and potential donors and ask them questions about their motivation, habit, and behavior donating and browsing Lightbox's website to dig more in-depth into how they think.
To ensure an accurate result from the interviews, we conducted a pilot interview with a business partner who had donated online before. After the interview, some wordings are changed to reduce misunderstanding from the interviewee.
To sample accurately, we interviewed a total of 12 participants, including 6 past donors and 6 visitors. During the interview, they were asked to talk about following topics:
Also, they were asked to finish 2 tasks. Including 1) looking for information they cared about before making a donation and 2) donating online through the original website.
I led the team to create an affinity diagram with findings from the interview. In this way, I could make sure that everyone in the team have an idea about interviewees' attitude and experience about Lightbox and donation.
Through the preliminary research, we found out that users had some issues browsing Lightbox's website as well as understanding the content. The main issues including implicit links, unclear accomplishments, and wordy contents.
After the preliminary research, we decided to redesign the landing page to keep users updated on what Lightbox has done recently every time they visit the website. Before I started working on the redesign, I did a quick analysis of the websites of several leading nonprofits to see how they design their landing page. In this phase, I focused on 1) how they arrange the call-to-actions and 2) how they showcase the accomplishments.
In this project, I sketched out the wireframes before building pages on Squarespace. In my design, I combined the structure inspired by other nonprofits and what we learned from the interviews about the information that most users are looking for while visiting Lightbox's website - coming events and the monthly exhibition news.
To fit with the overall style of the website and avoid designing the elements or layouts beyond Squarespace's support. I skipped the phase prototyping on Figma and went straightforward to build pages on Squarespace.
Later, I noticed that while the staffs in charge of all the events are too busy to update the coming events on the website. Instead, they must post events on the Facebook page because it's the main channel for Lightbox to promote the events.
To reduce the efforts for Lightbox staff, I used a Facebook events plugin in the final design and changed the layout to make the plugin fit with the other parts of the landing page.
From the interviews and donation history, we noticed that 1) Users can't recognize "Friends of Lightbox" as the link to make a donation. 2) More than 50% of donors tend to donate without getting perks. To reflect on these findings, I decided to change the information architecture as well as the wording to improve understandability.
From the research, I noticed that donors cared about not only the accomplishments but how these accomplishments related to them. In this case, I quoted some words from google reviews and the guestbook with some pictures of how users enjoy the service to convince people to make a donation.
We conducted user tests with 6 people, including donors and potential donors aged 25 to 44. We found out that 1) those who hadn't donated to Lightbox before experienced problems browsing the donation page. 2) donors are interested in sharing the donation page.
Based on the findings, I realized that although more users tend to donate unconditionally, I should prioritize those who want perks since they are less motivated.
"Oh! It's here! This (View perks button) is so small and I have to scroll all the way down here to find it."
"What's this button (Donate now) for? Why am I still in the same page?"
"I hope there is a share button so that I can share this page (Donate page) with my friends."
Learned how users thought about the donation flow, I merged the donate page and the perks page and prioritized the information about perks. Also, I added a share on Facebook feature so that donors can easily share our site.
From a total of 18 interviews, I led the team to conclude a to-do list based on what users liked, wanted, and needed. We prioritized the issues based on how urgent it was as well as how much Lightbox need it. The issues are not limited to website-related but also those about social media, space, and interests. The team would carry on fix them with what they've learned from executing and engaging in this project.
We checked Google Analytics a month after we publish the redesigned page and found out that there is a boost in the visit rate. The visit rate for April 2021 was 9.16%, while in 2020, it was 1.93%. It means that more people were visiting the donate page without a new campaign.
Compared with April 2020 (28 sec), users in 2021 were spending more time (45 sec) viewing the donate page. As the content is less wordy right now, I believe that users are more interested in the donation plans.
I made a fast donate page as the default link in my first design, and I was confident doing that. However, the reflection from the users changed my mind. While those who would like to donate without getting any perk are more motivated, they would not care to spend a few more seconds scrolling. In contrast, donors who want the perks should be the first priority to concern while designing. This finding reminds me of the importance of user tests and reveals how accurately sampling can make the design better.
In this project, I chose to work with the team instead of doing all the job myself for several reasons; and one of them is to train the team with basic UX concepts and methods. As a growing nonprofit, Lightbox is constantly facing new challenges and adjusting its services in short periods. The 5 phases of design thinking are clearly defined in this project, and hopefully, they will be adopted in the future while Lightbox is facing new challenges.