FureverHome
Animal Shelter Responsive Web App
Project Summary
To create a user-friendly pet adoption platform for animal shelters, designed to streamline the adoption process and connect potential adopters with their ideal pets.
Problem
Existing pet adoption websites lack user-friendly interfaces, particularly on mobile devices, leading to a poor user experience and hindering the adoption process.
Goal
The goal is to design a pet adoption flow that is intuitive, convenient, and mobile-friendly, providing a seamless user experience that encourages more successful pet adoptions.
Project Details
Key skills
Competitor Research, User Research, User Testing, Wireframing, Prototyping
Tools
AdobeXD, Google Meet, Powerpoint
User Research
Summary
For the user research, I conducted a combination of qualitative methods, including interviews and surveys, to gather insights into users’ experiences and needs when it comes to pet adoption. Initially, I had assumptions that users found existing pet adoption websites difficult to navigate, especially on mobile devices, and that they desired a more user-friendly and convenient experience.
However, after conducting research, I discovered that the frustrations users faced extended beyond just navigation issues. Users also expressed a desire for comprehensive information about the pets’ backgrounds, temperaments, and compatibility with their specific circumstances. These insights helped me understand the importance of not only improving the user interface but also providing relevant and detailed content to facilitate informed decision-making during the adoption process.
PainPoints
Difficult Navigation and Usability
Addressing the pain point of navigation and usability will guide designs to prioritize a mobile-friendly interface, intuitive search, and filtering options, clear categorization of pets, and a streamlined adoption process to ensure a seamless and user-friendly experience.
Limited or incomplete pet information
The need for comprehensive pet information will guide the design to include detailed profiles with background history, health records, temperament assessments, and compatibility indicators, enabling potential adopters to make well-informed decisions.
Lack of clear adoption policies and guidelines
Designing with a focus on adoption policies and guidelines will involve creating a dedicated section that clearly outlines fees, requirements, procedures, and any specific restrictions, ensuring transparency and minimizing confusion for potential adopters.
Limited communication channels
To overcome the communication challenges, designs will incorporate user-friendly communication channels such as chat support, email contact, and clear prompts for inquiries, facilitating easy and efficient interaction between potential adopters and animal shelters.
Strategy
Personas & User Journey Maps
Usability study: Parameters
Study Type:
Moderated Usability Study
Length:
5 – 15 mins
Participants:
5 participants
Location:
United States, remote
For more details of the usability study plan, click here.
Usability study: Findings
Navigation Preferences
Users struggled to find the search feature and also faced difficulty in navigating back to previous pages or finding specific menu options.
Pet Profile Information
Users found that pet’s profiles lacked detailed information and also Insufficient or low-quality photos made it difficult to accurately gauge a pet’s appearance and personality.
Application Process
Users experienced confusion due to the lack of clear instructions or easily accessible contact information for shelters and posed challenges when attempting to initiate the adoption process or seek clarification.
Site Map
Accessibillity Considerations
Color Contrast: Ensuring Sufficient Contrast
Paid careful attention to color contrast to ensure that text and important elements have enough contrast against the background, making them easily readable for users with visual impairments.
Clear and Consistent Navigation Labels
Used clear and descriptive labels for navigation buttons and links to provide clarity and ease of use for individuals who rely on screen readers or have cognitive disabilities, ensuring they can easily navigate through the app.
Keyboard Accessibility
Implemented keyboard accessibility features to enable users to navigate and interact with the app using only keyboard inputs. This benefits individuals with motor impairments or those who cannot use a mouse, allowing them to fully access all features and functionalities.
Wireframe >Prototype
*Swipe left and right to compare before and after image
Size Variations
To provide the best possible user experience, I prioritized optimizing the browsing experience across different devices, including mobile and computer, accommodating users with varying screen sizes and ensuring a seamless experience.
Home Page_Website
Home Page_Mobile
Pet Profile_Website
Pet Profile_Mobile
High-fidelity Prototype
My final high-fidelity prototype maintained the user flow of the lo-fi prototype, incorporating design enhancements based on the usability study findings and incorporating additional suggestions.
Final Design
Visit Fureverhome Hi-fi Prototype
Takeaways
Impact:
The thoughtful consideration of accessibility in the designs has resulted in a more inclusive and user-friendly experience for individuals with diverse abilities. By prioritizing color contrast, clear navigation labels, and keyboard accessibility, the designs have empowered users to navigate, engage, and access content effectively, fostering a more inclusive digital environment.
What I learned:
Throughout the project, I learned the importance of user-centered design and the value of conducting thorough user research. Usability studies provided invaluable insights into user preferences, pain points, and areas for improvement, guiding the design decisions. Incorporating feedback from both users and team members allowed for iterative design improvements and enhanced the overall user experience. Additionally, considering accessibility considerations from the beginning resulted in a more inclusive and accommodating design that prioritizes the needs of users with diverse abilities.
Next steps
Iterative Testing and Refinement
Conduct additional rounds of usability testing with a diverse group of users to gather more feedback and identify any remaining pain points or areas for improvement. Use these insights to refine the design further, ensuring an optimized user experience.
Accessibility Audit and Compliance
Conduct a comprehensive accessibility audit of the app to identify any potential accessibility barriers and ensure compliance with established accessibility standards and guidelines. Address any issues found and make necessary adjustments to ensure inclusivity for all users.
Pilot Launch and User Feedback Collection
Conduct a pilot launch of the app with a select group of users to gather real-world feedback and assess the effectiveness of the implemented design changes. Analyze user feedback and behavior to identify any further adjustments needed before a full-scale launch.
