UX + UI / Research / Visual Design / Branding
Research was conducted to create a user-centric design for a pet adoption website, aiming to cater to users' needs, personalities, and lifestyles. The goal was to facilitate an effortless process of finding a perfect furry companion, aligning with users' preferences and making the search for a lifelong friend a seamless experience.
FurEver Friend is a adoption website for animal shelters in Arizona. The website uses profile matching to match future owners with pets who fit their lifestyle, temperment, personality, and needs. FurEver Friend also makes the adotion process easier by helping future owners get to know their pet through descriptions of personality traits, vidoes, favorite things and activities, and pictures. Adopters are easily able to adopt a pet by submiting a application and hold pets through payments. They are easily and quickly notified from shelters due to time limit pressures placed on pet’s current foster home.
Future pet parents need a easier way to adopt pets that match their lifestyle and personality.
June 2021 to July 2021
Design a web aplication that is responsive for different devices that allows future pet parents to match with their pefect match and easier adopt with a easy adoption process mainly online.
Lead UX / UI Designer and Researcher
Conduct interviews, paper and digital wireframing, low and high- fidelity prototyping, conduct usability studies, accounting for accessibility, and interacting on designs.
I conducted a research remotely on Google for users that have used popular adoption apps like Pet Finder. I asked them a series of questions to get a understanding of their frustrations with adopting a pet, what they liked most, and where it can be approved.
Users are interested in adopting a pet that is no longer avaliable but is still on the website.
Applications are harsh, long, and boring to most users. Sometime they are not avaliable online.
Users are not receiving response back from their interests in a pet in a timely manor.
Users rather not go into a shelter and rather do most of the application process online.
“I am in a new city and living on my own for the first time, I would love a puppy.”
Cassey just moved to a new city and is getting used to her young adult years of living on her own. Cassey sometimes gets home sick and scared to sleep in her new apartment. She wants a puppy to take care of for emotional support and to guard the house.
Cassey is a young professional living in a new city who needs a way to view adoptable pets with descriptiona of personality and temperment, because it is difficult to find a pet that fits her needs and lifestyle and going to shelter is stressful.
Lawrence is a single dad living with his daughter. Lawrence wants to get a new pet for his 10 year old daughter Olivia. He would like to know what more information on the type of pet to get for her that matches her age group. He wants the pet to be educational and teach his daughter responsibility.
“My daughter loves animals and I would love to get her a pet.”
Lawrence is a father and a therapist who needs a pet for his daughter that matches her age group and is great with children because she wants to teach his daughter resposibility by taking care of a pet.
Mapping Cassey’s user journey revealed how helpful the FurEver Friend web application would be to her.
Drawing out paper wireframes helped me quickly get ideas out and infront of me qickly while still maintaining the users needs as the number one priority.
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goals here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Once paper wireframes were completed, I had an understanding of the layout of the app. However during creating the digital wireframes, I did change some layouts to better fit the user’s needs.
Easy to see and understand how to get matches.
Show where pets are closets to you for a quick search.
Easy to see and understand quick search bar
Pets that were recently viewed by user so that they are easier to find later.
Once the digital wireframes were created, I created the low - fidelity prototype, in which connected the user flow for matching owners with future pets and completing the adoption process.
A study was conducted using the low-fidelity prototype. The study revealed changes that were helpful to increase the user experience. This helped guide the designs from wireframes to mockups.
Although there was a confirmation screen of payment submition and application, They wanted a way to view their application and payment.
Some users want to have the option of getting in contact with organizatiion to ask questions before adopting.
Based on insight I made changes to improve the sites pet matching flow. Instead of placing the quiz button before at the end of the create profile page, I enabled a pop up after the create profile button was pressed so users did not miss the button by mistake.
This was the begining of the high-fidelity design with regards to the need changes that were found in the usability test.
Based on insight I made changes to improve the site pet adoption flow. Users complained about not being able to contact the organization first for information and did not like adoption was the only option.
Colors were inspired by canine color vision. Canines are limited to blues, yellows, and some shades of grey. I felt it would be fun to incorporate that imformation into the UI of this disign.
This color was used for the match percentages, prices, and payments. This was bold and different from the rest of the colors, so it helped users eyes gravitate to it more.
Prototype
Helvetica Neue is the main font of this application. It is simple and easy to read and most computers already come with thus font installed.
I created a mobile screen size version for users who prefer mobile devices to complete the adoption process.
The final prototype presented a clean user flow for future pet owners to match and adopt their FurEver Friends.
Clic the link below to interact with the prototype.
Able to zoom on text for users who are visually impaired
For visually impaired individuals, alt text was added to images for screen readers.
Conduct more user research to determine any new areas of need.
Create a admin option for fosters and organizations to post their animals up for adoption.
This application made finding the perfect pet easy and going through the adoption process.
I learned when designing this website that a great idea is only good when it is user friendly. I put users ahead of all features that would make their user experince great.
Thank you for your time of reviewing my work on the FurEver Friend pet adoption website! If you’d like to see more or get in touch, my contact information is provided below.