FLUFFY FRIENDS DOG ADOPTION WEBSITE
Designed and produced by Liz Nadolny.
MY ROLE:
UX Designer from conception to completion.
MY RESPONSIBILITIES:
User Research: Building personas, journey maps, conducting competitive audits and multiple usability studies
Wireframing: Both paper and digital
Prototyping: Low and high fidelity -- iterating on designs from usability study findings
PROJECT OVERVIEW
THE PRODUCT:
FLUFFY FRIENDS dog adoption is a responsive website design targeted to get dogs in the Bay Area out of shelters and into loving homes.
PROJECT DURATION:
October 2023--November 2023
LINK TO PROTOTYPE:
THE PROBLEM:
Provide an easier, more inclusive and uplifting way for Bay Area community members to discover, foster, and adopt homeless dogs in the greater Bay Area.
THE GOAL:
Design a responsive website that can be donated to a local dog shelter and/or foster network.
COMPETITIVE AUDIT
CRAZY 8s
Crazy 8's is a core design sprint method. The goal is to come up with 8 different ideas pertaining to your client's website design in 8 minutes. This allows designers to get in the creative mindset and cultivate new ideas that have a fresh potential by excluding judgment.
SITE MAP OUTLINE
UNDERSTANDING THE USER
The idea for this responsive website design stems from my personal experiences with dog adoption websites for establishments around the East Bay. When I adopted my last dog, I wanted to adopt a dog from a shelter but found most East Bay Area shelter and foster websites to be very depressing, disorganized, and lacking of direct communication of important appointments to the users within the site itself.
I spoke with many friends and family members about what their experiences have been like upon adopting their own dogs via shelters/breeders/fosters/etc. An overwhelming majority of the people I talked to adopted from fosters instead of shelters and tended to have a much more positive experience. So I decided to focus this project on the overwhelming joy and positivity dogs can bring to one’s life, in the hopes that it will promote the adoption of underprivileged dogs and provide that joy for other families as well.
PAIN POINTS
1
DISORGANIZED
Most websites have a ton of great events but the information for them is usually not centralized into one place. I chose to focus all event information into the home screen and user account page to make it user-centric.
2
DEPRESSING
Most websites focus on nag-factor marketing and disregard current trends of social stereotypes. This process should be fun and enjoyable to promote future adoptions/fosters and volunteers as well.
3
COMMUNICATION
None of the websites I have encountered feature a user account page. I have implemented this much like a shopping app so that users can keep track of upcoming/past appointments and user-specific information that are very important for a dog owner to keep track of.
4
DISJOINTED
Most websites focus on the dog listings which are the most important. However, the rest of these websites often consist of disjointed information located in areas that don’t make sense. This project aims to simplify the addition of new info and events by grouping everything into categories.
PERSONAS
&
USER JOURNEY MAP
PERSONAS: STEVE & JOSIE
STEVE'S USER JOURNEY MAP
STARTING THE DESIGN
HAND DRAWN WIREFRAMES
HOME SCREEN
The home screen was intended to highlight the core brand values while advertising current event information (which routinely updates) to increase engagement with the community.
By placing core brand values first, it shows users that Fluffy Friends is focused and determined to give dogs the best experience they are able to provide.
GET INVOLVED
The “get involved” page is artistically promoting that there are many avenues for getting involved, with each one equally contributing to the care of the cute dog pictured at the top.
ADOPTABLE DOGS
I had two goals for the adoptable dogs page:
Make it so that each dog has a stellar first impression.
Make the browsing experience memorable and enjoyable for users.
I decided to go with a "collectible card" container layout to showcase each dog's main characteristics and personality traits.
ADOPTION APPLICATION
Every dog adoption application experience I have had has been extremely long, mostly unsatisfying and seemingly never-ending.
The goal for this element was to make users feel a sense of accomplishment as they progress through each page of questions.
LOW-FIDELITY WIREFRAMES
HOME SCREEN
(MOBILE)
The home screen was intended to highlight the core brand values while advertising current event information (which routinely updates) to increase engagement with the community.
By placing core brand values first, it shows users that Fluffy Friends is focused and determined to give dogs the best experience they are able to provide.
GET INVOLVED
(MOBILE)
The “Get Involved” page is artistically promoting that there are many avenues for getting involved, with each one equally contributing to the care of the cute dog pictured at the top.
RESOURCES
(WEB)
This page is meant to provide a detailed overview of resources for Fluffy Friends procedures as well as local resources many dog owners would likely utilize.
I chose to add 24hr vets and local dog parks because this feature may reinforce a pet owner’s ability to look up a vet during an after-hour crisis. The "Contact Us" section also clearly lists all of the main contact information for FLUFFY FRIENDS shelter.
USABILITY STUDIES
The usability studies had each participant complete the user flow of filling out a dog adoption application. The primary hang-ups that were discovered were in the application and “My Account” page designs. After the first round of usability studies, the adoption application screens had to be reworked. I had originally planned to have a set of overlays that would move in and out as the user completed each section. However, that design became too buggy and was taking away from the overall experience.
The design was reworked to include one overlay and add more indicators for where the user was in the process while filling out the long application.
ROUND 1 FINDINGS
User flow for adoption application was very clunky due to overlays and did not flow well.
User's position in adoption application flow was unclear which made the process feel never-ending.
Returning users wanted a section to reference when they adopted dogs from FF in the past.
ROUND 2 FINDINGS
User flow for adoption application was much clearer and enjoyable.
Users want a document section in "My Account" page.
Users found "Dogs I've Adopted/ Fostered" sections to be an enjoyable loyalty driver.
REFINING THE DESIGN
MOCKUPS - USABILITY STUDY CHANGES
MY ACCOUNT PAGE
Users in the first usability study wanted a section to reference past adoption dates to keep track of birthdays/memories. I chose to make a table design so that user’s could also reference the status of their pending applications.
MY ACCOUNT
BEFORE USABILITY STUDY
MY ACCOUNT
AFTER USABILITY STUDY
ADOPTION APPLICATION SCREENS
ADOPTION APPLICATION STEP 3
BEFORE USABILITY STUDY
ADOPTION APPLICATION STEP 3
AFTER USABILITY STUDY
HIGH-FIDELITY MOCKUPS
HOME SCREEN
RESOURCES
GET INVOLVED
ADOPTABLE DOGS
INDIVIDUAL DOG PAGE
MY ACCOUNT
LOGIN
LOGIN CONFIRMATION
ADOPTION APPLICATION STEP 1
ACCESSIBILITY CONSIDERATIONS
1
One of the main challenges I wanted to tackle for my own personal growth was to pay attention to Gestalt principles in order to make the page more readable. I added borders and dividers to almost every section of the pages on this project.
2
The color palette is very neutral and readable. The action buttons are highlighted in orange for all of the main actionable buttons on the website.
3
In the resources page, I added all of the necessary information for the business so that clients are able to reach the shelter. I also added 24hr veterinarians and reputable local dog parks around the area.
TAKEAWAYS
IMPACT
I have been told by multiple people that the Fluffy Friends website designs look like a professional website. I would love to donate my designs to a shelter or foster care organization in need to help any dogs in need that I am able to.
WHAT I LEARNED
I learned a lot from my last project to this project. First off, I learned to choose a color palette with 5-6 colors right off the bat and stick to it. I learned how to reorganize the information according to screen size for responsive web design. I learned all about adopting and fostering dogs. I also learned about struggles that many shelters and foster networks go through, and have to overcome regularly.
NEXT STEPS
1
I would like to add a documents section to the “My Account” page that includes documents for vaccinations and other medical records.
(This would make it easier on pet parents to take their dog to the groomers or doggy hotels without having to contact the shelter.)
2
I plan on reaching out to a few organizations to donate my designs to a shelter or foster network in need.
3
In the future, I would like to hash out more screens for the donation buttons on the individual dog pages. I would also like to add screens for the buttons on the “Get Involved” page.
LETS CONNECT!
Liz Nadolny
(209)559-9155
elizabeth.nadolny@icloud.com
linkedin.com/in/liznadolny