Company:
Compassion International

Product:
Compassion Causes

Summary:
I worked on the redesign of Compassion’s new product, called Compassion Causes. In this case study, we will focus on the Cause Detail redesign and how we improved that experience. This project is aimed at launching in Guatemala, El Salvador, Brazil, the Dominican Republic, Burkina Faso, Rwanda, and Thailand.

Team:
LERMA Agency, Senior Creative, Content Team, Software Development Team, Product Owner

My Role:
User Research, Wireframes, High-Fidelity, Prototyping

Tools:
Figma, After Effects, Photoshop,
Principle

Length:
8 Weeks

Position:
Lead UX Designer

Utilizing AI to help with Surveys

Positive Aspects

Suggested Improvements & User Interviews:

For the past 2.5 years, I've proudly served as the Lead UX Designer on the Compassion Causes team, focusing on pioneering a new and innovative product for Compassion. Our journey began as an internal initiative and has now evolved into the implementation phase, with phase one poised for launch in the United States, followed by expansion to six additional countries.

What is Compassion Causes?

Compassion Causes is a platform dedicated to uncovering and addressing urgent needs among children and communities living in poverty. Through this fundraising initiative, you can actively participate by offering prayers, raising awareness, and making direct donations, thereby creating a lasting impact.

Core Stakeholders

  • VP of Product

  • Lead Product Owner

  • UX Manager

  • Senior Manager of Software Engineering

Measures of Success

This case study specifically focuses on the Cause Detail redesign. Since this experience was not set to go live immediately, our core measures of success were centered on usability tests and user feedback.

Immediate :

  • Increased feature engagement

  • Overall satisfaction increase through Google forms

  • More clarity for our users


Down the road once live:

  • Increased click-rate on modules

  • Increased donations

Redesigning the Cause Detail Experience

When our initial Cause detail page was created, it was created to do the bare minimum of donating to a Cause.

Some of issues we are identifying at a glance:

  • Since its doing the bare minimum there is a lack of information and only info about the Cause.

  • It doesn’t show who made the Cause so there’s a lack of transparency.

  • Its kind of a dead end after one Cause

Business Challenge

  • Finding investors can be a challenge, especially for non-profit driven campaigns.

  • Knowing how much money to ask for

  • High Competition business

  • How transparent should we be?

Business Goals with this Redesign

  1. Build trust with our users about who is positing Causes, details about them, and how they can follow the organization.

  2. Display a Cause where we put out a better user experience to really visualize the need and the cultures that the user would be supporting.

  3. How can we keep the user interested with other Causes so we can have a consistent flow while looking at other Causes they may be interested in.

User Research

At this point in the UX Process, I decided that is was time to gather some user feedback in the form of a brief Google Forms Survey. We had a group of people that have made donations to Causes before and we had direct access to people posting Causes.

I did a couple basic prompts in Chat GPT to help assist me with finding good survey questions. Each prompt that I did came with a set of question.

Frustrations and Pain Points

20

Survey Questions

I came up with a 15 question survey that utilized help from Chat GPT but we also added some questions in there that we felt could give us some really good feedback. We sent it to 20 users. Of these 20 participants, 15 were existing Compassion donors that have used the website before, and 5 were Compassion Cause uploaders.

In this survey it focused on: Presentation, Accessibility, Emotional Engagement, and Trust & Credibility.

Survey Results

Responses

Duration

60%

Satisfaction

Overview

Problem Statement

Randy needs a trustworthy website where he can find Causes/projects that he is passionate about and feels confident donating to because there is a lack of websites that focus on global poverty small projects.

5m

We gave our survey participants a couple days to complete the survey. They received it over email the responses were not surprising. We had an overall satisfaction level of 60% for our very basic Cause detail page. These insights gleaned from the open-ended questions that provided textual feedback. Based on the sample of qualitative responses from the survey data, here are some of the insights into the frustrations, pain points, and positive aspects mentioned by the participants in the survey:

  1. Not enough information: Users felt like they needed to be more informed to understand.

  2. Look and feel: We got feedback that the page was too basic and lacked any visual interest.

  3. Missing Features to feel trusted: Users wanted to feel confident when making a donation and there was not enough information there to make it feel trusted.

  4. Lack of Interest to Continue Browsing: Not a lot of push to keep browsing or see suggestions.

There was not a lot of positives unfortunately. Some of positives that we got were:

  1. They loved the idea of Compassion Causes but it seemed like it needed work

  2. Users felt like they had no problems with accessibility

At the end of the form we asked participants if they would be interested in diving into a quick User Interview to ask them about some of this feedback and we got 5 candidates that agreed. In these interviews we asked more detailed questions to get better core feedback on what they felt like was missing. So the suggested improvements are a combination of these user interviews and the data we got back from the surveys.

  1. Not enough information: We need to make it more transparent on how this church is going to be contributing.

  2. Staying up to date with the Cause poster: Currently there was no information about about who posted the Cause and users want to stay connected.

  3. Browsing experience: Its currently a dead end experience so ways to view more Causes.

  4. Mobile Design: There was a lot of scrolling before having the ability to donate to a Cause.

  5. Aesthetic was not interesting: In our current design its focused on 1-2 colors and it doesn’t express how global our content is.

Persona Workshop

One thing that was important for us was making sure we we’re on the same page on who we’re designing for so we did a team persona work shop that including me (Lead UX Designer) , an Additional UX Designer, Creative Designer, and Two Product owners. Below you will see the persona that we came up with.

Meet our User

Reframe the Challenge

How might we redesign the Cause detail page to help users like randy find, view, and donate to a cause that they trust and are passionate about?

The Why

Other Issues at a glance:

  • It doesn’t show who made the Cause so there’s a lack of transparency for donors.

  • Old and outdated UI

Mobile at a glance:

  • You have to scroll to the bottom to give or share

  • Not a lot of information at a glance


Remote & In-Person Ideation

Throughout the process, we facilitated remote collaboration with weekly iterations involving the product team, alongside weekly collaboration with the software development team with countless check in’s with our core stakeholders.

Additionally, we organized an offsite meetings in Colorado to collaborate closely with members of the Compassion Causes team. During these sessions, we discussed overarching plans, reviewed low-fidelity wireframes, examined high-fidelity designs, and refined the overall sitemap. The dynamic nature of these discussions posed challenges, requiring quick thinking and rapid problem-solving to address issues before we presented solutions to the team.

Low Fidelity Iterations

We had a lot of really good idea’s from our sketches. We did countless iterations of the Cause detail page that focused on:

  • Who created the Cause and what country that church/community is in.

  • Different ways that we could show Cause photos

  • Different ways that we can show how the church is contributing with physical resources, human
    resources, and financial resources.

  • About the church section where they can follow the church

  • Multiple different ways that the user can continue browsing like Other Causes from this church,
    Other Education Causes, and Other Causes from that country.

Usability Testing

I conducted five usability tests using a Figma prototype. During each session, participants shared their screens while I asked them questions via Zoom. Each interview lasted no more than 30 minutes and we entered in their answers into a Google Form and we were able to get an average satisfactory level from their answers and feedback. Overall, we achieved a 91% satisfaction level, up from 60% previously, marking a 31% increase. We also saw an average clarity level of 90% from our participants.

Prototyping in Low fidelity

After many iterations in low fidelity, we landed on a design that we felt like achieved what our users were looking for. We presented numerous times to our stakeholders and they were more then happy with the results.

Fixing a Problem with an
Existing Component.

New Brand Identity

A major highlight of the Compassion Causes redesign was the introduction and implementation of a new brand identity.

This comprehensive overhaul included updated colors, typography, images, icons, patterns, and illustrations. I was thrilled to not only work with this new branding but also contribute to its creation, particularly with Compassion's first product to feature it.

As part of our new branding, we created over a hundred new icons and illustrations. While most of these won't be immediately incorporated into the design, we look forward to gradually adding them as they receive approval.

For the mobile experience, our biggest challenge was ensuring that users always had an action available, whether it was donating or sharing.

To fix that, we turned those actions into a sticky footer.

This grid component existed already in our design system but we had an “Aha moment” when we came up with the idea to use it for our photo header rather then one large photo.

This solved:

  • Upload resolution issues

  • Different Aspect Ratio photos

  • No photos in the content

  • More photos at a glance

Test Results

Usability Tests

Iterations

91%

Satisfaction

5

8+

Hi Fidelity

Below is the home page and the Cause Detail page. Both of these focused on pushing impact with each project to get the most out of donating to a Cause.

Summary of what’s improved?

Mobile/Desktop:
- New UI Implemented
- New Desktop/Mobile Image Viewer
- Mobile Sticky Give Now/Share CTA
- Donation Activity
- Who Created the Cause
- So much transparent information for users!






For the User

All of these changes are for the user in mind. We added so many new changes the helped the user feel confident when making a donation to a Cause.

Gamification now
and In the future

Our design goal was to create a fun, engaging experience, so we added subtle gamification elements, like confetti when a project is fully funded, to boost excitement whenever users visit the page.

To enhance our gamification strategy, we're planning to introduce icon badges in a future update. Concepts include badges like 'First Donor,' 'Top 5 Donor,' 'Latest Donor,' and 'Top Donor.' These badges are designed to instill a sense of pride and excitement in users when they contribute to a Cause.

Final Prototype

This was the final prototype. With this prototype we were able to present to
our core stakeholders and work with our software development team to have them
know exactly the direction we’re heading.

Utilizing the Illustrations
for Profile Icons

On the left, you'll see various examples of how we plan to incorporate illustrations into the icons. These illustrations not only enhance the visual appeal but also contribute to creating a playful and engaging environment. By integrating these elements, we're adding a layer of gamification that makes the product more enjoyable and interactive for users.

These elements are slated for release in a future update (V2) and won't be included in the initial launch.

Icon Badges in the Future

Where is the rest of the site going?

Check out some quick examples of what direction the rest of the site is going.

Below you will find different examples of the redesign. These examples include the homepage, Cause Category page, Almost Funded, and Stories of impact.

Development , Handoff, and Documentation

During design, we involved developers in project discussions to ensure alignment on design and address technical challenges. We include detailed annotations and design artifacts to facilitate smooth handoff from design to development. Handoff conversations at the end of the design phase clarified expectations and resolved any potential challenges, ensuring alignment across teams.

Revisiting Measures of Success:

Takeaways:

Immediate Results:

  • Increased Feature Engagement: During usability tests, users fully understood the features we created and engaged with them with little to no guidance.

  • Higher Overall Satisfaction: We observed a 31% increase in user satisfaction, rising from 60% to 91%, as measured through Google Forms.

  • Improved User Clarity: Users reported an average clarity level of 90%, indicating they understood all the provided information.

Future Expectations:

  • Higher Click-Through Rates and Donations: Once the full redesign is live, we anticipate increased click-through rates on modules and a boost in donations, serving as additional measures of success.

Overall, I found great satisfaction in contributing to this project. It was especially fulfilling to be part of the team that implemented a fresh brand identity for a new product at Compassion, an organization with a rich history. We kept the user at the forefront, focusing on their needs as donors to our platform.

I also enjoyed incorporating AI into my design process and look forward to integrating it further as more AI tools become available in Figma and other platforms.