Liberation Cat House
Supporting at risk cats and fostering adoptions since 2017.
Responsive Web Design
Non-Profit Organization
Liberation Cat House
Supporting at risk cats and fostering adoptions since 2017.
Responsive Web Design
Non-Profit Organization
Liberation Cat House
Supporting at risk cats and fostering adoptions since 2017.
Responsive Web Design
Non-Profit Organization
Tools Used
Tools Used
Project Duration
Project Duration
4 Week Sprint
Role
Role
Lead UX/UI Designer
(Team of Four)
Project Overview
Project Overview
Project Overview
"Liberation Cat House" is a non-profit organization that assists the Central Florida cat community by promoting the fostering and adoption of high-risk felines.
Opportunity
Opportunity
Numerous potential adopters are choosing not to engage with rescues because lack of awareness, low response rates, outdated information on their website, and insufficient interaction on the site.
Goal
Goal
How might we transform the Liberation Cat House website into a central hub for the non-profit organization to boost adoptions and donations?
Role & Responsibilities
Role & Responsibilities
Role & Responsibilities
Conducting both Shareholder and User Interviews, heuristic research, ideation mapping, medium-fidelity wire-framing, High Fidelity prototyping, usability testing, interaction design.
Where it all began…
Where it all began…
Where it all began…
Wanting to give back to the community we were tasked with finding a non-profit in need of some digital TLC.
I had an old colleague that is constantly posting stories on Instagram of all the fosters she had and their adoption progress and decided to reach out.
She mentioned, "We have a website but we don't really use it, we just feel social media is quicker and more user friendly."
So we got to work…
Opening our Toolbox
Opening our Toolbox
We performed a Heuristic Evaluation on their current website to determine why they prefer social media…
We performed a Heuristic Evaluation on their current website to determine why they prefer social media…
We noticed a few standouts right out of the gate:
Aesthetic & Minimalist Design
They had a very flat design
Consistency and Standards
Though there was an adopt tab on their navigation bar their was no list of readily available pets.
We noticed a few standouts right out of the gate:
Aesthetic & Minimalist Design
They had a very flat design
Consistency and Standards
Though there was an adopt tab on their navigation bar their was no list of readily available pets.
We then began Shareholder Interviews to get a better understanding of their goals, mission and organization.
We then began Shareholder Interviews to get a better understanding of their goals, mission and organization.
We sat down via zoom with their Social Media Director and one of their top performing fosters to gather insights into our key objectives:
We sat down via zoom with their Social Media Director and one of their top performing fosters to gather insights into our key objectives:
Volunteer Engagements
Explore the motivations and experiences of volunteers and donors connected to the Liberation Cat House.
Values of the Organization
Discover the obstacles that Liberation Cat House encounters in fulfilling its mission and objectives.
Operational Functions
Gathering feedback on potential enhancements for the organization's current website operations and services.
Volunteer Engagements
Explore the motivations and experiences of volunteers and donors connected to the Liberation Cat House.
Values of the Organization
Discover the obstacles that Liberation Cat House encounters in fulfilling its mission and objectives.
Operational Functions
Gathering feedback on potential enhancements for the organization's current website operations and services.
Volunteer Engagements
Explore the motivations and experiences of volunteers and donors connected to the Liberation Cat House.
Values of the Organization
Discover the obstacles that Liberation Cat House encounters in fulfilling its mission and objectives.
Operational Functions
Gathering feedback on potential enhancements for the organization's current website operations and services.
In addition we wanted to gather user feedback about adopting in general to determine what adopters preferred, and begin brainstorming how we could differientate LCH for the better.
In addition we wanted to gather user feedback about adopting in general to determine what adopters preferred, and begin brainstorming how we could differientate LCH for the better.
We conducted 5 remote user interviews with participants that have adopted in the last 6-8 months. Our objectives during those interviews included:
We conducted 5 remote user interviews with participants that have adopted in the last 6-8 months. Our objectives during those interviews included:
Decision Making
Explore how potential pet owners make decisions when searching for a new pet.
Roadblocks
Explore the typical obstacles that prospective pet owners encounter while searching for a new pet.
Preperations
Discover the key sources of information that prospective pet owners depend on when searching for a new pet.
Decision Making
Explore how potential pet owners make decisions when searching for a new pet.
Roadblocks
Explore the typical obstacles that prospective pet owners encounter while searching for a new pet.
Preperations
Discover the key sources of information that prospective pet owners depend on when searching for a new pet.
Decision Making
Explore how potential pet owners make decisions when searching for a new pet.
Roadblocks
Explore the typical obstacles that prospective pet owners encounter while searching for a new pet.
Preperations
Discover the key sources of information that prospective pet owners depend on when searching for a new pet.
Before analyzing all of our findings we also sent out a Survey to potential pet owners as well to cast a bigger net of data before our assumption making process.
Before analyzing all of our findings we also sent out a Survey to potential pet owners as well to cast a bigger net of data before our assumption making process.
Again we identified pet owners who have adopted in the past 6-8 months to gather feedback on topics like:
Because of the influx of qualitative data during our interviews we opted for Affinity Diagramming.
Because of the influx of qualitative data during our interviews we opted for Affinity Diagramming.
Each participant had commonalities with their preferred adoption methods and ways of finding their new fur-ever friends however…
Each participant had commonalities with their preferred adoption methods and ways of finding their new fur-ever friends however…
After grouping and comparing both what the user needs and what the shareholders are looking for we came to a conclusion that both are looking for an easy way to support their community whether friend or feline.
After grouping and comparing both what the user needs and what the shareholders are looking for we came to a conclusion that both are looking for an easy way to support their community whether friend or feline.
Stakeholder Key Findings
Stakeholder Key Findings
Website is secondary
Want to avoid scammers
Social Media is Main Marketing
Gender Neutral Colors
User Interview Key Findings
User Interview Key Findings
Finding the right pet is hard
Google & Petfinder 🖤
I search forever
I like to support local community
User Insight
We then started the assumption making process
We then started the assumption making process
We identified a User Persona that was consistent with our User interviews so that our solutions weren't trendy but had merit as to what Liberation cat house's adopters needed in the website.
We identified a User Persona that was consistent with our User interviews so that our solutions weren't trendy but had merit as to what Liberation cat house's adopters needed in the website.
We also used our findings to make some assumptions on the non profits value proposition and problem statement. This helped us throughout our ideation phase to pinpoint our features and design decisions.
We also used our findings to make some assumptions on the non profits value proposition and problem statement. This helped us throughout our ideation phase to pinpoint our features and design decisions.
Problem Statement
Problem Statement
Liberation Cat House was established with the aim of assisting the local cat communities.
It has come to our attention that our website does not align with our social media presence, leading us to be indistinguishable from other rescue organizations.
How might we enhance our website to improve its usability for potential adopters, maintain our brand image, and ultimately boost adoptions?
Liberation Cat House was established with the aim of assisting the local cat communities.
It has come to our attention that our website does not align with our social media presence, leading us to be indistinguishable from other rescue organizations.
How might we enhance our website to improve its usability for potential adopters, maintain our brand image, and ultimately boost adoptions?
Value Proposition
Value Proposition
Liberation Cat House is on a noble mission to support our community members, with or without fur!
We work hard to find permanent homes for cats and address the issue of cat overpopulation through spaying and neutering.
Our foster caregivers provide excellent care to the cats we rescue. Our ultimate goal is to ensure that every cat has a cozy spot to call their own.
Liberation Cat House is on a noble mission to support our community members, with or without fur!
We work hard to find permanent homes for cats and address the issue of cat overpopulation through spaying and neutering.
Our foster caregivers provide excellent care to the cats we rescue. Our ultimate goal is to ensure that every cat has a cozy spot to call their own.
Ideation v1
Ideation v1
We Used Rapid Brainstorming to get the teams ideas out into the drawing board but used a 2x2 Prioritization Matrix to narrow down existing and new features to add and update.
We Used Rapid Brainstorming to get the teams ideas out into the drawing board but used a 2x2 Prioritization Matrix to narrow down existing and new features to add and update.
Some of the more nuanced proposals included, livestreams, brick and mortar locations, evolving from a cat shelter to multi species animal rescue.
After dot voting on our 2x2 Prioritization matrix with our shareholders we landed on four features.
After dot voting on our 2x2 Prioritization matrix with our shareholders we landed on four features.
With both our users and stakeholders in mind we came to a decision to limit the new redesigns features to four that would facilitate not only adoptions but community involvement and donations. Adoptions were definitely at the forefront but not including ways for previous adopters or non pet owners to show their support would be detrimental to the organizations cause.
With both our users and stakeholders in mind we came to a decision to limit the new redesigns features to four that would facilitate not only adoptions but community involvement and donations. Adoptions were definitely at the forefront but not including ways for previous adopters or non pet owners to show their support would be detrimental to the organizations cause.
Interest Forms
To enhance stakeholder experience in viewing potential pet interest, we are considering creating two distinct forms: one for general contact and another for pet-specific inquiries.
Donate Button
Defining the donation button clearly can enhance the organization's outcomes.
Pet Profile
By including information about available adoptions on the page, they can enhance the impact and create a central hub for showcasing cats available for adoption.
Instagram Feed
Incorporating an Instagram feed on their website can showcase successful fosters in their social media marketing efforts and provide visibility for fosters who may not be tech-savvy.
Interest Forms
To enhance stakeholder experience in viewing potential pet interest, we are considering creating two distinct forms: one for general contact and another for pet-specific inquiries.
Pet Profile
By including information about available adoptions on the page, they can enhance the impact and create a central hub for showcasing cats available for adoption.
Instagram Feed
Incorporating an Instagram feed on their website can showcase successful fosters in their social media marketing efforts and provide visibility for fosters who may not be tech-savvy.
Donate Button
Defining the donation button clearly can enhance the organization's outcomes.
Interest Forms
To enhance stakeholder experience in viewing potential pet interest, we are considering creating two distinct forms: one for general contact and another for pet-specific inquiries.
Pet Profile
By including information about available adoptions on the page, they can enhance the impact and create a central hub for showcasing cats available for adoption.
Instagram Feed
Incorporating an Instagram feed on their website can showcase successful fosters in their social media marketing efforts and provide visibility for fosters who may not be tech-savvy.
Donate Button
Style Tile v1
Style Tile v1
After our stakeholders mentioned a gender neutral color palette they also sent in a calico cat as the color inspiration.
After our stakeholders mentioned a gender neutral color palette they also sent in a calico cat as the color inspiration.
more on that later…
With accessibility on the forefront of our design we checked to make sure the color palette passed WCAG Guidelines.
With accessibility on the forefront of our design we checked to make sure the color palette passed WCAG Guidelines.
Both our main and primary colors passed so we moved ahead into our prototyping phase.
Both our main and primary colors passed so we moved ahead into our prototyping phase.
White on Primary Color
Black on Secondary Color
Identifying our flow…
Identifying our flow…
We moved onto what would feel authentic with the users flow and how we could format the new site map. Some pages on the previous website felt overwhelming with information. We wanted to make sure wherever the user was they could view available pets, have the ability to donate or contact the organization.
We moved onto what would feel authentic with the users flow and how we could format the new site map. Some pages on the previous website felt overwhelming with information. We wanted to make sure wherever the user was they could view available pets, have the ability to donate or contact the organization.
There was new pages being added and other pages that could be divided for the sake of user ease and function. Including dividing up the tips and tricks on the original adopt page and updating the adopt page to have actual pets available.
There was new pages being added and other pages that could be divided for the sake of user ease and function. Including dividing up the tips and tricks on the original adopt page and updating the adopt page to have actual pets available.
Focusing on Low Fidelity Wireframes we wanted to get the skeleton of the site out of ideation and into production. Our main goal with the wireframes was to make sure the IA for the new navigation bar was user friendly.
Focusing on Low Fidelity Wireframes we wanted to get the skeleton of the site out of ideation and into production. Our main goal with the wireframes was to make sure the IA for the new navigation bar was user friendly.
We needed to test to determine our navigation bar was working as designed.
We needed to test to determine our navigation bar was working as designed.
We decided to perform user testing on the low fidelity wireframes primarily to determine if our information architecture made sense to participants
We decided to perform user testing on the low fidelity wireframes primarily to determine if our information architecture made sense to participants
We also wanted to determine if an adopter who viewed the page through Google or another search engine instead of Social Media would be able to validate that this organization was reputable.
We also wanted to determine if an adopter who viewed the page through Google or another search engine instead of Social Media would be able to validate that this organization was reputable.
Credibility Check
Examine the information to assess the credibility of LCH.
Request Pet Information
Evaluate the usability and efficacy of the Liberation Cathouse redesign by seeking further information regarding an adoptable cat.
Contact LCH
Navigate to the web page and determine where LCH is located.
Credibility Check
Examine the information to assess the credibility of LCH.
Request Pet Information
Evaluate the usability and efficacy of the Liberation Cathouse redesign by seeking further information regarding an adoptable cat.
Contact LCH
Navigate to the web page and determine where LCH is located.
Credibility Check
Examine the information to assess the credibility of LCH.
Request Pet Information
Evaluate the usability and efficacy of the Liberation Cathouse redesign by seeking further information regarding an adoptable cat.
Contact LCH
Navigate to the web page and determine where LCH is located.
Our key findings included changes in our interaction design since prototyping is different than a live site some interactions were deadends. Additionally, our mobile navigation hierarchy did not align with the Website.
Our key findings included changes in our interaction design since prototyping is different than a live site some interactions were deadends. Additionally, our mobile navigation hierarchy did not align with the Website.
Our key findings included changes in our interaction design since prototyping is different than a live site some interactions were deadends. Additionally, our mobile navigation hierarchy did not align with the Website.
We also had to fine tune whether or not our Learn More, About and Event Tabs were going to have main hub pages since there were multiple pages within that tab header. (blog like hubs)
Circling back we began finalizing our prototype
Circling back we began finalizing our prototype
Adding color and pictures courtesy of LCH from our style tile to flesh out our High Fidelity Mockups we finalized the responsive web page and moved onto our last round of usability testing.
Adding color and pictures courtesy of LCH from our style tile to flesh out our High Fidelity Mockups we finalized the responsive web page and moved onto our last round of usability testing.
We wanted to make sure there wasn't any additional interaction design mishaps and primarily wanted to ensure how user's felt about the color palette and overall flow.
We wanted to make sure there wasn't any additional interaction design mishaps and primarily wanted to ensure how user's felt about the color palette and overall flow.
Our objectives for our usability testing included:
Our objectives for our usability testing included:
5 Second Usability Test
We Asked questions like:
What aspects captivated you the most
What specific elements can you recollect?
Find Your Pet
When seeking a suitable companion for your existing cat, what steps can you take to locate a compatible match and arrange an initial introduction?
Request Confirmation
We had them attempt to reach out to LCH to learn more about a brick and mortar location.
5 Second Usability Test
We Asked questions like:
What aspects captivated you the most
What specific elements can you recollect?
Find Your Pet
When seeking a suitable companion for your existing cat, what steps can you take to locate a compatible match and arrange an initial introduction?
Request Confirmation
We had them attempt to reach out to LCH to learn more about a brick and mortar location.
5 Second Usability Test
We Asked questions like:
What aspects captivated you the most
What specific elements can you recollect?
Find Your Pet
When seeking a suitable companion for your existing cat, what steps can you take to locate a compatible match and arrange an initial introduction?
Request Confirmation
We had them attempt to reach out to LCH to learn more about a brick and mortar location.
Our key findings included adding confirmation pages for users on the Request Forms, and more cat graphics to individual pages outside of the Contact Us and Homepage.
Our key findings included adding confirmation pages for users on the Request Forms, and more cat graphics to individual pages outside of the Contact Us and Homepage.
With those key findings and iterations we sent over the package to our Shareholders.
With those key findings and iterations we sent over the package to our Shareholders.
They loved the features but hated the design, ALOT!
They loved the features but hated the design, ALOT!
So we spent some time with them and sent over a mood board to gather what exactly they were looking for in terms of design. Once we were both on the same page we began rebuilding the website.
So we spent some time with them and sent over a mood board to gather what exactly they were looking for in terms of design. Once we were both on the same page we began rebuilding the website.
Style Tile Final Version
What are stakeholders forgot to mention was their entire vibe of the organization was edgy, punk and monochromatic.
We kept a soft color palette with light blues greys and charcoals and added a lot of tattoo style illustrations throughout the webpage. Another key component was every image was converted to Black & White.
Style Tile Final Version
What are stakeholders forgot to mention was their entire vibe of the organization was edgy, punk and monochromatic. So we translated that with soft light blues grey's and charcoal colors.
We kept a soft color palette with light blues greys and charcoals and added a lot of tattoo style illustrations throughout the webpage. Another key component was every image was converted to Black & White.
Our flow stayed the same but we changed alot of our design so we wanted to ensure we kept the essence of our flow and the things in our user testing that worked the same but also gave the page the revamp it needed.
Our flow stayed the same but we changed alot of our design so we wanted to ensure we kept the essence of our flow and the things in our user testing that worked the same but also gave the page the revamp it needed.
With Shareholder approval we were ready for our Next Steps
With Shareholder approval we were ready for our Next Steps
Which will include integrating the third party medical history service Shelter Love into their website so that new pet profiles can automatically be created on the available pets page and handing off our designs and style guide to their developers.
Which will include integrating the third party medical history service Shelter Love into their website so that new pet profiles can automatically be created on the available pets page and handing off our designs and style guide to their developers.
We also want to perform a round of mobile A/B testing to ensure the micro-interactions are not confusing to users.
We also want to perform a round of mobile A/B testing to ensure the micro-interactions are not confusing to users.
