Sacramento's Cage Free, No-Kill, Pet Sanctuary
Overview
Happy Tails is a local animal shelter in Sacramento, dedicated to providing the best care and cage-free environments for their rescues. They began in 1993, and were Sacramento’s first cage-free, no-kill shelter. While their website is quite educational & informative, I saw a need for a layout that highlighted this information and focused on user experience.
Solution
I redesigned the website for a local animal shelter, Happy Tails. As a non profit shelter with so many pets to offer, they had a ton of valuable information and resources on their site, and I wanted to ensure it was accessible to their users. I was responsible for conducting research, refreshing their branding, as well as prototyping and testing the new design.
My Role:
UX Research, UX/UI Design, Branding
The Team:
Myself (UX Designer)
Duration:
4 weeks
Tools:
Figma, Miro, Zoom, Airtable
Challenge
As an all volunteer shelter, there is a limited budget to work with in terms of design and user experience. Happy Tails has a lot of valuable information on adoption and local resources that needs to be accessible to its users in a way that is clear & organized.
The Goals
Create a responsive e-commerce website for desktop, tablet, & mobile that highlights the Happy Tails mission
Design a layout & features focused on user needs & expectations when looking for pets to adopt.
Give the branding an overall refresh and logo redesign.
The Results
Responsive designs for desktop, tablet, & mobile
Data proven user experience/flow & features
Overall modern branding refresh
RESEARCH
What are adopters looking for?
My research goals were to:
Understand what information users are looking for when they are looking to adopt a pet
Gain insight on what people think are missing from adoption websites
What mood & brand identity do people associate with animal shelters
Understand what steps user’s take when doing research for animal shelters & adoption
As a pet sanctuary, Happy Tails is looking to find their sweet fur babies their forever homes. To help them with this, I conducted some market research to learn about the adoption process and some pet ownership trends.
Interestingly, I found that:
To gain a better understanding of how others in the Sacramento area are handling the adoption process, I conducted a competitive analysis. I found that many are focusing on updating their sites as well to create a more modern look to their sites, and make them easier to use altogether. This allowed me to find some areas of improvement but also craft some provisional personas to keep in mind.
What do adopters really think?
To confirm my market research, I wanted to have conversations with people who have actually gone through the adoption process to hear their experiences. I conducted both 1-1 interviews as well as surveys that allowed me to make notes on their needs, & pain points.
I found that ensuring a shelter was both reputable and thorough about the process itself was crucial to future adoptees. They wanted to know a shelter was doing everything they could to ensure their pets were going to good homes. Users were also doing a majority of their pet search online, so being able to look for specific qualities in a pet was a priority for them.
With all of this info, I created an empathy map to help me tailor my provisional personas to the ideal Happy Tails customer.
I created a persona encompassing the traits and struggles of our participants, Jenny. Jenny is an ideal customer for Happy Tails, and became the focus for my design moving forward. When adopting she finds that the credibility and ethics of a shelter is one of her priorities. When it comes to her pain points, she needs filtering options to find her new pet as well as access to thorough & accurate information.
“When I adopted, it was really important to know how thorough shelters were being to ensure pets were going to good homes.”
— Participant 2
BRANDING
How do we establish the Happy Tails brand?
In between conducting my interviews, I spent some time focusing on a brand refresh for Happy Tails. Their website didn’t focus on branding overall, so this was an opportunity to establish a brand for them, one that is fun, friendly, and approachable.
I started by creating a moodboard to encompass their brand as well as explore possible colors, text, and images.
Since I was doing a redesign, I wanted to give their logo a bit of a refresh as well. I wanted to keep elements from the old design, but just streamline it a bit.
The new logo uses a warmer yellow. I wanted the brand to feel friendlier, and this was a way to play on that.
I opted for a silhouette of a cat and dog for the new logo to get the same idea across in a simpler way
I changed the font of the logo, making it simple but still fun & friendly
This was also the perfect time to put together a style tile for Happy Tails that would help me tailor my visual design for them later on. I pulled colors for the brand from my mood board and used them to compliment my logo throughout the site.
INFORMATION ARCHITECTURE
Restructuring the information.
Before I actually built out any designs, I wanted to revisit the business and user goals as well as any technical considerations. As Happy Tails is a non-profit with limited resources, the main constraint I wanted to focus on was budget - I needed to keep costs low.
Keeping both user & Happy Tails needs in mind, I opted for a few solutions:
Instead of account creation to save pets - use cookies to allow users to like pets within the site
Again, to avoid account creation, users can save searches & filters to get updated on new pets by email
Users also needed a way to directly search for pets from the home page, along with filters when looking at adoptable pets, as this was a crucial need
Using this information, along with the structure of the current site, I created a sitemap to establish a high level informational architecture for the redesign. I reorganized some elements and added some additional pages to create the new structure, keeping my possible solutions in mind. I referenced competitor sites as well to see how information was commonly organized while keeping in mind what Happy Tails already has. I wanted to create an experience that was intuitive, well organized, and informational.
To ensure this was the case, I created a user & task flow to ensure there were no gaps and the process was as simple as it could be. You can view the user flow here.
DESIGN
Balancing the fresh & fun.
When going into my initial sketches, I wanted to focus on some elements from the current website:
While information, the site is quite text heavy with little informational hierarchy
Home page has outdated information that can be replaced with new features
Little whitespace between elements & inconsistent UI
I focused on creating layouts that created a story while providing information to users using both images & text. As the search function was crucial to this page, I focused on highlighting that as well.
I opted to keep the arch shapes to create a unique layout for my mid-fidelity wireframes to tie the elements in with the logo. After many iterations, I was able to finalize my wireframes and create responsive wireframes for tablet & mobile as well. I used my style tile to complete my wireframes, and after even more iterations - my final hi-fidelity mockups were complete.
The challenge here was really finding a balance between being informational but also letting the design breathe. Happy Tails has a lot of resources to offer, but I didn’t want a future adopter to feel overwhelmed in any way. Another concern was ensuring that users were understanding they are looking for future family members- not just shopping for a pet.
With the high-fidelity mockups complete, I created a UI kit complete with brand assets and styles used throughout the site.
This was really helpful as I worked with revisions before and after prototyping. Having these assets together in one space helped to make sure things stayed consistent throughout the site & its’ elements.
TEST
Test, Iterate, & Repeat.
To test out my redesign, I created a prototype of my design. This is where I played with different versions of the filters as well as the full adoption form & confirmation page. Prototype available here
Once my prototype itself was created, I was able to conduct a usability test to gain insight on these additional features. I was also looking to see if there were any elements that stood out to participants, as well as their thoughts on the aesthetic & feel of the site.
Tasks:
Find the Happy Tails mission page
Find the Adoptable Dogs
Filter the adoptable dogs for a small dog
Find Bean the pug & apply to adopt him
I used my findings from the usability tests to create an affinity map that clarified possible problems & solutions. I this feedback and findings to create priority revisions to my design. While the key features were successful with little to no issues from participants, there were some revisions made:
Additional vaccination info on Pet Page
Additional questions & details in the Adoption Form
A Save Search option using email
Changes to the copy throughout the site to focus on adoption & family
Adoption success stories on the Home Page
Editing hero image & adding color throughout site to make it feel less empty
FINAL DESIGN
An intuitive & easy to navigate Happy Tails experience
Easy access to search
Using survey & interview results, I added a search function allowing the user to look by pet type, age & size, directly from the home page. These were top 3 characteristics participants took into consideration when thinking about their future pet. Many were concerned about a specific age, as it helped determine energy levels and size was crucial to accomodate for their own homes, like apartments.
Information at a glance
I added stickers throughout the site to help the user understand the pet before even clicking on them. The users have immediate access to crucial information about a pet, right on their card, in a way that isn’t too text heavy.
A little room to breathe
Again, information was key to this redesign. Adoption can be a confusing process with a lot of information to digest, not only about the pets but the shetler too.
The old website did an amazing job of storing all of this information, however, it was a bit cramped. When landing on the site initially, there is a ton of text to go through and can be a bit overwhelming.
To combat this, I opted to create sections focusing on different information, making it more digestible. This also helped with the flow and overall story telling for the user as they scrolled through the homepage. Instead of getting every bit of information in one block, they can go section by section, and learn more if they want.
Reorganized pet information
With so much information and so many pets to go through, organization on the pet page was priority. Basic info about each pet is organized at the top, with personal stories at the bottom explaining any quirks. This was done to maximize the information above the fold.
Users also have access to multiple images & videos of each pet, plus the ability to apply to adopt directly from the pet page.
While the information of each pet was present in the original design, the visual hierarchy of the page itself felt a bit confusing, and limited the images of the pets to only 1.
The challenge here was figuring out a structure that made sense and allowed for the Happy Tails brand to also shine.
Finding your pet, made easy
Easy to find when you need them & easy to hide them when you don’t - Adding filters was crucial to the design, as my research showed it was a priority for users. I originally had a top filter design, but opted to keep all of the filters hidden to remove clutter but make them still accessible to the user.
While the old design did include filters, they were limited to sex, breed, & age. This didn’t allow for other factors that could play into the adopters decision.
Since there isn’t any account creation in my design, I opted for a save search feature that allows users to receive emails for new available pets that match their search.
OUTCOME
Final Thoughts
This project was both challenging & fulfilling. As a Sacramento native, I know how bad our stray overpopulation is so working on Happy Tails was a joy.
I was forced to really question my choices and work through the cyclical design process without even realizing it. I went back and forth throughout my process to ensure I kept both Happy Tails & their customers in mind. I needed to think about the financial constraint non-profits face as well as the experience users are expecting, and ultimately created some balance of the two.
What I learned:
To work with budget constraints in mind when designing
How to work with elements & structure of an existing site and reorganize them
due to relying on common design patterns, the error free and task completion rate was 100%.
Next Steps:
Handoff design to developers
Validate design though website analytics
Continue to iterate on the design