Client
Planned Pethood International
Location
Denver, CO
Date
September 2022, 3 weeks
Team
Esther Yi, Hannah Stafford, Rain Channarong and myself
Tools
Figma, Notion, Miro
A redesign for a greater cause.
We teamed up with a non-profit working to provide low cost vet care and end economic euthenasia in order to improve their site's UI and increase donations.
Planned Pethood Redesign
The design challenge
How might we create a website that helps users feel they can trust our client and make a monetary donation based on their website?
As a nonprofit organization, PPI relies on the generosity of their donors to exist. Their website’s confusing layout and difficult navigation is a missed opportunity to make an appeal to potential donors.
The Client & Objective
Planned Pethood International's mission is to provide low cost veterinary care and spay and neutering services to clients of all backgrounds and incomes. and to help control the pet population and end economic euthanasia. Our team of 4 worked with this local non profit to help update their very outdated website and therefore increase their donations.
By utilizing research, ideation, prototyping, and user testing, we were able to redesign the website thoughtfully in order to redirect users’ focus to donations all while still highlighting the important work PPI does for the community.
Research
Our very first task was to begin to understand the user of this site. Before any reaserch was done, we attempted to create a persona that might fit PPI's typical client. Pam is a pet owner who would use the clinic's services, but may or may not donate money. We agreed it was important to keep these users in mind as well when building the site.
We used surveys, interviews, and personas to pin point the users. As we conducted interviews and surveys to collect qualitative and quantitative data, we found some interesting insights.
Something particularly noteworthy from the survey results was that those who give money as a donation do not feel that they need to know where exactly their money is going but instead, feel most confident when they can trust the organization overall. This helped inform some important decisions in our design phase.
After talking to more users, we began to see a specific persona unfold for the donor. Our user person, Morgan, feels that giving her time and money back to her community is the right thing to do, but wants to ensure that she is choosing the right organizations and non-profits to help and the easiest way for her to do that is to find updated and reliable information from their websites.
Define
User Insight Statement
Potential donors interested in contributing to the continued efforts at Planned Pethood need a clear, easily navigable website that looks professional, trustworthy and contains enough reliable information about the organization that they feel inspired, confident and secure when making a donation.
Problem Statement
Planned Pethood International (PPI) has many exciting projects coming up, but as a non-profit organization, they rely on donations to exist. By redesigning the PPI website in a more organized way, users will feel more compelled to donate, which in turn will result in better services and resources that PPI can provide them.
Opportunities for UI Improvement
Logo overlaps with text
"Donate Now" button hidden
More colors and variety in the layout would made it easier to follow
No search bar,
outdated or non-working links
Lots of text and no heirarchy
To help improve the website's asthetic and overall functionality, we needed to reorganize the sitemap. We performed a card sort to figure out how we could better display menu options. We decided to focus on 3 main pages of the website for our redesign. The client was unable to provide analytics so we determied these pages thrugh our own user testing: the homepage, the services page, and a donations page.
Original Sitemap
Redesigned Sitemap
Next, we laid out a simple user flow with our vision for the Services page and the new Donations page. Some important issues needed to be resolved on the current site to build trust with users. The issues were this:
The current link takes you to an external page, making the donation experience feel detached from the organization.
Users commented that they don't always have the means to donate money, but prefer to give time, resources, or link frequently shopped accounts (Amazon or grocery cards) as a way to give. We wanted to include these options in the design.
1
2
Design
Moving onto the fun part! We of course began our design with basic low fidelity wireframes so that we could see where eveything needed to go.
Next, we moved onto midfidelity wire frames
Our first focus was cleaning up the hero image (and choosing one strong image to replace the cariousal of blurry photos on the current site) and redesigning the donations button to make it a bold call to action. Furthermore, since donations were their primary KPI, we wanted to increase the opportunites to donate across the site. We added a section about half way down the page, after the mission statement and the chnance to learn more about what they do and who they are (ie building trust) we included buttons with specific dollar amounts so contributors can make a decision on the amount early on.
UI Style Tile
A/B Testing
Our design was finally coming together, but did it achieve the objctives we had set out to fix? In order to find out we started doing usability testing.
We has two design choices to make that we felt could be solved with some A/B testing.
We asked users which "Donate Now" button caught their attention first between these two options:
OR
We asked users if they prefered color or B&W photos for the site?
1
2
What we found was the the yellow button with it's hover interaction was the more appealing button for the site. Furthermore, we recieved feedback that the black and white photos of the animals actually felt sad. Our stakeholder had said in our initial conversation that he wanted the site to feel inviting and friendly, and so we felt it was necessary to make sure we captured that.
Usability Testing
From there, our team moved onto usability testing. We laid out a set of tasks we wanted to observe users completeing so we could look for any missed opportunities in the design or areas to improve. Our testing informed of us some protoyping errors and areas where the UI felt confusing. We realized there were a few ways we could simplify navigation and make it easier for the user to recognize their location on the website.
Questions for Future Iterations
How might we bring in more support and donations for PPI through fundraising events featured on the website?
How might we make it easier for clinic patrons by allowing an option for them to book their appointments online?
How might we continue to build trust with users in hopes they become donors?