Furry Friends
Furry Friends
Introducing Furry Friends
On-going Project - Responsive website design
Step into a world where adopting a Furry Friend is just a click away… Our app redefines pet adoption, merging seamless design with your busy lifestyle.
Schedule video calls and in-person meetups effortlessly, catering to the busiest animal lovers. This isn't just an app – it's an invitation to find companionship amidst life's chaos.
~ Created with Figma ~
This application is currently in the iterative development phase, meaning its ongoing refinement, enhancement and testing. As a result, the application is not fully completed yet.Project Overview
The Product
The Furry Friends Adoption Center website allows users to look for desired pets and quickly adopt them by filling out an adoption form. They can also decide to book an in-person meeting with the pet or schedule a video call.
Project Duration
April 2023 - May 2023
My Role
UX Lead - from beginning to finish: empathizing to ideation.
The Problem
Some users with busy working and family schedules don’t have enough time to physically visit adoption shelters.
The Goal
With that in mind, FFAC gives the option to quickly adopt a pet online, schedule a video call or book a visit to meet the pet in person.
Responsibilities
User research, wireframing, prototyping, mockups, and ideation.
Understanding the User
User Research: Summary
The user research conducted for the Furry Friends Animal Center website aimed to understand the needs and preferences of potential adopters. Through interviews, surveys, and usability testing, insights were gathered on users' motivations for adopting a pet, their preferences in the adoption process, and their expectations from the website. The research found that users valued a simple and intuitive search functionality, clear and detailed pet profiles, and options for both in-person and virtual meetings. These findings guided the design and development of the website, ensuring that it provides a user-friendly and efficient experience for individuals looking to adopt a furry friend.
This can include the type of research you conducted, assumptions that you made going into the research, and how your assumptions changed after conducting research.
User Research: Pain Points
1
Scheduling
Difficulty in scheduling meetings: Users may experience frustration if the process of scheduling in-person meetings or video calls with pets is cumbersome or lacks clear instructions, leading to confusion or delays in the adoption process.
2
Information
Lack of detailed pet profiles: Users may find it frustrating when pet profiles on the Furry Friends Animal Center website lack comprehensive information, such as detailed descriptions of the pet's temperament, behavior, and any special needs..
3
Length
Lengthy adoption process: Users may become frustrated if the adoption process on the Furry Friends Animal Center website is excessively long or involves multiple steps, leading to a perception of unnecessary delays and potentially discouraging potential adopters from completing the process.
4
Complexity
Complex adoption form: Users may be deterred by a lengthy or confusing adoption form, which could potentially lead to the abandonment of the adoption process due to the perceived hassle or time commitment required to complete it.
Persona: Michelle
Problem statement:
Michelle is a busy freelance graphic designer with a family, who needs a pet adoption process that is tailored to her busy work-from-home lifestyle and family dynamics, because she wants a pet that can provide companionship and joy without disrupting her work routine.
User Journey Map
Starting the Design
Sitemap
Trying to make adoption process fast and simple with only important and relevant information.
Paper Wireframes
Creating 4 different paper wireframes of the potential homepage, with the 5th being the final result of implementing elements from the rest.
Mobile
Low-Fidelity Prototype
The goal was to give the user as much detailed info about the pet as possible, and make everything clear and easy to read.
Study type:
Unmoderated usability study
Usability Study: Findings
1
Navigation Challenges
Users struggled to find specific sections or features on the website, leading to frustration and longer search times.
Participants:
5 participants
Tablet
Digital Wireframes
The goal was to give the user as much detailed info about the pet as possible, and make everything clear and easy to read.
Usability Study: Parameters
Location:
Finland, remote
2
Poor mobile experience
Users encountered difficulties accessing and navigating the website on mobile devices due to a lack of responsive design, resulting in a subpar user experience.
Paper Wireframes
Screen size variation(s)
Organizing content in a clear, simple and straightforward ways for mobile and tablet versions
Digital Wireframes
Screen size variation(s)
The goal was to give the user as much detailed info about the pet as possible and make everything clear and easy to read, whilst keeping the continuity, and consistency of the app across all devices.
Length:
~ 20 minutes
3
Ambiguous adoption instructions
Users found the adoption instructions unclear and inconsistent, causing confusion and frustration during the adoption process.
Refining the Design
Mockups (Website)
Website mockups provide a glimpse of how the adoption app's features and content will be arranged on desktop and laptop screens. These mockups illustrate the layout and design elements, ensuring a consistent and user-friendly experience across larger devices.
Mockups (Mobile)
Mobile mockups for the adoption app offer sneak peeks of how it'll look on different devices. They show the layout and design, ensuring a smooth experience on both smartphones and tablets. These mockups help perfect the app's design before it's built, making sure it's easy to use for people looking to adopt pets.
Mockups: Original Screen size (Desktop)
1
Before
Before
Mockups: Screen size variations
I created mockups involving designing versions of screens tailored to different device sizes, ensuring a seamless user experience across various gadgets.
High-Fidelity Prototype
In the context of the Furry Friend Adoption website, a high-fidelity prototype serves as a comprehensive preview of the app's design and functionality. It goes beyond basic visuals and simulates the actual experience of interacting with the app, from browsing available animals to scheduling video calls, meetups, and of course - adoption. This detailed representation allows for thorough testing and validation of the user journey, ensuring a seamless and engaging experience.
Accessibility Considerations
Clear and Consistent Navigation
Ensure that the website has a logical and consistent navigation structure with clear labels and headings, allowing users with disabilities to easily understand and navigate through the content.
2
Alternative Text for Images:
Provide descriptive alternative text (alt text) for images on the website, enabling users who rely on screen readers or have visual impairments to understand the context and content of the images.
After
After
3
Keyboard Accessibility:
Ensure that all interactive elements, such as buttons and form fields, can be accessed and operated using a keyboard alone, allowing users who cannot use a mouse or have motor disabilities to navigate and interact with the website effectively.
Going Forward
Takeaways
Impact
The impact of the project is a more user-friendly and accessible adoption process for potential adopters on the Furry Friends Animal Center website. By addressing usability issues, improving navigation, and considering accessibility considerations, the project enhances the overall user experience, increasing the likelihood of successful pet adoptions and promoting a positive and inclusive adoption environment.
Next Steps
1
Analyze User Feedback
Review and analyze the feedback collected from users during the usability study to identify patterns, pain points, and areas of improvement.
2
Implement Design Enhancements
Based on the findings from the usability study, make design enhancements and adjustments to improve the user experience, address usability issues, and optimize the website's functionality.
What I learned
Through this project, I learned the importance of user-centered design, considering the needs and preferences of potential adopters. Usability testing provided valuable insights into improving navigation, addressing accessibility concerns, and streamlining the adoption process. Iterative improvements based on user feedback enhanced the overall user experience, making the project more successful.
3
Conduct Further Testing
Conduct additional rounds of usability testing to validate the effectiveness of the design enhancements and ensure that the website is more user-friendly, accessible, and aligned with user expectations.