SPCA Redesign
Remaking the website to help not just humans, but animals too
The Society for the Prevention of Cruelty to Animals (SPCA) has already established themselves as common enough to be on the tip of everyone’s tongues.
The most usual answer people would give if they see an injured animal would probably be “Call SPCA”, “Send a report to SPCA” or “Tell SPCA or email them”.
Making a name for themselves as a shelter for animals and an advocate against animal cruelty, this was one of the few cases where it was clear that for once, we were actually designing the website to help people help animals too.
​
With that, this was the team.
_.png)
First up, I was tasked to analyze the site, checking out the issues with its user interface elements and mapping out the website as well. The project brief mentioned for us to see if we could explore on service design, thus, we also wanted to seize the chance to meet with the staff working in SPCA as well, to try to get more findings on some problems that were not seen by the public eye.
​
This would allow us to be very sure of what the website covered as well as gave us insight on what issues the site had aside from its heuristics. Most of the problems came from its use of several fonts, as well as color schemes that made text hard to read.
Site Visit
Speaking with the Educations Officer, we learnt quite a decent bit on how things were on the opposite end at SPCA. They were very focused on the care of animals, that the funds they had, entirely given from the generous hearts of people and companies, were majorly put into operations and medical care for the strays they housed and cared for. Since they also handled emergency cases, like animals rescued from abusers, accidents or in precarious situations, much was needed to nurse the pets back to health.
Be it fractures, surgeries, medicines or hospitalization, they would not hesitate to give their utmost care for these animals.
​
Therefore our approach to this had to be very different as this was also to cater to business needs as well, not just what users wanted. Sure, UX was all about the user, but if they asked for the sun and moon, no company or corporate out there would even be able to satisfy that demand. It might be an extreme exaggeration, but businesses out there did have their limitations when it came to websites/apps.
So, as we did a business canvas, it allowed me to peek into SPCA. We might not have had the privilege of speaking with the executive directors behind the shelter, but the canvas helped much in seeing how they operated, their motivations, restrictions, concerns and a bit of their inner workings as well.
We took into mind their mission
​
To promote kindness and prevent cruelty to animals through education, advocacy and action.
​
It made a lot of sense as well, because education would be the first and most important step in promoting pet kindness. Advocacy as second, so that people would know their stance, and would oppose cruelty to animals. Action being the final step, where they would work with the appropriate departments to stop actions of abuse or to find offenders guilty of neglect or abandonment.
​
​
And with the info shared by SPCA, we knew of their other business goals
​
-
More adoptions of their animals
-
Less abandonment rates for pets
-
Increase in donations for care for more animals
​
Not only that, but these goals were quantifiable and could be put onto paper. Which meant the stakeholders would also be able to see how much of a visible success metric this would be.
User Interviews
Now we had info regarding the business side, we moved to also find information on users and their perspective when using the site. to make sure we were catering to the right users, we targeted pet lovers and pet owners.
​
The tasks were simple, made to coincide with their business goals. Each user had the objective of donating, selecting a pet to adopt, and to sign up as a member. Then we would further inquire about their perceptions of SPCA and their reasoning for wanting to own a pet. One of them had actually adopted a pet from SPCA, and his experience was key to finding out more about the adoption process.
​
From here, we came across two findings and could come up with the problem statement
​
-
There was a policy issue with adoption of big dogs due to HDB regulations.
-
Current website is overloaded with information that cause users to be lost.
“Users who wish to adopt or find pet care information have trouble navigating the website due to its unsorted and overwhelming information”
Thus our recommendations were
-
To empower adopters with good content in pet adoption and pet care
-
To trim down number of steps taken in process
-
Allow animal and new adopters to have enough bonding so that it will increase the chances of animal adoption
​
To tackle the problem statement, we came up with the solution.
​
​
“To design a responsive and more accessible website that provides clearer navigation to educational information to possible adopters and pet owners. We will also highlight relative information about pet care that will help people to gain confidence in animal pet care. "
So now we knew more about SPCA and its business goals, the issues with the site, the problem statement we set out to solve, and the needs and wants of the users. This all put together allowed us to create our personas, with each of them representing an aspect of the people SPCA would reach out to, which would help us align our design goals together.
​
I was tasked with creating their motives as well as other relevant character traits, and it was quite an enjoyable experience, and reminded me of how some characters were designed for stories. The motives and pains taken from the interviews were essential in forming them up and the challenge of finding the 'why' behind their actions were interesting to craft up.
The Personas
So because SPCA’s goals were to educate people and increase adoption rate, the focus would be put on Amelia, the first one. Because not only is she wishing to adopt, but chances are, she’s also a new pet owner, with no prior knowledge of taking care of a pet, and doing this on impulse because she likes the novelty of owning a pet. Or maybe it’s because of trends and pictures she sees on social media.
Thus, SPCA would want to also spread awareness and knowledge of pet care to people like her. She’s also very savvy with social media which means the shelter can easily connect and interact with her too.
So from here, we could create a customer journey map, which was seeing how the customer/user would go through the website and process, doubling as a magnifying glass to find any other user pains experienced through the procedure. This had us test out more things, and this would all add to the emotions she would have throughout.
Customer Journey Mapping
From the badly organized information on the website, to the annoying automated voice call of SPCA’s hotline, to the long process they took to screen her and her family plus her home to see if she was fit to care for her pet, Amelia’s journey though, does reach a happy ending when she gets her pet.
But there’s complications throughout, and it shows several opportunities to work on and fix up. It’s here that I learnt about service blueprints, and how they gave a different view of how the situation was like.
​
Customer Journey Maps to me were one sided, because you only would see things entirely from the customer’s point of view. This meant that it would always paint the business/app/service/interaction as bad because the user would definitely find unhappiness in it.
A service blueprint, however, showed a better view as not only did it show what the user’s journey was, it showcased what the business needed to fulfill each part of the user’s wants, and it revealed some limitations on the other end as well.
Service Blueprint
This gave us insight on how to work on redesigning the site to make it so that both sides would have the service improved. One of the biggest targets was the Services tab on the website, which was an overload of links inside.
​
Users mentioned that the website did its job well, it was just the aesthetic and some information layout that had to be changed, so basing on that research and findings, we opted to leave the other tabs in, since they were already fine in terms of usability. Services however, confused people, so we redid the sitemap to shift around the tabs, based on our card sort.
Using the data from the card sort, we managed to reduce the overall information overload in the services tab.
We shifted some things from services tab, and removed one whole chunk of repeated links, aiming to reduce the amount of excess info in the category, which would make it less overwhelming for users when they would click in. Also because we had two weeks only, we had to prioritize which features to work on, which meant the rest of the pages would not be taken into redesign, so that our main web layouts would get the main focus.
​
Doing the prototype on Axure, we also used the time to do a lot of tests on the early prototypes, so we could really find out what else would be added/changed/reworked/removed to improve the website.
​
Of all the feedback from the testing session of the first prototype, we summarized the feedback into several main points.
This however, was one of the two things we set out to do. Another part of it was service redesign to reduce the flow for the users when they chose to go for the adoption process. We realized that the bond between the adopter and animal were in a way, viewed like dates between two people.
​
It would be very hard, nigh impossible even, to see if the adopter and animal were compatible after just one meeting. Not to mention the animal's needs like toilet training, and maybe some behavioural issues that could have stemmed from abuse, if any. To truly know if two people were 'meant to be', they would need to continue to see each other before making a decision.
​
This was how we came about the redesign of the user flow.
'Matchmaking' Process
The one at the top in grey was the flow originally, where the users had to wait for long periods of time before the screening and vetting was done to deem if the applicant was fit to take care of a newly adopted pet. This usually was a very tiring process that made users wait a lot.
​
So the bottom one, the redesign, would help to also amplify and synchronize with SPCA original goals. Here, the applicant would check to see if the pet was still available to be adopted, and would send in a call. Here, they would schedule a day to go over and see the pets for themselves.
​
The applicant would register themselves as a volunteer to help out with all the basics of pet care, from cleaning pets, to handling big to small animals, taking care of sick animals and whatnot. This would help the shelter staff see if the person was really able to handle the big responsibility of taking care of the pet. This also allowed for people to see past the cuteness and novelty and really understand how much a pet would need to be cared for. The staff would also take this time to teach them all the big and small things about caring for pets, including behavior cues, ways to call to pets, how to handle and carry them and other things as well.
With this, the applicant would also be able to bond with their chosen animal and get good experience in pet care. If the applicant did well, then the pet would be put in their homes for two weeks to see how the pet and potential owner would fare, especially in the new environment. The volunteer session would also have some days where the entire family and any other pets to be present to see if everyone would be okay with a pet/another pet in the home, as well as to see if the existing pet (if any) would gel well with the new pet.
​
Once the two weeks were done, there would be a house visit from the shelter staff to see how the pet was, and to also give any other existing tips to care for the pet. If everything was done properly, then all the applicant would need now was to sign the documents, pay for sterilization, vaccinations and microchipping as well as an extra step to get licensing if it was for a dog. And then the pet would be considered officially adopted, and SPCA would also be assured that the new owner would be equipped with the skills necessary to care for the pet.
If at any point, the applicant no longer had interest in caring for the pet and decided to drop out of the adoption process, then it wasn’t a total loss for SPCA as they still would be able to educate the applicant on how to take care of pets as well as things to note when it came to maybe handling strays. So this new service design allied itself greatly with SPCA’s business goals and also met user needs very well, allowing for new adopters to really understand the responsibility needed to care for a pet and to spread awareness on pet ethics and welfare.
​
Now with feedback to add to the prototype, and with the new service design in mind, we went about making the necessary changes.
New Prototype
We knew that some users would have been accustomed to the original adoption scheme SPCA used, so we added an onboarding process as they accessed the adoption tab of the new site remake.
​
To see the site
​
​
The adoption process was also put in a simple way for people to understand, and was arranged and broken up into three parts to users had to scroll down to see the steps, so that people under an impulse would also stop to think and maybe reconsider their decisions. This way, people would also rationalize the long term things to note when it came to really adopting a pet.
​
It was also quite the fun to rework the UX copy of the site, to make it more approachable, and to frame the adoption process as fun. Because the original text made it feel like the whole thing would be very serious and it would turn people away as well. I find that with good copy, users can also get different impressions just from a picture, or a different idea of how the tone of the business is as well, which serves as a great asset to the entirety of the organization.
​
One learning point that came from the tutors was on the reasoning behind adding the Donate button on the top right of the website’s home page.
Sure, it was a good use of the space on the website area. But the top right of any website was basically an extremely ideal spot to put certain UI elements, like a purchase function, check one’s options, or in this case, to donate. In other words, it was like landing on the Blue Zone of the Monopoly Board, Mayfair and Park Lane. Compared to the rest of the site, it was basically all the lights of Broadway merged with Shibuya Square of Tokyo.
This space on the site attracted the most attention, and therefore, whatever UI element placed there had to be considered very carefully so that it could be serve the best purpose. So no doubt if I’m redesigning more sites in the future, that spot, and several other hot zones, would definitely have special reservations for the VIPs of the UI/UX roster.
​
Ultimately this was an interesting project to work with, trying to merge the business and the user in a marriage of UX. I learnt much, knowing that no corporate is perfect, and their limitations would also have an affect on the users on the other end as well. What users don’t see on the business side, would have them make all sorts of assumptions that would frame the business in a very bad light.
As such, good UX would at least pacify most of the user pains, or maybe even turn it around and at least help them to understand things from the other point of view.
​
It also was quite rewarding as well, knowing we were doing our part to help animals who were either strays, injured, abandoned, or abused. If the users of the site were better educated, it would also translate to better care for these animals. I also learned quite a bit to help me in my future endeavors into UX, and to still expand my mind on the processes to really peer into the mind to understand deeper into its workings.