UX Case Study
Responsive Web Design for
MyPaws Dog Rescue
Project Overview
MyPaws is an online platform dedicated to helping both experienced and first-time dog owners find their perfect pet.
At MyPaws, we offer detailed information about the dogs available for adoption.
Our website streamlines the adoption process by enabling users to start and track their adoption journey online.
Project Overview
MyPaws is an online platform dedicated to helping both experienced and first-time dog owners find their perfect pet.
At MyPaws, we offer detailed information about the dogs available for adoption.
Our website streamlines the adoption process by enabling users to start and track their adoption journey online.
Project Overview
MyPaws is an online platform dedicated to helping both experienced and first-time dog owners find their perfect pet.
At MyPaws, we offer detailed information about the dogs available for adoption.
Our website streamlines the adoption process by enabling users to start and track their adoption journey online.
My Role
UX & UI Designer
Project
Personal Project
Timeline
February 2022 to March 2022
Tools Used
Adobe XD, Miro, Google Slides
The Problems
Pet shelters often neglect to regularly update their online animal listings, leaving potential adopters with limited information regarding the pets' backgrounds, personalities, and health.
This lack of transparency can lead to adopters second-guessing their decisions and feeling uncertain about their chosen companions.
The adoption process can be prolonged, causing potential adopters to experience delays in receiving feedback or discovering that the dogs they intended to adopt have already found homes.
This forces users to restart the entire process, leading to wasted time and effort.
The Problems
Pet shelters often neglect to regularly update their online animal listings, leaving potential adopters with limited information regarding the pets' backgrounds, personalities, and health.
This lack of transparency can lead to adopters second-guessing their decisions and feeling uncertain about their chosen companions.
The adoption process can be prolonged, causing potential adopters to experience delays in receiving feedback or discovering that the dogs they intended to adopt have already found homes.
This forces users to restart the entire process, leading to wasted time and effort.
The Problems
Pet shelters often neglect to regularly update their online animal listings, leaving potential adopters with limited information regarding the pets' backgrounds, personalities, and health.
This lack of transparency can lead to adopters second-guessing their decisions and feeling uncertain about their chosen companions.
The adoption process can be prolonged, causing potential adopters to experience delays in receiving feedback or discovering that the dogs they intended to adopt have already found homes.
This forces users to restart the entire process, leading to wasted time and effort.
The Goals
The primary objective is to facilitate seamless connections between individuals and dogs, offering a streamlined adoption process that enhances adoption rates and ultimately saves more lives.
By implementing user-friendly systems and procedures, potential adopters can find their perfect companions more easily, leading to increased adoption numbers and a greater impact in the realm of animal rescue and welfare.
The Goals
The primary objective is to facilitate seamless connections between individuals and dogs, offering a streamlined adoption process that enhances adoption rates and ultimately saves more lives.
By implementing user-friendly systems and procedures, potential adopters can find their perfect companions more easily, leading to increased adoption numbers and a greater impact in the realm of animal rescue and welfare.
The Goals
The primary objective is to facilitate seamless connections between individuals and dogs, offering a streamlined adoption process that enhances adoption rates and ultimately saves more lives.
By implementing user-friendly systems and procedures, potential adopters can find their perfect companions more easily, leading to increased adoption numbers and a greater impact in the realm of animal rescue and welfare.
Research: Competitor Analysis
To initiate my research, I conducted a search to identify dog shelters and pet stores in Ontario that facilitated adoptions.
Some of the organizations and companies I studied include Petfinder, Homeward Bound Rescue, HART, and Furever Albe Dog Rescue.
Each of these entities provided informative websites where users could access details about the dogs' backgrounds and submit adoption applications online.
To enhance our marketing strategy and identify untapped market potentials, I conducted a comprehensive competitor analysis of these organizations and companies.
This helped us identify the most common features of shelter websites and where improvements could be made if necessary.
Research: Competitor Analysis
To initiate my research, I conducted a search to identify dog shelters and pet stores in Ontario that facilitated adoptions.
Some of the organizations and companies I studied include Petfinder, Homeward Bound Rescue, HART, and Furever Albe Dog Rescue.
Each of these entities provided informative websites where users could access details about the dogs' backgrounds and submit adoption applications online.
To enhance our marketing strategy and identify untapped market potentials, I conducted a comprehensive competitor analysis of these organizations and companies.
This helped us identify the most common features of shelter websites and where improvements could be made if necessary.
Research: Competitor Analysis
To initiate my research, I conducted a search to identify dog shelters and pet stores in Ontario that facilitated adoptions.
Some of the organizations and companies I studied include Petfinder, Homeward Bound Rescue, HART, and Furever Albe Dog Rescue.
Each of these entities provided informative websites where users could access details about the dogs' backgrounds and submit adoption applications online.
To enhance our marketing strategy and identify untapped market potentials, I conducted a comprehensive competitor analysis of these organizations and companies.
This helped us identify the most common features of shelter websites and where improvements could be made if necessary.
Research: Understand the Users
Following the domain research and competitive analysis, I proceeded to conduct user interviews with a sample of 20 potential users.
Throughout these interviews, I asked open-ended questions to encourage interviewees to provide detailed and expansive responses.
By adopting this approach, I aimed to gain comprehensive insights into their preferences, needs, and experiences, enabling us to refine our product or service offerings to better meet their expectations.
Research: Understand the Users
Following the domain research and competitive analysis, I proceeded to conduct user interviews with a sample of 20 potential users.
Throughout these interviews, I asked open-ended questions to encourage interviewees to provide detailed and expansive responses.
By adopting this approach, I aimed to gain comprehensive insights into their preferences, needs, and experiences, enabling us to refine our product or service offerings to better meet their expectations.
Research: Understand the Users
Following the domain research and competitive analysis, I proceeded to conduct user interviews with a sample of 20 potential users.
Throughout these interviews, I asked open-ended questions to encourage interviewees to provide detailed and expansive responses.
By adopting this approach, I aimed to gain comprehensive insights into their preferences, needs, and experiences, enabling us to refine our product or service offerings to better meet their expectations.
Some of questions include:
Would you consider adopting a dog from a shelter? Why?
When considering adoption, what would be the most important factors?
Have you adopted, and if so, what challenges did you face?
According to my interviews, the followings were my findings:
Potential adopters expressed a strong need to understand the adoption process, emphasizing the importance of providing clear and transparent information to boost their confidence and decision-making.
Users expressed a significant interest in learning about the history and background of the dogs, highlighting the importance of providing comprehensive information to help potential adopters make informed decisions and establish a deeper connection with their potential companions.
A portion of the users expressed a need for guidance and advice on dog care, indicating the importance of providing educational resources and support to help new adopters provide optimal care for their dogs and promote their overall well-being.
User Personas
Based on the data collected in the research above, the following user personas are outlined that represent the goals and characteristics of a large group of users.
User Personas
Based on the data collected in the research above, the following user personas are outlined that represent the goals and characteristics of a large group of users.
User Personas
Based on the data collected in the research above, the following user personas are outlined that represent the goals and characteristics of a large group of users.
User Journey
To identify potential pain points and visualize the user journey, a comprehensive journey map was created, focusing on the scenario of one of the personas named Jackson Harvey.
This map aims to provide insights into his experience, allowing for targeted improvements in the design process to enhance user satisfaction and address any challenges encountered along the way.
User Journey
To identify potential pain points and visualize the user journey, a comprehensive journey map was created, focusing on the scenario of one of the personas named Jackson Harvey.
This map aims to provide insights into his experience, allowing for targeted improvements in the design process to enhance user satisfaction and address any challenges encountered along the way.
User Journey
To identify potential pain points and visualize the user journey, a comprehensive journey map was created, focusing on the scenario of one of the personas named Jackson Harvey.
This map aims to provide insights into his experience, allowing for targeted improvements in the design process to enhance user satisfaction and address any challenges encountered along the way.
Starting the design: Sitemap
After conducting user research to understand their needs, a sitemap was created to effectively organize and structure the design.
The primary objective was to make strategic decisions regarding information architecture that would enhance overall website navigation.
The chosen structure aimed to prioritize simplicity and ease of use, ensuring a user-friendly experience for visitors.
Starting the design: Sitemap
After conducting user research to understand their needs, a sitemap was created to effectively organize and structure the design.
The primary objective was to make strategic decisions regarding information architecture that would enhance overall website navigation.
The chosen structure aimed to prioritize simplicity and ease of use, ensuring a user-friendly experience for visitors.
Starting the design: Sitemap
After conducting user research to understand their needs, a sitemap was created to effectively organize and structure the design.
The primary objective was to make strategic decisions regarding information architecture that would enhance overall website navigation.
The chosen structure aimed to prioritize simplicity and ease of use, ensuring a user-friendly experience for visitors.
Design Phase - From Paper to Digital
I started with paper and digital wireframes, mockups, and high-fidelity prototypes.
Taking the time to draft iterations for each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
After simplifying and refining the designs on paper wireframes, I created low-fidelity wireframes. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Design Phase - From Paper to Digital
I started with paper and digital wireframes, mockups, and high-fidelity prototypes.
Taking the time to draft iterations for each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
After simplifying and refining the designs on paper wireframes, I created low-fidelity wireframes. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Design Phase - From Paper to Digital
I started with paper and digital wireframes, mockups, and high-fidelity prototypes.
Taking the time to draft iterations for each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
After simplifying and refining the designs on paper wireframes, I created low-fidelity wireframes. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
In the low-fidelity prototype's homepage, I incorporated the steps of the adoption process to provide users with a clear understanding of the required actions during the adoption journey.
Within the dog's profile section, I included a concise list of key information, including age, health condition, housetraining status, and other relevant details. This approach allows users to quickly access and comprehend important information about the dog, enabling them to make informed decisions more efficiently and effectively.
To enhance the user experience, the online application form was structured by dividing the questions into sections and implementing a progress tracker. This approach allows users to navigate through the form more easily, providing a sense of accomplishment by visually indicating the completed steps and the remaining ones. By breaking down the form into manageable sections, users are less likely to feel overwhelmed, resulting in a smoother and more user-friendly application process.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
After creating the first digital prototype based on the initial user research, I tested my designs to ensure they worked and made necessary adjustments.
Five participants were asked to choose a dog to adopt and submit an adoption form from a low-fidelity prototype, and I observed the way they completed them.
Findings from the first study helped guide the designs from wireframes to mockups.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
After creating the first digital prototype based on the initial user research, I tested my designs to ensure they worked and made necessary adjustments.
Five participants were asked to choose a dog to adopt and submit an adoption form from a low-fidelity prototype, and I observed the way they completed them.
Findings from the first study helped guide the designs from wireframes to mockups.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
After creating the first digital prototype based on the initial user research, I tested my designs to ensure they worked and made necessary adjustments.
Five participants were asked to choose a dog to adopt and submit an adoption form from a low-fidelity prototype, and I observed the way they completed them.
Findings from the first study helped guide the designs from wireframes to mockups.
Usability Study Findings: Low-fidelity Prototype
Usability Study Findings: Low-fidelity Prototype
Usability Study Findings: Low-fidelity Prototype
1. A more effective indicator is necessary on the Dogs Available For Adoption page to clearly display the type and quantity of applied filters, enhancing the user experience and providing improved visibility of the filtering options.
Supporting evidence from the usability study:
4 out of 5 participants had difficulty identifying how many and which filters they applied, and they would like to reset them all at once.
Changes I made as a result of the usability study:
To provide users with a clearer understanding of their applied filters during the filtering process, a pop-up message can be implemented.
Before Usability Study
After Usability Study
1. A more effective indicator is necessary on the Dogs Available For Adoption page to clearly display the type and quantity of applied filters, enhancing the user experience and providing improved visibility of the filtering options.
Supporting evidence from the usability study:
4 out of 5 participants had difficulty identifying how many and which filters they applied, and they would like to reset them all at once.
Changes I made as a result of the usability study:
To provide users with a clearer understanding of their applied filters during the filtering process, a pop-up message can be implemented.
Before Usability Study
After Usability Study
1. A more effective indicator is necessary on the Dogs Available For Adoption page to clearly display the type and quantity of applied filters, enhancing the user experience and providing improved visibility of the filtering options.
Supporting evidence from the usability study:
4 out of 5 participants had difficulty identifying how many and which filters they applied, and they would like to reset them all at once.
Changes I made as a result of the usability study:
To provide users with a clearer understanding of their applied filters during the filtering process, a pop-up message can be implemented.
Before Usability Study
After Usability Study
2. Users have expressed a desire for a simpler method to access a larger pool of adoptable dogs directly from the dog profile page.
Supporting evidence from the usability study:
An overwhelming majority of 80% of participants expressed frustration at the lack of an option to view other dogs' profiles without having to return to the previous page and restart the search process.
Changes I made as a result of the usability study:
To improve the user experience, a preview section showcasing similar dogs available for adoption is added to the profile page, along with a convenient button allowing users to effortlessly navigate back to the full list of adoptable dogs.
Before Usability Study
After Usability Study
2. Users have expressed a desire for a simpler method to access a larger pool of adoptable dogs directly from the dog profile page.
Supporting evidence from the usability study:
An overwhelming majority of 80% of participants expressed frustration at the lack of an option to view other dogs' profiles without having to return to the previous page and restart the search process.
Changes I made as a result of the usability study:
To improve the user experience, a preview section showcasing similar dogs available for adoption is added to the profile page, along with a convenient button allowing users to effortlessly navigate back to the full list of adoptable dogs.
Before Usability Study
After Usability Study
2. Users have expressed a desire for a simpler method to access a larger pool of adoptable dogs directly from the dog profile page.
Supporting evidence from the usability study:
An overwhelming majority of 80% of participants expressed frustration at the lack of an option to view other dogs' profiles without having to return to the previous page and restart the search process.
Changes I made as a result of the usability study:
To improve the user experience, a preview section showcasing similar dogs available for adoption is added to the profile page, along with a convenient button allowing users to effortlessly navigate back to the full list of adoptable dogs.
Before Usability Study
After Usability Study
Mockups
After testing the low-fidelity prototype and making modifications based on the feedback, I created mockups with visual designs that align with My Paw's branding.
Also, I made several iterations to the mockups to make them more usable, accessible, and efficient.
Mockups
After testing the low-fidelity prototype and making modifications based on the feedback, I created mockups with visual designs that align with My Paw's branding.
Also, I made several iterations to the mockups to make them more usable, accessible, and efficient.
Mockups
After testing the low-fidelity prototype and making modifications based on the feedback, I created mockups with visual designs that align with My Paw's branding.
Also, I made several iterations to the mockups to make them more usable, accessible, and efficient.
To enhance accessibility to dog care information, I incorporated a Dog Care Center section on the homepage, featuring links to the latest articles and blogs covering diverse aspects of dog care.
To facilitate the adoption process, a search box is implemented in the adoption application, allowing users to enter a dog's name or animal ID, and providing a preview of the dog's profile to ensure accurate selection.
Users can seamlessly initiate the adoption application from a dog's profile without the need to re-enter the dog's name, but they also have the option to search for and adopt a different dog if desired.
Once the application is submitted, users can conveniently monitor the status and progress of their applications directly from their account page.
Design System
Design System
Design System
Usability Study Findings: High-fidelity Prototype
Usability Study Findings: High-fidelity Prototype
Usability Study Findings: High-fidelity Prototype
Users require a faster and easier way to review entered information on the adoption application
Supporting evidence from the usability study:
3 out of 5 expressed dissatisfaction with the final step of the adoption process, citing its lengthiness, and indicating a preference for a streamlined option to review necessary information before submission.
Changes I made as a result of the usability study:
To address the feedback and improve the adoption process, the inputs were restructured into accordions, organized by their original sections, allowing users to selectively review and edit specific sections as preferred, instead of displaying all inputs on a single page.
Before Usability Study
After Usability Study
Users require a faster and easier way to review entered information on the adoption application
Supporting evidence from the usability study:
3 out of 5 expressed dissatisfaction with the final step of the adoption process, citing its lengthiness, and indicating a preference for a streamlined option to review necessary information before submission.
Changes I made as a result of the usability study:
To address the feedback and improve the adoption process, the inputs were restructured into accordions, organized by their original sections, allowing users to selectively review and edit specific sections as preferred, instead of displaying all inputs on a single page.
Before Usability Study
After Usability Study
Users require a faster and easier way to review entered information on the adoption application
Supporting evidence from the usability study:
3 out of 5 expressed dissatisfaction with the final step of the adoption process, citing its lengthiness, and indicating a preference for a streamlined option to review necessary information before submission.
Changes I made as a result of the usability study:
To address the feedback and improve the adoption process, the inputs were restructured into accordions, organized by their original sections, allowing users to selectively review and edit specific sections as preferred, instead of displaying all inputs on a single page.
Before Usability Study
After Usability Study
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes.
Considering that users may be browsing the website from a variety of devices, it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes.
Considering that users may be browsing the website from a variety of devices, it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes.
Considering that users may be browsing the website from a variety of devices, it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Takeaways: Impact
Throughout this project, I gained an understanding that even minor alterations in web design can yield substantial effects on the user experience, reinforcing my belief in the importance of prioritizing user needs when generating design ideas and implementing solutions.
Takeaways: Impact
Throughout this project, I gained an understanding that even minor alterations in web design can yield substantial effects on the user experience, reinforcing my belief in the importance of prioritizing user needs when generating design ideas and implementing solutions.
Takeaways: Impact
Throughout this project, I gained an understanding that even minor alterations in web design can yield substantial effects on the user experience, reinforcing my belief in the importance of prioritizing user needs when generating design ideas and implementing solutions.
Next Step
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Next Step
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Next Step
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.