Jaimie Malott's profile

UX Case Study: Strategic Compassion Book Website

UX Case Study: Strategic Compassion Website
Introduction:
Strategic Compassion is a book released during my time at Compassion that was intended to challenge religious leaders (pastors, sr leaders of religious charities, etc) to re-examine their tactics and theology around poverty. Our goal was to create a website that would appeal to the specific target audience, and sell a small run of hardcover books . 
Objective: 
The primary goal was to create a user-centric design that facilitates seamless interaction, encourages book sales, and effectively communicates why to purchase this book. 
This website was create to promote book sales through Amazon, as well as be a space for learning about Barry's upcoming speaking events while he served as president emeritus. We aimed to create a beautiful and easy to use user experience (UX) to better serve its audience.

This case study details the design process, focusing on key user tests and revisions as the team learned from insights, visual appeal, and accessibility while maintaining the core mission of the website.

Team:
Brand Design  - John McDonald
Photography - Aveleen Schinkle
Lead UI - Evan M.
Writing - Amber VanSchoodenfeld
UX Research - Jaimie Thom (me)
Developers - Eric DenHollander
Marketing - Dave Cameron
Product Management - Rachel McPherson

Implementation Process:
Brand was established as part of the Book Design process, therefore the website followed a reduced design process, including:


1) Competitive Analysis and Initial Research. Define key audience.
2) Lo-fidelity wireframes
3) Due to deadlines were forced to skip user testing of lo-fi, got approval from internal stakeholders at this stage only, however we had scheduled more testing at this stage as a best practice
4) High-fi designs
5) Moderated, in person user tests with 5 participants vetted as our target audience. During this phase I created working prototypes, wrote and delivered screeners to vet participants, facilitated and recorded the tests, took notes on their feedback, analyzed the results for trends and disseminate the findings to the project team. 
6) Design Revisions
7) Development (WordPress)
8) Launch + continuous improvement based on user insights and evolving requirements. Measured key KPI's like time on site and user behaviour using HotJar and Google Analytics. 

Products:
- WordPress
- Abobe XD for prototyping
- Zoom (for recording user tests)
- HotJar
- Google Analytics

Header Before Revision
Research:
This project was one of the more interesting research projects in my time at Compassion because of how clear the results came out of the usability tests. Never in my time have there been such clear shared opinions pointing to clear improvements, making this an excellent project for UX research.  

Competitive Analysis + Market Research : Analyzed similar platforms to identify best practices and areas for improvement.

Usability Testing: Performed usability tests on high-fidelity prototypes (Which I created  Adobe XD) to pinpoint specific useability feedback and gather insights for improvement with our target audience. Actions included making a working prototype, writing a recruiting script and screener criteria, writing test questions and activities for our participants to act on throughout the test. Final steps were to consolidate all the feedback, look for key usability insights and common themes with participants, and present findings to the product team.

Findings & Design Iterations:
1) Users did not like the headline of the site (pictured above). On the screener, I had asked the question how likely our participants would be to read the book, based on the cover and their knowledge of Barry and his career. 100% of our chosen partisipants said yes, they were highly likely to read the book. On showing them the website however, 100% of participants being tested requested to change their answer to highly unlikely to read the book because of the "Plan B" language in the header. When asked further clarifying questions, answers such as the unintentional association with birth control, and the theological black and white nature of the statements were the top reasons for this change. 

Resolution: We resolved the header concerns by changing the quote from the book in the header (See image below) to better represent the correct intended nature of the message. 

2) Accessibility Concerns: Some users reported difficulties in reading parallax headers. Although large fonts were used, the users reported that they started to fade before the user could digest them on the screen.  

Resolution:  The animations were modified in subsequent versions of the design to stay on screen slightly longer and remain slightly darker behind the copy. Alt text was adjusted for screen readers. 

3) Checkout process unclear - Because of some business complexity being a charity, creating a payment portal for the order this book was a challenge. We weren't allowed to create a payment section, so the checkout initially created for this product wasn't a familiar one: it worked on an honour system that you would pay after receiving your copy of the book, which, not surprisingly, was very confusing for our users as it's not a familliar design. 

Resolution: Because testing proved our suspicions that an unconventional system was not necessarily better than no system because of the confusion it caused, we decided to move to the payment handling to amazon.ca in order to allow for a more familiar checkout process for our users and to work around internal business complexity caused by a payment portal that was not a donation.  
Header After Revision
Results:
Book sales: Compassion sold or gifted (as thank-you gifts) the entire first run of the book, 2500 copies, and did a second print run of 2500 copies in 2019, doubling the initial sales expectations. The intuitive new checkout design and clear calls-to-action led to a higher conversion rate over other print material Compassion offered, contributing to the organization's mission of helping children in need.

Improved internal processes: this was the very first project at Compassion where we engaged users as part of the design process. Because of the feedback received and how narrowly we missed disaster by using a quote that would have hindered sales in the heading, the team became more open to adopting user-first thinking and practices into our everyday rhythms going forward. 

Improved User Engagement:
The redesigned website saw increased user engagement metrics, including longer session durations and reduced bounce rates, and few misconception questions expressed to our customer service team.

Enhanced Accessibility: Accessibility improvements resulted in a more inclusive experience, accommodating users with disabilities and providing equal access to information.

Increased reach and understanding: of international development by key leaders. This opened doors to conversation partner with appropriate key leaders looking to support Compassions mission of releasing children from poverty, contributing to their mission. 


Conclusion: 
Through user-centered design principles and iterative testing, the redesign of stratigiccompassion.ca successfully transformed the user experience from an almost disastrous misunderstanding above the fold to multiple print runs of the book being published. This iteration made a difference in the ease of use for visitors to engage with the organization's mission and contribute to positive change in the lives of children around the world.
UX Case Study: Strategic Compassion Book Website
Published:

Owner

UX Case Study: Strategic Compassion Book Website

Published: