PROJECT OVERVIEW
The Project
This website is designed for an animal adoption company (Pawmise) that allows users to search/browse available animals for adoption before going in person to meet the animals. The website helps to smoothly streamline the adoption process by allowing users to submit an enquiry form to see whether their lifestyle/living environment is suitable for the animals they are interested in adopting.
The Problem
Going into an animal shelter in person takes time/effort - it also does not guarantee a successful adoption application (staff has to evaluate the users compatibility with the animal, environment considerations etc.). Having multiple clients come in-store wanting to enquire can exhaust staff as they have to go through both the animals/customers information to find a match.
The Goal
- To design a website that will assist users in browsing and enquiring for animals they are interested in before meeting in person.
- To ease the enquiry process so that it can all be done on the website without the need to email staff and fill out forms in separate documents.
- To ease the enquiry process so that it can all be done on the website without the need to email staff and fill out forms in separate documents.
Responsibilities
- Research into user habits by conducting interviews
- Paper and digital wire-framing
- Low and high-fidelity prototyping
- Implementing usability studies
- Accessibility considerations
- Iterating on designs.
- Paper and digital wire-framing
- Low and high-fidelity prototyping
- Implementing usability studies
- Accessibility considerations
- Iterating on designs.
Time Frame
July 2022 - December 2022
Program Used
Adobe XD
--------------------------
USER RESEARCH
I conducted interviews to find out the needs of users who have pets/interested in adopting a pet and their thoughts/experience on visiting shelters and the adoption process.
Pain Points
Time:
Some users do not have the time to go in person to browse all available animals and get to know their individual information.
Multiple enquiries:
Most existing online adoption websites require you to submit individual applications for multiple animals you are interested in adopting.
Easy navigation:
Users require a simple to use interface where they can browse and enquire all on the same website through one easy and quick process.
Responsibility:
A lot of animal shelter websites do not contain information on how to be a responsible pet owner or assess the customer’s readiness to be a pet owner.
Some users do not have the time to go in person to browse all available animals and get to know their individual information.
Multiple enquiries:
Most existing online adoption websites require you to submit individual applications for multiple animals you are interested in adopting.
Easy navigation:
Users require a simple to use interface where they can browse and enquire all on the same website through one easy and quick process.
Responsibility:
A lot of animal shelter websites do not contain information on how to be a responsible pet owner or assess the customer’s readiness to be a pet owner.
User Journey Map
Competitive Audit
I analysed 3 direct competitors - RSPCA (Adopt A Pet), Pet Rescue and Animal Welfare QLD. All 3 are based in Australia and allows users to look online for available profiles of adoptable animals and submit an inquiry on animals they are interested in adopting. I also analyzed an indirect competitor - PetBarn, which is a pet supply retailer, but they offer additional services like Greencross Vets and adoptions.
Information Architecture
User Flow
--------------------------
STARTING THE DESIGN
Paper Wireframes
I drew up different homepage designs, experimenting with different placements of items and elements on the page. Then I picked out features that I liked from each design to curate the first homepage design.
The elements that I thought were important throughout my sketches and I wanted to incorporate into my initial homepage design include menu navigation at the top, adoption options (type & location) at the top of the homepage and a pets of the day display.
The elements that I thought were important throughout my sketches and I wanted to incorporate into my initial homepage design include menu navigation at the top, adoption options (type & location) at the top of the homepage and a pets of the day display.
Low-Fidelity Prototype
The main user flow I implemented include searching > browsing > enquiring about pets the user is interested in adopting.
I focused on making the website easy to understand through hierarchy by placing the adoption options at the top (because this was the main flow users would encounter) and having additional content like “Pets of the Day” at the bottom.
I focused on making the website easy to understand through hierarchy by placing the adoption options at the top (because this was the main flow users would encounter) and having additional content like “Pets of the Day” at the bottom.
Screen size variations
Since this project focused on responsive website design, I drew up both a tablet and mobile version of my design to see how they would like on different devices.
Notable elements that were changed include having the search options in drop down menu form and the “pets of the day” section only features one picture at a time in the phone version due to limited space.
Notable elements that were changed include having the search options in drop down menu form and the “pets of the day” section only features one picture at a time in the phone version due to limited space.
Tablet version
Mobile version
--------------------------
REFINING THE DESIGN
High-Fidelity Wireframe & Iterations
Final iterations
I was not happy with the overall homepage, especially the header image with the tagline and I felt like having a call to action button just means an extra step for the user.
I merged the tagline/image of the company with the adoption/foster care section. This is because the main user flow is for users to start their adoption process so it made more sense for it to be at the top of the page. Users can also choose between adoption OR foster care, along with a drop down menu so the homepage looks more cohesive and makes selecting the filters a faster process.
After testing, I discovered users were confused with the adoption process section as it describes the enquiry done on the website. The adoption process diagram has now been changed to instruct users on the entirety of the adoption process, and not just the enquiry done on the website.
I also opted out of the carousel for the "Pets of the Day" section so it was less of a distraction, and made the cards for each animal consistent to what throughout the website. It has also been moved down the page so it does not deter users away from the main user flow.
After the high-fidelity prototype was tested, I realised users had more error rates during this step of the user flow because they did not know what to do next after pressing the “Enquire about Mio” button. Originally, I made the drop down menu appear at the top so users can press the “ENQUIRE” button to proceed to next step. To avoid this confusion, I changed the Enquiry List to become a pop-up to help guide users onto the next step of the enquiry process.
High-Fidelity Screen Variations
Phone version
Tablet version
Accessibility Considerations
Labelled iconography: Icons are labelled to help users who use screen readers navigate throughout the website (account/enquiry list iconography at the top right).
Readability: Colour choices in relation to background vs text were all decided to ensure readability via an accessibility colour tool.
Imagery: All animals have profile pictures displayed to help with the browsing experience. Each profile card also contains labeled iconography that displays their main information.
Thank you for viewing!
To view a detailed version of this case study that includes 2 personas, storyboards, completed competitive audit & research plan, please click the button below.
