Helping cats and dogs find their right home
Responsive web design, Style guide development, Brand & Identity
Objective
DYR is an association of animal shelters. They partner with shelters all over the country to raise awareness and discoverability of their pets waiting for a home and their availability of pet adoption services. To achieve this purpose, they were looking for a responsive website design and a new brand identity. They wanted to create a platform that allows people to discover and see all the available animals in any shelter close (or not) to them and also, to learn more about shelters.
Timeline: 2 weeks, October 2017
Role: User Researcher, UX/UI Designer, responsible for all phases in the design process
Tools: Typeform, Sketch, Craft, Invision
Research
Research was conducted to gain better understanding of the motivation and why users would utilize DYR responsive website instead of going to a rescue shelter, a pure breeder owner, a private adoption or an adoption website/center in person and to learn more about the most common frustrations users encounter when browsing other pet adoption websites.
Methods
Market research (competitor analysis)
User research (interviews, surveys)
Market Research
Competitor analysis was conducted to do SWOT analysis of other similar pet agencies, analyzing the following companies:
Petfinder
Adoptapet.com
AllPaws
Humane Society of Missouri
ASPCA
Exploring their feature set used in their websites helped me to identify opportunities to captivate pet lovers and meet their needs in their decision-making on choosing the right pet.
User Research
One on one interviews and survey were done to uncover users’ pain points, frustrations and motivations with their pet adoption experience.
Interviews
I conducted one on one interviews with 4 people via video conference in order to better understand what their experience is like adopting a pet and visiting animal shelter and to learn what obstacles they have faced along the way. They all currently have pet(s) in their household. 3 out of 4 adopted their dogs from a pure breeder while the 4th one adopted cats from a no kill animal shelter. They all gave insights as to what they would like to see in the DYR website that would be useful for them in planning for another adoption in the future.
A summary of their wishlist include:
user friendly, email-based communication
current/updated info about the animals that they have, photos, background history
pet Videos, 20 mins of interaction/play with pets in person allowance, more info about its health and background.
animal personality info
temperament info on dogs
the energy levels as to help determine if the dog is fit for the current living situation such as apartments. For example, apartments wouldn’t be ideal for dogs needing a lot of exercise.
Survey
I used Typeform to create a survey to reach more random people to find common patterns among their pet adoption process and to learn what new features they would like to see in the new DYR website and what to improve in the existing adoption process in general. I got 15 responses. 38% of the responses indicated they adopted their pets from animal shelter whereas there were lower percentages less than 35% that they adopted pets through private adoption, animal rescue, stray animal or pet adoption center. 56% of them indicated that they go to animal shelter website, friends/family, and pet adoption website to learn and search for pets before adoption. 75% have chosen personality profile and videos as features they hope to see in the animal shelter association website while 63% would like to learn about pet health.
Here are few quotes regarding the frustrations experienced with existing pet websites:
“On Petfinder, even though you can filter down, the results are still a little overwhelming.”
"Available animals aren't updated that quickly"
"Lack of current contact methods or unresponsive to email, etc"
Quotes about their wishlist:
"Indications as to if they are doing intake and pointers to other options if they are not. I have found dogs before and had difficulty placing them somewhere safe/no-kill ; Which are kill vs no-kill"
"Breed, demeanor, best living conditions"
"If the animal has any past drama or history"
Persona
I created a persona based on the findings gathered from the user interviews and survey to help shape future design decisions. Stephanie, our primary user, is currently looking for a dog to adopt from the animal shelter for her son’s companionship and already knows that she wants a dog with low shedding and that can adapt to living in her condo residence. So for her son’s safety, her goals for making the right decision in adopting the right dog consist the knowledge of the pet’s temperament, energy level, living preferences, the hair coat length and whether it gets along with small children. She also thinks it’s important to take the opportunity to go spend time and play/interact with the dog candidate at the animal shelter before finalizing the adoption process.
Defining the product
After doing research and collecting insights, we needed to determine the information architecture that would help guide the users from finding a pet to adopt to scheduling a meet and greet with the pet candidate and learning more about an animal shelter.
Sitemap
I created a visual document outlining the sections and pages in the site to help visualize how the information would be organized and displayed in a way that is easily searchable and understood by the pet seekers to help them achieve their goals.
Task Flow
I laid out the task flow based on the user journey from searching for a pet for adoption to scheduling a playtime (meet and greet) or pre-applying online to expedite adoption process.
Designing
Responsive Wireframes
They were made to outline the layout and structure of the DYR online site taking the pain points and wishlist uncovered in the research phase into account.
Brand & Identity, UI Design Patterns
The goal for the site's brand is to convey the excitement of adopting a pet and its cheerfulness.
Responsive UI Interface
Visual design is then applied to the lo-fi wireframes.
Desktop
Mobile
Testing
Utilizing both interactive lo-fi and hi-fi prototypes in Invision using digital wireframes that I developed in Sketch, the navigational flow and information architecture were the focus of the user test to determine the future pet owners' level of understanding and ease of use while moving through the site. Test subjects were asked to perform the following tasks: search for a pet, schedule a meet and greet with pet candidate and learn more about an animal shelter. All test subjects were able to navigate the site and successfully complete all tasks with seamlessly.
Affinity map
Affinity map was created based on the user test feedback compiled during the 2 rounds of usability testing to sort and prioritize the next set of improvements to focus on. The highest priority is to ensure the site is self-explanatory by using clear, intelligible symbols/icons and labels such as "taking in" versus "intake" to help guide potential pet adopters to make a right decision and also to ensure that visual hierarchy of information is easily scanned through and clearly understood.
Branding
DYR didn’t have a defined brand. So after exploring the competitor sites and considering DYR’s values, my goal for DYR’s brandy identity is to reflect the trust, the possible formation of a new bond/relationship between pet adopters and pets, the excitement of adopting a pet and its cheerfulness.
Next Steps
Reiteration will be continued to update the hi-fi wireframes based on the user test feedback to ensure DYR site meets the needs of pet-seekers and delivers the seamless pet search experience. In addition to delivering a responsive website to help people discover animals and learn more about shelters, DYR has near-future plans to create a website and app for shelters to upload animal information easily. If time, budget, and resources permit, we can focus on expanding that functionality in the next iteration gearing towards shelters as our target users.
