Project Overview
The Product
Pure Paws Animal Shelter website is designed to help potential pet adopters learn about and apply to adopt pets from the shelter. The website features detailed profiles for each pet available for adoption, including photos, age, breed, personality, and any special needs or considerations. It also has an online adoption application form that is easy to complete and submit. The website is user-friendly and visually appealing, with a responsive design that works well on desktop and mobile devices. Pure Paws Animal Shelter is committed to finding loving homes for all of their pets and strive to make the adoption process as smooth and convenient as possible for potential adopters. The website is an essential resource for anyone looking to adopt a new pet and make a difference in the life of an animal in need.
Project Duration
December 1, 2022 - Dec 21, 2022
The Problem
For a potential pet adopter, it can be frustrating to navigate through a cluttered and confusing website, with incomplete or outdated information about the animals available for adoption. The online adoption application process should be simple and straightforward, but instead it feels like a daunting task, with unclear instructions and numerous required fields to fill out. It's disheartening to want to give a loving home to a deserving animal, only to feel overwhelmed and unsure of how to move forward with the adoption process.
The Goal
The goal is to use my skills and expertise to create a website that effectively communicates the mission and values of the animal shelter, and provides potential adopters with a seamless and enjoyable experience. I want to design a website that is intuitive and easy to navigate, with detailed and accurate information about the pets available for adoption, and a simple and straightforward online adoption application process. By addressing the user problem of finding it difficult to learn about and apply to adopt pets through the animal shelter website, I hope to help more animals find their forever homes and make a positive impact in the lives of both the pets and the adopters.
My Role
UX designer and researcher
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
User Research
Summary
Potential adopters desire a website that is both visually appealing and easy to navigate, with detailed and accurate information about the pets available for adoption. The online adoption application process can be a source of stress and uncertainty, and potential adopters value clear instructions and a simple form that allows them to quickly and confidently complete the process. Some potential adopters may have concerns about the legitimacy of the online adoption process, or uncertainty about how to properly care for their new pet, and appreciate support and guidance from shelter staff. By addressing the unique needs and concerns of potential adopters, an animal shelter website can facilitate successful and rewarding pet adoptions, bringing joy and love to both the humans and the animals involved.
User Pain Points
1. Difficulty finding detailed and accurate information about the pets available for adoption.
2. Confusion about the adoption process and how to complete the online adoption application.
3. Inability to easily navigate the website and find the information they need.
4. Concerns about the legitimacy of the online adoption process.
5. Uncertainty about how to properly care for the adopted pet once it is in their home.
6. Lack of personal interaction or support from shelter staff during the adoption process.
7. Difficulty understanding and agreeing to the adoption terms and requirements.
8. Long wait times or delays in the adoption process.
User Personas
User Journey Map
The scenario:
Therese begins researching animal shelters in the area and considering her options for adopting a new pet. She visits the animal shelter website and begins browsing the profiles of the pets available for adoption. She becomes frustrated with the lack of detailed information and the difficulty in finding what she is looking for on the website. She finds a cat that she falls in love with and decides to apply for adoption online. She completes the adoption process and waits for a response from the shelter.
The Design
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized call to actions to help users find where they need to go.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Because Pure Paws animal shelter users access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Desktop screen
Mobile Screen
Digital Wireframes
I wanted to emphasize the call-to-action buttons such as Donate, Adopt, Foster, Volunteer. I also want to add a progress bar on the application screens to let users know how far they are in the process.
All screens
Responsive Screens
Usability Study
The usability study was conducted to understand the user experience of adopting a pet online through an animal shelter website. Five participants were asked to complete the adoption process and provide feedback on their experience.
The study found that while most users were able to find and access the profiles of the pets available for adoption, there were some issues with understanding and completing the online adoption application form, and a desire for more personal interaction and support from shelter staff during the process.
Insight Identification
• All users were able to find the adoption section of the website and access the profiles of the pets available for adoption.
• Four out of five users found the information provided about each pet to be detailed and helpful in making their decision. One user found the information to be insufficient and wished there were more photos and details.
• Three out of five users had difficulty understanding and completing the online adoption application form, with issues ranging from confusing instructions to technical difficulties.
• Two out of five users expressed frustration with the length of the adoption process and wished it could be completed more quickly.
• All five users expressed a desire for more personal interaction and support from shelter staff during the adoption process.
High-Fidelity Mockup
Based on the findings from the usability study, I have made several iterations to the mockups. These iterations include clearer and more detailed information about the pets available for adoption, a simplified and more intuitive online adoption application process, and additional opportunities for personal interaction and support from shelter staff. By addressing the pain points and challenges identified in the usability study, I hope to create a more user-friendly and efficient website that will facilitate successful pet adoptions and bring joy to both the humans and animals involved.
Iteration 1
I made sure the adopt call-to-action buttons can be accessed anywhere on the website and is placed prominently on the front and center of the homepage.
Iteration 2.
I also cut the adoption form into stages so it does not appear too long and overwhelming, and simplified the progress bar so it does not take up too much real estate above the fold.
Final Mockups Overview
Mockup in Various Screen Sizes
Accessibility Considerations
• I made sure that it is compatible with assistive technologies such as screen readers, speech recognition software, and magnifiers.
• I used clear and concise language, and avoid jargon or technical terms that may be confusing or difficult to understand.
• I used descriptive and concise alt text for images to provide context and meaning to users who are unable to see the images.
• I ensured that the website is responsive and works well on a variety of devices, including mobile phones and tablets.
• I used high contrast colors and large font sizes to improve readability for users with visual impairments.
• I provided clear and easy-to-follow instructions for completing the online adoption application process.
• I included options for users to contact the animal shelter for assistance or clarification if needed.
• I ensured that the website meets the Web Content Accessibility Guidelines (WCAG) 2.0 at level AA.
Going Forward
Impact
Designing an animal shelter website with a focus on getting more online adoption applications, can increase the visibility and reach of the pets available for adoption, streamline the adoption process, reduce workload for shelter staff, improve the success rate of adoptions, enhance the user experience for potential adopters, and have a positive impact on the animal shelter and the animals in their care. The website also provides an extremely user- friendly navigation experience. The target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned
As a UX designer, I learned that user experience is a critical factor in the success of an animal shelter website with a focus on online adoptions. By conducting user research and usability testing, I was able to understand the needs and pain points of potential adopters and design a website that addressed these issues. I also learned the importance of providing clear and concise information about the pets available for adoption, as well as an intuitive and efficient online adoption process. Additionally, I learned the value of incorporating personal interaction and support from shelter staff, as many potential adopters expressed a desire for more communication and guidance during the adoption process. Overall, this project has reinforced the importance of user-centered design and has given me valuable insights and skills that I can apply to future projects.
Next Steps
1. Create user profile page for registered users
2. Conduct another round of usability study to gather feedback from potential adopters about their experience using the high-fidelity prototype in various screens, and identify any areas for improvement.
3. Analyze the data from the usability study and use it to inform future design iterations.
4. Monitor the performance of the website, including the number of online adoption applications received and the conversion rate of those applications to successful adoptions.
5. Consider adding additional features or functionality to the website, such as a pet matching quiz or a virtual tour of the animal shelter.
6. Integrate the website with the animal shelter's social media channels and other online platforms to increase visibility and reach.
7. Consider implementing tools for tracking and analyzing user behavior, such as Google Analytics, to better understand how potential adopters are using the website and identify any areas for improvement.
8. Stay up-to-date on best practices and trends in website design, and continually iterate and improve the website to enhance the user experience and increase online adoption rates.