top of page

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.

Screen Shot 2022-11-11 at 1.57.50 PM.png

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
Current PPI Sitemap.png
Redesigned Sitemap
Planned PPI Sitemap.png

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

Picture1.png
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.  

Screen Shot 2022-12-13 at 12.57.26 PM.png
Screen Shot 2022-12-13 at 12.57.36 PM.png

Next, we moved onto midfidelity wire frames 

Picture1.png
ppi donate page lo fi.png
ppi services page lofi.png

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? 

donatea.png

1
 


2

color1.png
color2.png
bw1.png
bw2.png

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 uses in hopes they become donors? 

WIYF
SkinFix 
bottom of page