How to help a cat shelter and engage adoptions through design — a UX /UI case study
LOCAL E-COMMERCE
Welcome to this UX/UI design case study on redesigning a cat shelter website! This project is aimed at improving the user experience of Masnou Gats shelter existing website, with the goal of increasing user engagement and adoption rates.
The project has been developed by a team of four people in which as a UX/UI designer, my task was to analyze the current website, identify pain points, and create a redesigned interface that would address those pain points and improve overall usability.
WHAT IS MASNOU GATS?
Masnou Gats is a non-profit association created in 2014 and formed by volunteers dedicated to the protection of stray cats in the town of El Masnou to avoid overpopulation. They also care about the health and welfare of cats, welcoming and finding a home for all those cats that are sociable.
RESEARCH
In Spain, all animal shelters are managed differently and the regulations for each municipality are different from one another. This means that in order to understand the functioning, needs and problems of Masnou Gats, we had to interview its stakeholders.
The interview consisted of 19 questions addressing topics such as: General issues, users, partners, competitors, adoption process, money, communication, challenges and objectives.
As conclusions we were able to understand the following:
Users: Most of the users are families, stable couples, just married, and old people but mostly families.
Partners and competitors: They do not consider that they have competitors, but they agree that their competitors can be people who breed specific species of cats. The issue of competition was hard during the first years, because they had a lot of competition with other shelters, but a few years later they understood that collaborating with each other is better than competing. Now they help each other and are creating a community of shelters to unite into one in the future.
Adoption process: They give information about cats body language, adoption instructions, introduction to the new place. They also give information for second time adopters: for example integration of second cat to the home all in person.
Funding: Masnou gats has a lack of economic income and its main one comes from adoptions despite they have other side ones.
Communication: The communication they generate is always through their social networks. Despite this, it seems that their followers and potential adopters are not clear about the purpose of the shelter. Users do not understand how to adopt, what to do during the process, etc. This states that your communication should make an educational task about your purposes.
Challenges and objectives: Educate toall cat lovers that want either adopt, donate or colaborate. Grow as a shelter and have a good control of the cat colonies.
Following the stakeholder interview, we devised a new interview with recent adopters to find out what things we could change. The results were quite enlightening.
-”I would like to know medical historic, mood, age, fears, gender and size of the cats. Also how to adopt and welcome properly.”- Svetlana
THE COMPETITORS:
Knowing all the needs, interests and goals of the stakeholder and user, it was time to analyze the competitors.
Five of them were selected for analysis. Using a table, we compared the value proposition, audience, experience and objective of each company. Finally, we separated them into a competitor map to be compared.
EMPATHISE
We now had all the information we needed to understand the user and stakeholder. It was time to empathize. How were we going to do it? Through an Affinity diagram, where after collecting all the concerns of all the parties involved, we decided which ones we should focus on.
The winners and the ones we focused on were “contact with the shelterW and “adoption process” topics.
DEFINE
After discovering all the previous information and putting ourselves in the user’s shoes, we had to decide for which user profile we were going to redesign the website. We would do this using tools such as the user persona and the user journey map.
Our user persona was the “Young adult looking for a four paws friend”. A 35-year-old sales representative living with her boyfriend in the vibrant city of Barcelona in a small apartment with a terrace. Works in a hybrid format. she wants to adopt a cat. The problem is she can’t find enough information on the process, on which shelter to chose and she is worried about not making the best choice when it comes to welcoming the pet to her house.
THE PROBLEM
As a conclusion of our research and empathy exercise, we can summarize that, while the animal shelter needs to generate more revenue through adoptions to fund the feral cat rescue activities, users who would like to adopt a cat would be more convinced to do so if they could get more information about the animal before adopting it. To define the problem we used “How might we” statements and final “Problem statement”.
We needed to engage people to adopt more cats, educate them, increase transparency, make sure they understood the adoption process and make everything more intuitive. That’s why we built the following problem statement.
PROBLEM STATEMENT
IDEATE
With the problem statement well defined we were able to start generating ideas to solve the current problem. For this we did a first brainstorming through the creative methodology Crazy eights. However, despite having generated a wide variety of creative solutions focused on different parts of the problem, we had to decide on the ones that were completely necessary and thus create our MVP. For this we used the dynamic Moscow method, which helps to simplify and prioritize, in this case, tasks and features.
Minimum Viable Product (MVP Statement)
The goal of the Masnou Gats website is to give a clear understanding on what the adoption process looks like and how to welcome a cat in a new house. By knowing the process and receiving detailed information about the cats, the websites further aims to encourage users to collaborate with the shelter and improving the adoption rate.
After having a clear MVP, we define the operation and the information architecture of the web redesign, by means of a site map and a user flow of the site.
PROTOTYPE
USABILTY FEEDBACK
Taking into account everything created so far, especially the site map and the user flow, we made the first proposals through a low fidelity prototype, which we later converted into a medium fidelity prototype. With this last prototype we had the opportunity to test if we were really on the right track and collect feedback.
After all the testing process, users were able to understand the new concept of adoption through cards to meet the cat (as if it were a tinder for cats and adopters) and also communicated their satisfaction to see the clarity and transparency of the process. We were on the right track!
LOOK AND FEEL
The time to start dressing the web had come after the whole process. We had to decide how the website was going to look and feel, because without this step, all the work would look unbalanced and lack coherence.
The first thing we did was to analyze the competition to set ourselves apart.
Thanks to the analysis we were able to value our values and feelings in a more objective way to generate the moodboard and the brand attributes that would define the look of the website,
and thus generate the style tyle that would follow the web design.
The original Masnou Gats logo was redesigned too.
After the whole process, we join all the connecting points and apply the look and feel by creating a high fidelity prototype.
HIGH FIDELITY PROTOTYPE (FINAL LOOK AND FEATURES)
The new website shows a dedicated, friendly, familiar, trustworthy and caring look through a simple font (Montserrat) and a neutral color palette reminiscent of nature. It makes the user feel in a safe and calm place to explore the future life partner he/she wants to adopt.
To do this in the first instance is a clear and simple landing page where it talks about the history of the shelter, invites you to visit the adoption section through a friendly button and shows you the different donation options that are available to help.
Once the user has been able to see the homepage, will go to the adopt button to start the process and there will answer some questions that will serve so much so that the shelter can understand what type of profile has, so that the web can suggest cats that fit well with the adopter.
Finally, the future adopter will be able to see the suggested cats and can like them through the icon of the heart of each profile to then book a visit day, be able to know him in person and in the best of cases adopt him.
RESPONSIVE DESIGN
TEST RESULTS (DESIRABILITY TESTING)
After all the process we decided to test with users, through a desirability testing all the work done again to be sure that everithing works neat and see what we can update in the future.
Fortunately the work done looked as expected for everyone.
Amazing!
WORDS OF GRATITUDE
In conclusion, I want to express our deepest gratitude to our talented and hardworking teammates, Giulia, Maria, and Dawid, for their incredible contributions to our UX UI case study for the Cats Shelter project. Their dedication, creativity, and professionalism were invaluable in bringing this project to life.
Thanks to their efforts, we were able to create a user-friendly, visually appealing, and intuitive website that effectively communicates the Masnou Cats Shelter’s mission and goals. Their insights, ideas, and expertise truly made a difference and helped us deliver a high-quality product that meets the needs and expectations of our users.
It was an absolute pleasure to work with such a talented and collaborative team.
If you liked this article, leave a “clap” or a comment. If you want to see more content about UX/UI check my other articles in my profile.
