This project was created as part of the Google UX design bootcamp.
Embedded Files
Timeline
Timeline
May - June 2022
Role
Role
Solo UI/UX Designer & UX Researcher
Responsibilities
Responsibilities
Survey
Wireframes
Prototype
Usability Study
Tools
Tools
Goal
Goal
The goal was to design a responsive pet adoption website like PAW ("Pet Adoption Website") to support animal shelters in making the pet adoption flow intuitive and easy, so that people tend to adopt more shelter animals in the future.
Why?
Why?
With roughly 6.5 million animals entering animal shelters in the US each year (source), animal shelters need help and support to manage the therefore increasing pet adoption processes.
With roughly 6.5 million animals entering animal shelters in the US each year (source), animal shelters need help and support to manage the therefore increasing pet adoption processes.
The Problem
The Problem
People are confused with the process of adopting a shelter animal and are overwhelmed with the complex adoption application paperwork.
People are confused with the process of adopting a shelter animal and are overwhelmed with the complex adoption application paperwork.
When people want to adopt a pet from the animal shelter, they must complete the adoption process and paperwork to take their new animal home.
The Solution
The Solution
A responsive website that supports people with a search tool to find available pets for adoption easily and intuitively, supports them in showing the exact steps of the adoption process and providing a clear adoption application form to fill out beforehand to make adopting a pet from an animal shelter less complicated.
A responsive website that supports people with a search tool to find available pets for adoption easily and intuitively, supports them in showing the exact steps of the adoption process and providing a clear adoption application form to fill out beforehand to make adopting a pet from an animal shelter less complicated.
Design Thinking Process
Design Thinking Process
For this project, I utilized the following design thinking process steps to take my website from idea to reality:
1) Empathize
1) Empathize
Understanding the user
2) Define
2) Define
Figuring out the problem
3) Ideate
3) Ideate
Brainstorm solutions
4) Prototype
4) Prototype
Creation and experimentation
5) Test
5) Test
Refining the product
Survey
Survey
To start this project, I conducted a survey via GoogleForms with 8 potential users (ages: 23 - 38 years old) who have adopted a pet before or want to adopt a pet in the future.
My main goal here was to gain insight into how users would react with my product and what features they would expect my product should have.
Insights
Insights
With the survey results, I found 3 main user pain points that I definitely wanted to address with my website:
Quotes
Quotes
"I think professional pictures help them get adopted with their story."
"I think professional pictures help them get adopted with their story."
"Can I just come and adopt the animal? Or do I need to undergo a specific check up first?"
"Can I just come and adopt the animal? Or do I need to undergo a specific check up first?"
Personas
Personas
To think from a user perspective and understand user behavior as well as user needs, I created two personas. With these two specific personas in mind, I better understood how my user would potentially interact with a pet adoption interface and what pain points I need to have in mind to have my website address these and make it fully usable.
User Flow
User Flow
Next, I drew the main user flow for my website involving the user task "Finding and applying to adopt a shelter animal (e.g., dog)".
This was to understand how a potential user will go through my website and how the user would interact.
Sitemap
Sitemap
This created sitemap helped me figure out how many screens I would need to design in order to have a fully functional main user flow of my website. It also helped me improve the overall website navigation.
Paper Wireframes
Paper Wireframes
Then, I sketched out paper wireframes for each screen for my website.
The following shows my iteration of the home screen.
My focus was on implementing the search tool to find available shelter animals for adoption, as well as navigation bars and an overview of the adoption steps.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Screen Size Variation
Screen Size Variation
At this point I did a quick research and it turned out that Gen Zers and millennials are more likely to adopt pets (source). Since Gen Zers and millennials primarily use and rely on their mobile phones (source), it was critical for me that I make my website responsive and I started to work on designs for the additional mobile screen size.
Digital Wireframes
Digital Wireframes
Moving from paper to digital wireframes in Adobe XD made it easy to understand how the redesign could help address user pain points and improve the user experience.
Lo-Fi Prototype
Lo-Fi Prototype
Furthermore, I connected all of the screens involved in the primary user flow to create a low-fidelity prototype. The main user flow involved the screens of searching for available shelter animals and filling out the pet adoption application form.
You can also view the PAW low-fidelity prototype here.
PAW Lo-Fi Prototype.movUsability Testing
Usability Testing
I conducted 2 rounds of usability studies with potential users and tested the lo-fi prototype first and then the hi-fi prototype in the second study.
For each usability study, users were given a scenario and asked to do the following tasks:
Find dogs near you to adopt
Select a dog profile and add the profile to your favorite pet list
Apply to adopt the dog "Kayla" and complete the application process
Findings
Findings
1st usability study:
1st usability study:
Users were distracted by the big navigation bar and want a smaller one.
Users were confused that they couldn't adopt more than one animal at a time.
2nd usability study:
2nd usability study:
Users had a difficult time using the search tool because they didn't know how it worked.
Users wished for a way to contact the animal shelter.
Design Changes
Design Changes
Based on these insights, I changed to the following things.
1. Made the navigation bar much smaller so users aren't distracted by it anymore.
1. Made the navigation bar much smaller so users aren't distracted by it anymore.
2. Improved the filter options so that users can adopt more than one animal.
2. Improved the filter options so that users can adopt more than one animal.
3. Added a contact field on each dog profile to let users get in touch with the animal shelter when they have questions.
3. Added a contact field on each dog profile to let users get in touch with the animal shelter when they have questions.
4. Created an introduction for the search tool so that users can fully understand how it works.
4. Created an introduction for the search tool so that users can fully understand how it works.
Visual System
Visual System
The following visual system I created in Adobe XD allowed me to have a better overview over my components, typography, buttons and illustrations that I included in my website.
Hi-Fi Prototype
Hi-Fi Prototype
My high-fidelity prototype followed the same user flow as the low-fidelity prototype.
You can also view the finished PAW high-fidelity prototype here.
PAW Hi-Fi Prototype.mov
Accessibility Considerations
Accessibility Considerations
To make my website besides being responsive also accessible, I used:
Headings with different sized text for clear visual hierarchy
Landmarks to help users navigate the site, including users who rely on assistive technologies
Values
Values
PAW would be definitely valuable to users and potential businesses by being:
a tool to accompany animal shelters in finding shelter animals the best suitable forever home
useful in providing necessary adoption steps and an online application form to make the adoption process less complicated for both the animal shelter and the people who want to adopt
overall clear, understandable and easy to use which makes this website more accessible to more people and hence, more shelter animals can be adopted
Future Steps
Future Steps
What I learned:
What I learned:
I learned how to create fully functional image carousels
I created an interactive search tool within a prototype
I learned that the feedback from the usability studies are really important and have a huge impact on how to perceive the final product which I found very interesting
What I could have done better:
What I could have done better:
More iterating! I believe that UX is never done and I guess that I could still find more user pain points and make my website even more usable
I think that I could have done even more research in the beginning and plan to do more thourough research in the next project
Next Steps:
Next Steps:
Conduct a follow-up usability testing to validate whether all pain points have been addressed and wheather new ones arise
Conduct more user research to determine new user needs
Thank you for reviewing my work
on the PAW website!
Thank you for reviewing my work
on the PAW website!
Page updated
Google Sites
Report abuse