Defining the Problem

After the stakeholder interview and initial user feedback, I did a quick heuristic analysis to identify the major errors. I found a competitive analysis very helpful to show how other organizations were handling donations.

Now it was time to explore a little deeper and to talk to some new users to get their first impressions of the site.

While there was some interest in the multiple ways to donate, overall insights showed that users did not trust the site, and were hesitant to donate. They wanted to know where money was going, and wanted a more clear understanding of what Compassion Without Borders does both as an organization and with funding. Navigation issues also served as a barrier to this goal. This led to the problem statement:

Design Process

From these insights, I I developed sketch wireframes to put information needed upfront. In an effort to build trust , I showcased the CWOB process and what they do when they rescue animals, told users why funds help and where money goes in a quick video, highlighted the organization’s mission, and included the Candid (guide star) logo for transparency.

Users struggled to find information they were looking for on the site. Since there is a great deal of information and different types of users on this site for different programs, I suggest a search FAQ section for users to get help finding information, before feeling overwhelmed and leaving the site altogether.

Another interesting finding was that once reading the "why" and learning of programming, users were more compassionate toward the cause. So in the initial mobile wireframe for this project, “Why” had it’s own page to direct users.

During the initial interviews I found users loved the animal stories. Even if they didn’t want to donate, they wanted to learn about the dogs and see pictures of rescues. Animals were showcased in the design by creating rescue profiles like a dating profile with information about the animal. This would be fun and enjoyable for users but also build user empathy and aid in adoptions

Prototyping and User Testing
After wireframe feedback, I developed a prototype in Figma to prepare for user testing. More of an introduction was added to the initial home screen while “what we do” was moved to an additional page. The home screen was adjusted to highlight the most important information - First, images of animals, the mission, and donate CTA, Followed by large button links to “Why help”. “What we do” and “Get Involved” pages for more information.

After the first round of user testing through Lyssna, further adjustments were made. Users wanted easier access to donations and information on other ways to support the organization. First, to highlight more of what the organization does, I included a goal coupled with a quick donate section on the home screen. On the donation pages, additional support options were added.

A second round of user testing provided suggestions of reorganizing the home screen tiles, changing the hero image, including logos of partners on the donation sections and also including donations as an option on the Get involved page.

The searchable FAQ page was broken up into sections for donation, adoption and programs to further assist different user types.

The overall design also better utilizes CWOB’s existing video content by peppering them throughout the site on all the pages to provide more information and connection in those spaces.

Results

The final prototype showed increased clarity about the general idea of Compassion Without Borders. 83% of users tested would donate to the site, When asked which top 5 words they would use to describe the site, the highest answers were “Appealing, Attractive, Engaging, Friendly and Clean.”