Project

Lightbox Photo Library Online Donation Flow

Redesign online donation flow for a nonprofit to boost conversion rate.

UMove Hero Picture
Role

UX consultant / Product designer

team

UX consultant, operation manager, project manager, community manager, librarians

Duration

June. 2020 - Sep. 2020
Jan. 2021 - Apr. 2021

Project Type

Product Design Project @ Lightbox Photo Library

Challenge

How may I improve Lightbox's official website's conversion rate?

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.

Design Overview

01

Informative Landing Page

Provide information user cares about at the landing page

02

Visualized Donate Page

Communicate with pictures, buttons, and proper visual hierarchy
Research

Conducted interviews & usability tests

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.

Facilitated workshops to keep everyone on the same page

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.

A affinity diagram showing the findings from preliminary interviews

What've we learned from researches?

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.

Issues needed to be addressed

Implicit Donate Page

The wording and the layout made it hard for users to find the donate page.

Unclear Recent Accomplishments

Updates were not clearly shown, which made users unconfident about Lightbox's current status.

Wordy Contents

The content was too wordy that users are impatient to read them all.

Design:
Landing Page

Researched on similar organizations

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.

A comparison of website structures of SFMOMA, Photoworks, British Museum, and MET

Sketched wireframes & built on Squarespace

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.

The Sketched wireframes and a web page based on the sketch

Design iteration & final design

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.

Design:
Donate

Re-organized information architecture

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.

The information architecture of the donating section

Sketched wireframes & built pages

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.

The sketched wireframes and the pages of the donate page and the perks page

User testing & design iteration

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.

Final design

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.

Follow-up plans

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.

Impact & Reflection

Impact

Visit rate increased by 470%

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.

Average time on page increased by 160%

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.

Reflection

Consider users with different levels of motivation

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.

Teaching a man how to fish is better than giving him a fish

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.

Thanks for watching! You might also be interested in...