Pet shelter website redesign
A redesigned platform for an animal shelter, built on user research to make pet adoption clearer, more trustworthy, and easier.
Project Summary
This project focused on redesigning a local pet shelter's website to improve how adoption information is communicated online. Research and interviews revealed four major pain points: overwhelming forms, unclear pet details, limited access to information, and little transparency around adoption steps.
Following a full UX process—from initial interviews and iterations to wireframes and usability testing—the redesign introduced a friendlier form, clearer pet profiles, and structured navigation. Tested with 9 participants, the prototype received positive feedback: users described the forms as approachable, the information easier to follow, and the journey more supportive.
Key results
•
Redesigned the pet shelter's website to present adoption information more clearly
•
Identified 4 key pain points through initial research interviews
•
Applied a full UX process including personas, journey mapping, HMW, iterations and wireframes
•
Ran a remote usability study with 9 participants interested in adoption
•
Introduced clearer pet profiles, structured navigation, and a more approachable adoption form based on insights
•
Prototype received positive feedback: users described it as clearer, more structured, and easier to understand
1. Context & Research
Context
Having adopted two cats from a shelter, I was already familiar with the effort and emotional investment the process demands. After relocating to Spain, a friend shared her experience adopting a pet in Barcelona, and I was shocked by how much more complex and demanding it seemed here. This encouraged me to research how local shelters operate and what might make the experience so challenging. From this initial research, I selected one shelter’s website as the focus of a redesign concept.
This project was created solely for learning purposes and is not affiliated with the organisation.
Interviews
To gain a deeper understanding of the adoption process in Barcelona,I interviewed recent adopters from local pet shelters. Most conversations were held over Zoom, as it was more convenient for participants. My goal was to explore their experiences, uncover recurring frustrations, and identify where the process could be improved. After gathering all interview notes, I analysed the findings and created an affinity map to organise feedback into key themes. This process revealed four main pain points that significantly impact the adoption experience:
Repetitive / Overwhelming Questionnaires
Forms are lengthy, repetitive, and must be filled out separately for each pet
Unclear Website Information Structure
Adoption requirements, pet info, process steps, and guidelines are messy, making it difficult for users to find necessary info.
Limited Access to Reliable Answers
Adopters struggle to get quick, trustworthy information, resulting in repeated calls and emails that slow down staff.
Lack of Process Transparency and Flexibility
Adopters are not notified about updates in their case and have no option to schedule appointments in a convenient time slot
Considering the scope of this project, I focused on the first three pain points. The fourth point — improving process transparency and flexibility — has been kept for future investigation and potential implementation. This enhancement could take the form of a complete user profile setupthat would allow adopters to track their case, receive timely updates, and schedule appointments at convenient times While requiring an initial investment from the shelter, it would ultimately reduce administrative workload and allow more time for animal care.
Personas
After talking with recent adopters and learning about their experiences, I created personas that reflect their goals, frustrations, and adoption habits. These profiles helped me keep the redesign grounded in real user needs and ensure that solutions addressed their actual challenges.
User Journey
Using what I learned from the interviews and personas, I mapped out the user journey to see how the adoption process works today. It gave me a clearer view of the pain points and opportunities to make the process easier for adopters and less stressful for shelter staff.
How Might We (HMW)
Based on my research, I developed "How Might We" questions to define the real challenges. Working alone, these questions helped me focus on user needs and avoid early biases. This kept my design process rooted in solving real problems.
How might we reduce repetitive adoption form questions so the process feels faster and less overwhelming for users?
How might we give adopters clear, reliable information about the adoption process and basic pet care without overloading shelter staff?
How might we make adoption requirements, pet info, and process steps easier to navigate through a clear and logical website structure?
How might we simplify the adoption application process so it’s faster and easier for adopters?
2. Ideation
Site Map
Redesigning the site map was a crucial first step toward creating a clearer structure, as the previous version lacked consistent organisation. The new layout simplifies navigation, prioritises key actions, and reduces unnecessary clicks while making adoption information and ways to support the shelter easier to find.
Brainstorm Sketches
During the brainstorming phase, me, Buho and Simba sketched layout ideas, using research and interview insights as a solid base. The website was already designed but cluttered, so it was important to make it clearer for users and ensure the shelter's key sections were easy to find, helping people access necessary information faster.
3. Design
Mood & Colours
The design was built on the shelter's existing brand colours - a deep teal and a pale, muted teal - which appear in their logo, printed materials, and merchandise. A full rebrand would have been costly and impractical, so my goal was to keep these core colours while adding warmth and brightness, elements I associate with pets. The aim was to convey those feelings to potential adopters right from the homepage, while ensuring colour contrast meets accessibility standards for readability.
Typography
I kept the same fonts the shelter was already using — Fredoka and Lato — for the same reason as with the colours: to maintain brand consistency and avoid unnecessary rebranding costs. Fredoka adds warmth and friendliness, while Lato provides clarity for key information.
I used the Material Design 3 type scale and consistent text styles to create a clear hierarchy across the site and improved consistency in typography use, making the content easier to read and giving the site a more unified feel.
Key Components
To keep the design consistent and make updates faster, I built reusable components such as buttons, cards, navigation, filters, forms, etc. My goal was to bring the same friendliness from the colour palette into these elements, so they not only function well but also create a welcoming feel for potential adopters.
Original Designs
New Hi-Fi Designs
After carefully reviewing the old screens, my sketches, and the research findings, I designed the high-fidelity version with a clear focus on accessibility, usability, and visual balance. Since the shelter cannot afford a full rebrand, I kept their existing colours and typography for consistency, while refreshing the look with warmer, joyful tones that reflect the spirit of animals. The goal was to create a design that aligns with the shelter’s identity,makes it easier for adopters to find the information they need, and feels welcoming while reflecting the spirit and warmth of the animals.
4. User Testing and Iterations
User Testing
I conducted an online, unmoderated usability testusing Useberry, divided into three parts: a design comparison, three adoption-related scenarios, and general website feedback.
The aim was to see if the redesign made the process simpler and clearer for users, while identifying areas for further improvement.
I did not get as many participants as initially planned, so I expect to run another testing round later to validate the results more thoroughly.
9 participants :
•
planning to adopt soon or have previously adopted from a shelter
4 users tested mobile version
•
100% completion rate
5 users tested desktop version:
•
80% completion rate ( one participant didn't complete a task simply because they didn't read the task instructions.)
Part 1 - Old vs. New Design
Action taken: Validated that the redesigned layouts for key pages (Adoptable Cats, Cat Profile, Questionnaire) improved clarity and visual appeal — no major changes required at this stage.
Participants compared screenshots of the old and redesigned versions of the following pages:
- 1. Adoptable Cats listing (all available cats)
- 2. A specific cat's profile
- 3. The adoption questionnaire
They then selected their preferred version and answered follow-up questions explaining their choice.
Part 2 - Task scenarios
Action taken: Noted feedback on “Adóptame” wording but, after competitor analysis and confirmation with a Spanish language specialist, decided to keep it. No immediate changes needed for these tasks.
I tested three real-life scenarios based on typical adoption flows:
1.
Find a specific cat - Imagine, you want to adopt a cat, called Cleo. Find Cleo's profile and open it to learn more about her.
2.
Evaluate her profile - Review Cleo's details (character, health, photos, videos, etc.). Specifically, verify if she can live with other animals and if she's vaccinated.
3.
Prepare for adoption - Find out how the adoption process works, what is needed at home before adopting, and where to start the adoption process online.
Part 3 - Overall Impressions
Action taken: Positive results confirmed the redesign direction. Moved forward with the next redesign tasks identified during my initial interviews, informed by this study’s insights
Participants shared their general thoughts on the website, including likes, dislikes, and suggestions for improvement.
Based on the usability study, it was clear that the redesign improved clarity, navigation, and overall trust in the site. The positive results confirmed that the changes were moving in the right direction, while the feedback highlighted specific areas for refinement.
Prototype
Reflection and Next Steps
Reflection
This project was especially meaningful to me because of my long-time care for animals and earlier involvement in shelter events.Contributing to a smoother adoption process felt rewarding, as shelters often do incredible work with very limited resources.
Balancing this project alongside my wedding website was a challenge, but not a negative one. I'm used to managing multiple tasks at once from my previous career, so it felt natural and energising to push both projects forward.
One of the key lessons was how challenging it might be to redesign existing work. Unlike starting from scratch, I had to consider established norms and user expectations while still creating improvements. Positive user feedback confirmed that these updates made the adoption flow clearer and more approachable. Another improvement was scope management: I stayed focused on the main adoption flows, building on what I had learned in earlier projects.
For the future, I'd like to conduct live usability sessions, since they would allow me to ask follow-up questions and gain deeper insights than remote testing alone.
Future Steps
•
Reach out to a local pet shelter to explore whether they would be interested in implementing the redesigned website and collaborating further.
•
Conduct an additional round of usability testing, ideally including live sessions to gather deeper insights.
•
Continue developing the profile section to address the issues raised during the initial user interviews.