DYR
A responsive web design for a animal shelter with partners all over the nation that provides adoption and rescue facilities.
Duration
4 weeks
Role
UX\UI Designer, UX Researcher
Tools
Figma, Miro, adobe
Background
DYR is a non- profit association of animal shelters. They partner with shelters all over the country to raise awareness and foster the discoverability of pets waiting for a home. They are in a need of a responsive website design to cover this purpose. Awareness, discoverability, and accessibility are the primary values DYR wants to address to their users while browsing their website.
DYR is a non- profit association of animal shelters. They partner with shelters all over the country to raise awareness and foster the discoverability of pets waiting for a home. They are in a need of a responsive website design to cover this purpose. Awareness, discoverability, and accessibility are the primary values DYR wants to address to their users while browsing their website.
Project Goal
DYR is in need of a responsive website on any device that covers core functionality: search for pets, information about specific pets, and information about DYR/shelters. They currently do not have a defined brand, so they are also looking for a fresh rebranding. Additional screen that provides flexibility to upload information about each pet would be a bonus point for users along with innovative functionality to the website based on research that helps DYR achieve.
DYR is in need of a responsive website on any device that covers core functionality: search for pets, information about specific pets, and information about DYR/shelters. They currently do not have a defined brand, so they are also looking for a fresh rebranding. Additional screen that provides flexibility to upload information about each pet would be a bonus point for users along with innovative functionality to the website based on research that helps DYR achieve.
Problem
DYR needs a fresh and modern responsive website (desktop, tablet, and mobile) that covers core functionality such as search for pets, information about specific pets and the information about DYR/ shelters. DYR needs a website that will provide easy access for shelters in uploading their animal’s information and content.
DYR needs a fresh and modern responsive website (desktop, tablet, and mobile) that covers core functionality such as search for pets, information about specific pets and the information about DYR/ shelters. DYR needs a website that will provide easy access for shelters in uploading their animal’s information and content.
Design Process
1
Research
Market research
Competitor Analysis
User Interviews
Competitor Analysis
User Interviews
2
Define
Persona
Product Roadmap
Sitemap
User Flow
Product Roadmap
Sitemap
User Flow
3
Design & Prototype
Sketches
Mood-board
Lo-fi wireframes
Hi-fi wireframes
Prototype
Mood-board
Lo-fi wireframes
Hi-fi wireframes
Prototype
4
Iterate & Revisions
Usability test
Affinity Map
Iteration
Affinity Map
Iteration
Research
I aim to determine and understand user’s POV of what user usability and accessibility refers to in understanding their process in adopting pets and what they look for from an animal shelter website for information and content. I started to research on my competitors and interviews my participants to gain insights in determining one's needs, wants and motivation in their decision making process while adopting pets through a website online. To find out user’s and adopters’ main goal while looking to adopt a pet from shelters. And based on their wants, needs and assumptions, I want to create a responsive website according to the primary research and secondary research done that will provide users with accessibility and functionality at its best while looking for a pet to adopt or re-home a pet for adoption.
Research Objectives
1. Determine individuals and their interest in adopting pets
2. Understand and research on non-organization adoption sites
3. Determine pet adopters needs, wants and pain points in adopting a pet through a website
4. Study and understand shelter adoption organizations
5. Compare pros and cons of competitors website
Some of the research questions for DYR were:
Research Methodologies
User interviews: create an interview script first and then conduct 3-4 users that fit my research. Individuals should be willing to adopt a pet or have been adopters before. Questions their livelihood, insights and curiosity while going through adoption process through website.
Comparative and competitive research: it is important to research other competitors to understand how one can improve their work and values for a better outcome. For example, research to find out if other competitors offer on the spot video call appointments, live agents support, functionality with their field inputs and search features, patterns and flows, etc.
Card sorting: a fun activity to see how users would preferably navigate through the website and to see how it needs to be organized and what elements needs to be prioritized.
Research Objectives
1. Determine individuals and their interest in adopting pets
2. Understand and research on non-organization adoption sites
3. Determine pet adopters needs, wants and pain points in adopting a pet through a website
4. Study and understand shelter adoption organizations
5. Compare pros and cons of competitors website
Some of the research questions for DYR were:
- Why do individuals adopt pets rather than shop?
- What does non-profit organization gain the most during adoption?
- How much experience does a user have in being an adopting a pet?
- What is the user’s expectation during the adoption process?
- Any events influencing to want a pet?
- What are the different steps or functionality they look for on the website while adopting a pet?
Research Methodologies
User interviews: create an interview script first and then conduct 3-4 users that fit my research. Individuals should be willing to adopt a pet or have been adopters before. Questions their livelihood, insights and curiosity while going through adoption process through website.
Comparative and competitive research: it is important to research other competitors to understand how one can improve their work and values for a better outcome. For example, research to find out if other competitors offer on the spot video call appointments, live agents support, functionality with their field inputs and search features, patterns and flows, etc.
Card sorting: a fun activity to see how users would preferably navigate through the website and to see how it needs to be organized and what elements needs to be prioritized.
Competitor Analysis
I analyzed the strength and weakness of 3 other competitors and studied the current
design and market trends of other animal shelter online websites. for my competitive analysis i used two research methodologies:
I analyzed the strength and weakness of 3 other competitors and studied the current
design and market trends of other animal shelter online websites. for my competitive analysis i used two research methodologies:
- Competitive Analysis
- User Interviews.
User Interview
I interviewed 3 participants via phonecall, zoom and social media platforms. I prepared an interview script for them and a question sheet for myself before starting the interview. After briefing the process of the participation, we continued with the interview.
Participants:
- Anyone above the age of 21
- New pet adopters or experienced pet owners
- Single, couple or family pet adopters
- People who work in non- organization adoption or shelters.
Interview questions:
Do you currently own a pet? Do you have experience being a pet parent?
What factors led to you on your decision in wanting a pet?
Are you a picky when it comes to owning a pet?
If you had to adopt a pet via website, do you usually go through a national shelter's website or a local shelter from your neighborhood? And why?
What are some of the elements and design of animal shelter websites that catches your attention?
On a scale of 1-10 how important are search filters (age, breed, story), application forms and booking an appointment when looking for a pet online?
Key Findings from the user interview:
I interviewed 3 participants via phonecall, zoom and social media platforms. I prepared an interview script for them and a question sheet for myself before starting the interview. After briefing the process of the participation, we continued with the interview.
Participants:
- Anyone above the age of 21
- New pet adopters or experienced pet owners
- Single, couple or family pet adopters
- People who work in non- organization adoption or shelters.
Interview questions:
Do you currently own a pet? Do you have experience being a pet parent?
What factors led to you on your decision in wanting a pet?
Are you a picky when it comes to owning a pet?
If you had to adopt a pet via website, do you usually go through a national shelter's website or a local shelter from your neighborhood? And why?
What are some of the elements and design of animal shelter websites that catches your attention?
On a scale of 1-10 how important are search filters (age, breed, story), application forms and booking an appointment when looking for a pet online?
Key Findings from the user interview:
- 1Needs4 out of 4 participants preferred direct communications with the owner/shelter
- 2MotivationAll 4 participants were looking for an organized and detailed website.
- 3Frustration2 out of 4 participants were concerned about not finding the right choice or pet.
- 4Needs3 out of 4 though filtering options are a major key in finding their choice of pets among hundreds.
- 5Motivation4 out of 4 participants were motivated to adopt a pet to give them a home they deserve and to take care of them.
- 6Frustration3 out of 4 participants were concerned about long and complicated adoption process via websites and online
Define
Persona
After the research process, and the data I gathered, I was able to build two persona that suited well with DYR'S potential users.
After the research process, and the data I gathered, I was able to build two persona that suited well with DYR'S potential users.
Sitemap
The next process moving forward was to structure information and content within the product. I build a sitemap to allow users to visualize how individual webpages or site section are related to each other.
The next process moving forward was to structure information and content within the product. I build a sitemap to allow users to visualize how individual webpages or site section are related to each other.
Task & User Flow
I created my task flow based on my persona in completing a specific sequence of task. Likewise, user flow was created through a user's POV from starting the task to completing it.
I created my task flow based on my persona in completing a specific sequence of task. Likewise, user flow was created through a user's POV from starting the task to completing it.
Design & Prototype
Sketches
Starting with my sketches, I started to create low-fidelity sketches on papers for the various pages/screens that I was using for my application. sketching out the screen helped me establish the foundation on how the features would function or interact among the screens.
Style Tile
Aesthetic wasn't key in terms of visuals both for the participants and DYR. However, I
created a style tile that would represent not just the brand but also the users who will be accessing them. The vision was to create an overall modern, professional yet playful and easy on the eyes website. I used the style tile in conceptualizing visuals for my high fidelity designs.
Hi-Fi Wireframes
After sketching few sketches of low fidelity wireframes and digitilizied the ones I liked the best. I created hi-fi wireframes for desktop device using different UI elements and UX principles.
Iterate & Revisions
Usability Test
For my usability testing, I asked some of my friends and family if they would be willing to participate in a 20 mins usability test using my high-fidelity prototype that I had created. I conducted it via zoom and Figma. There were some initial problems but I guided them through it all.
Some of the test objectives are as below:
- Test the users\participants first impression of the website
- Observe how users perform while navigating through the website using filter options.
- To discover any pain points that user may experience during performing a task.
- Test and evaluate the overall usability of the site and identity areas of improvement.
- To test and see how quick users take to make up their mind in adopting a pet.
DYR Test goals for the usability test are as below:
- Identity how the user navigates through the websites to accomplish their goals efficiently.
- Determine any difficulty or hurdles while performing the task.
- Determine if users can filter their preferences accordingly.
- Determine reasoning for their errors and mistakes while looking for their choice of pet.
- Identity the user’s likings, preferences, though-process while performing.
- Ask and identify areas of improvements and feedback for future iterations.
Affinity Map
Success
- 3 out of 4 participants liked how diverse the filtering options were
- 4 out of 4 participants completed the task in less than 20 mins.
- 3 out of 4 likes how straightforward the inquiry process was.
- 3 out of 4 participants liked that the website looked organized and promising.
Painpoints
- 2 out of 4 participants wanted videos of the pet to be included in the pet profile.
- 2 out of 4 participants wanted to see the adoption fee on the pet profile.
- 3 out of 4 participants wanted the fav icon to be easier on the eye.
- Little confusing since the prototype was limited.
Opportunities
- Add a personality test section to match the perfect pet for you.
- Overall, Visual retouches throughout the site like clear hierarchy, color, spacing, usability and functionality to be made.
- Add pet adoption fee about each pet under their profile.
Revision and iteration
Based on my usability testing, I prioritized revision to my prototype. Iterations were made keeping in mind the pain-points and opportunities of the users.
My first iteration was done in the homepage where I added a bonus experience for users who would appreciate matching making for pets. This section would provide the flexibility in finding the right pet for you based on your criteria.
My second iteration was made on the fav icon. Most of my users who interacted with my prototype mentioned how the fav icon color combination was too much on the images. They recommended something visible yet easier on the eyes for the color combination. I thus changed the red icon to Beige.
My Third iteration was made in the product page of the pet. One of the most important actor in adopting a pet through a online website was to have all mandatory and necessary information within the page so it allows users to have full in depth accountability and transparency in adopting a pet before seeing it in person. Therefore, I added a section where users have the freedom to read and learn about pet insurance policy and adoption fee along with a pre-approval form to see if they fit the criteria in being a pet parent.
Reflection
Finding and adopting a pet is a huge responsibility and requires a decision that shouldn't be taken lightly. With so many options available all over the country, it is important to help users narrow down their choices through customization of filters. The biggest challenge was finding the right balance between adding enough information to be informative without being congested with too many details. Through competitive analysis and user interviews, there was quantitive data to help support what features the users needed to have in order to be successful. Once that hurdle was resolved, the task would be straight forward and completed when users were able to go through the inquiry process and land on the confirmation page.
