Design Tool: Adobe XD
PROJECT: WA Animal Shelter
DURATION: 6 months
GOAL: To design a responsive website that helps users easily find the pets they want and arrange their time for a pet adoption interview.
Overview
Animal shelters are often the go-to destination for those who are looking to adopt a pet. This website is designed to make it easy for users to find pets and book adoption interviews online prior to visiting the shelter.
Challenges
Design a user-friendly menu that enables users to easily navigate.
Design a filter feature that enables users to narrow down search results.
Create an online application form that allows users to easily fill out and submit it.
Create a calendar view for users to check and book available appointment times.
Develop appointment management system for users.
RESEARCH
Key Questions:
Who are our target users for this website?
What are the primary goals and motivations of our target users when using this website?
When are our target users most likely to use this website, and for what purposes?
Where are our target users most likely to access and use this website?
Why would our target users choose to use this website over other available options?
How can we make sure our website stands out and offers meaningful advantages to our target users over other options?
We conduct research to identify the target user, study competitors, and understand user needs and pain points. This provides direct insights to improve the product and deliver the best user experience.
Target Users
People residing in Taiwan.
Aged between 21-55 years.
Pet owners or interested in adopting animals.
Meet the Users
Persona 1
Name: Celine Chen
Age: 27
Occupation: Fashion Designer
Celine is a 27-year-old female fashion designer based in Taipei who is a pet owner and deeply cares about her furry companion. She is considering adopting another pet and understands the responsibilities that come with it. Celine hopes that the animal shelter website will not only help her find her next pet but also provide resources for finding quality veterinarians and online stores for pet supplies.
User Journey Map
Persona 2
Name: Jennifer Wong
Age: 31
Occupation: Online business owner
Jennifer is a 31-year-old single mother and online business owner who wants to adopt a pet for her child. Her busy schedule makes it essential for her to manage her appointments efficiently and avoid waiting for hours at the shelter. She hopes the animal shelter website will allow her to book adoption interviews easily and view available appointment times that fit her busy schedule.
User Journey Map
DESIGN
By working through a systematic process, we developed a prototype that enabled us to conduct usability research and gather feedback from users.
Initial design concepts
Competitive audit
Paper / digital wireframe
Accessibility considerations
Low fidelity prototype
Usability research
Mockup
High fidelity prototype
Usability research
Initial design concepts
Caring for pets can be challenging, especially for those who prefer to adopt rather than buy. While we may not be able to provide direct support for pet owners, we can simplify the adoption process through a user-friendly online platform. That's why we're developing a responsive website for an animal shelter.
Competitive Audit
We have analyzed several potential competitors, both direct and indirect, to identify their strengths and weaknesses. By providing an easy-to-use system to our users, our animal shelter has the opportunity to stand out in an oversaturated market.
Great search tool vs Poor search tool.
Simplified online booking system vs Complex online booking system.
Intuitive navigation vs Confusing navigation.
Online appointment management system vs Traditional call-in system to schedule appointments at the animal shelter.
Filling up application forms online vs Filling up application forms in-store.
Wireframes
Paper Wireframes
To begin designing the home page, I created several wireframes and quickly finalized the first version.
Digital Wireframes
Responsive Web Design
As we needed a prototype for usability research, I converted the paper wireframe into digital wireframes for both desktop and mobile screen sizes.
Screen Size
Desktop screen 1920 x 1080 px
Mobile screen 428 x 926 px
Accessibility Considerations
Adding voice search functionality to assist users who may have difficulty typing words into the search bar.
Using high-contrast colors when designing buttons, can help guide users through tasks more easily.
Using icons to replace text button designs on mobile screens can prevent users from having difficulty reading the text due to the small screen, making it easier for them to complete tasks.
Wireflow
After creating all the preliminary wireframes, we reviewed the research results to ensure that all the wireframes we made met the users' needs. Then, I proceeded to create a low-fidelity prototype.
Usability Research
Introduction
Project background: Our team is working on developing adoption processes for local animal shelter sites. We have observed that while many users enjoy browsing animals on the site, some abandon the website before completing the process of booking an appointment for an adoption interview. To address this, we aim to create a feature that simplifies the pet-finding process for users and provides clear steps for booking an animal adoption interview.
Research goals: Our goal is to gain insight into the reasons why users may discontinue using the website before completing the adoption procedure. We aim to identify pain points and areas of difficulty that users may experience while browsing the website.
Research questions
What factors prevent users from completing the adoption procedure?
Are there any steps in the adoption process that users find difficult?
How long does it typically take for users to find a pet using the search tool and schedule an adoption interview?
Do users find it easy to confirm their appointments for the adoption interview?
Are there any website features that users find confusing or difficult to use during the adoption process?
Key Performance Indicators (KPIs)
Time on task: How much time do users spend to find a pet and complete the booking process for the adoption interview?
Drop-off rates: What causes users to leave the website before completing the task?
Conversion rates: What is the percentage of users who complete the adoption process after finding a pet?
System Usability Scale: A questionnaire to evaluate customer feedback on the ease of use and overall satisfaction of the adoption process.
Usability Test Plan
Objective: To assess the usability of the adoption process on the website and identify any potential issues that users may face.
Method: Unmoderated usability test.
Participants: Local pet owners and users interested in adopting pets in Taiwan.
Location: Online.
Date: The sessions will take place on August 2-3 (normal business hours) and August 4-5 (after hours).
Tasks: Participants (7) will be asked to find a pet and book an adoption interview through the website. They will then complete a questionnaire on their experience.
Duration: Each session will last for 15-20 minutes.
Data Collection: Participants' screens and voices will be recorded during the session. The questionnaire will include questions about the users' experience and feedback on the usability of the website.
Compensation: Each participant will receive a $10 coupon for an online pet food store.
Participants
Participants who are:
Reside in Taiwan.
Fall between the age range of 21-55 years.
Own pets.
Consider adopting an animal.
Tasks
Use the search tool to find a pet you would like to adopt. (Follow-up question: Was the search tool easy to use? Did you find what you were looking for?)
Schedule an appointment for an adoption interview. (Follow-up question: Did you encounter any difficulties while scheduling the appointment?)
Confirm your appointment for the adoption interview. (Follow-up question: Was the confirmation process clear and easy to follow?)
Provide feedback on your overall experience with the website. (Follow-up question: Were there any features that you found confusing or difficult to use?)
A series of user flow prompts to guide the participants to complete the tasks and a follow-up question for each prompt.
Engage with Users
Once we have created the low-fidelity prototype, we will engage with selected potential users by sharing our research plan with them. Our team has prepared a survey with 10 questions for 7 participants. They will need to answer the questions, run through different scenarios in the prototype by following the prompts, and answer the follow-up questions. Everything will be conducted remotely, and we will gather all feedback for further refinement of our design.
Key Problems
a. Search bar
Users are frustrated that they have to go back to the home page every time they want to use the search bar.
b. Search tool
Users want an easier way to search for pets. Some users have difficulty typing the correct breed of pets, while others have trouble narrowing down search results.
Mockups
Responsive Web Design
The next step is to turn all of the low-fidelity wireframes into high-fidelity mockups, which will bring us one step closer to the final product.
Screen Size
Desktop screen 1920 x 1080 px
Mobile screen 428 x 926 px
Improvements
a. Search bar
The search bar is now accessible on every page, eliminating the need for users to return to the home page to use it.
b. Search tool
The updated design allows users to easily narrow down their search by utilizing the filter tool, helping them find the desired pet quickly.
Sitemap
To address the navigation difficulties users face on the website, I have created a user flow and sitemap that streamlines the process of booking pet adoption interview appointments.
My primary goal is to reduce the number of steps required to complete the process, making it easier and more efficient for users to find and book appointments.
High Fidelity Prototype
Desktop Screen
High Fidelity Prototype
Mobile Screen
2nd Usability Research
Key Problems
Manage appointments
Users are frustrated that the current design only allows them to cancel appointments, but they are not able to change the appointment time.
Improvements
I addressed the issue of users being unable to change their appointment time by adding a “Change Appointment” button that takes them to the rescheduling page.
Complete the Challenges
Challenge 1
Design a user-friendly menu that enables users to easily navigate.
To address the challenge of designing a user-friendly menu that enables easy navigation, one solution could be to create drop-down menus. Users can select the species they are looking for, such as dogs, cats, and other small animals. The shelter can easily add more options to the menu as needed. This would simplify the user interface and make it easier for users to find what they are looking for.
Challenge 2
Design a filter feature that enables users to narrow down search results.
Create filters to help users narrow down search results. This will save time and make it easier to find pets among all animals. Users can filter search results by selecting a breed, age, size, gender, and color. Additional filters can be added to accommodate more specific search criteria.
Challenge 3
Create an online application form that allows users to easily fill out and submit it.
The website enables users to complete and submit relevant documents online when adopting pets. This feature eliminates the need for users to fill out and sign paper documents, making the adoption process more eco-friendly. Once the shelter retrieves the user's account, they can easily access the completed documents. However, if the user prefers to download or print the documents, they have the option to do so.
Challenge 4
Create a calendar view for users to check and book available appointment times.
Users can view the shelter's available appointment times on the website, eliminating the need to wait for an interview at the animal shelter. This feature saves both users and the shelter valuable time.
Challenge 5
Develop appointment management system for users.
Users can easily cancel or reschedule their adoption interview appointments online, saving time and hassle for both the user and the shelter. When the user cancels or changes the appointment, the shelter will be notified automatically.
Style Guide
I chose #54086B as the brand color, which is a dark shade. To create a high-contrast and eye-catching button design, I incorporated bright and vivid colors such as #FF0BAC and #00BEC5 and used black and white for the rest of the design.
Additionally, I added a gradient to the background to give the design a modern feel.
