A personal challenge on visual UI design for an existing app.
Many animal charity organisations use either templates or inexperienced contract work to build their website resulting in very messy user interfaces or poor site navigation. Doing my own take of a charitable organisation redesign, I took the challenge to design my own take for an adoption website that would appeal to potential adopters. Having been a user myself that had once adopted a pet through the humane society, I've also included and reorganised some nice-to-have information that are likely useful to users.
Also see Humane Society Adoption App.
Project date: Jan 2021
Being an avid animal lover, I’ve always had lots of empathy towards animals and wanting to give all of them a loving home. In the past, I use to pet-sit for friends and worked as a part-time dog walker for a short stint. I have also frequently toyed with the idea of adopting another fur-baby into my family of 4 (I have 2 cats). Hence, I often find myself trawling the internet for adoption sites (local and overseas) and social media groups during my free time. However, these sites tend to be difficult to navigate, they lack certain information that could be crucial for increasing the animal’s adoption chances and most of them seem to use the same design templates that it starts to look the same. They also spend most of their web resources trying to leverage on users’ sympathy rather than the animal’s actual appeal, thus making some of these sites rather sad and dreary to browse. Understandably, these organisations are non-profit and could not afford to splurge on design. However, I beg to differ and think that with the right branding approach, these pets’ adoption chances would definitely increase.
As a non-profit organisation, their aim is to reduce abandonment of the pets and raise awareness about of pet-mills and animal abuse. For adoption, their message should be crafted to encourage the public to look at available pets without discrimination. The message should be simple, straightforward and clear, without overwhelming potential adopters with long text blocks.
In this case, I would assume that their direct competitors would be pet stores and home-breeders. Below are 4 case studies on how each organisation can learn from their competitors and improved their overall appeal in their contents.
My take on adoption is an event that should be a joyful, especially if the user is intending to expand the family unit. The words of “love” and “family” should be synonymous towards adoption. The content should appeal to the users by demonstrating how the pet would likely fit in. As a website, it needs to hold important content topics that users need to know prior to browsing other pages. Such important content should revolve around donating, volunteering, adopting and reporting. Secondary information would be content such as events, tips and articles. As a non-profit organisation, it is as important to appeal to users as an enriching and fun experience of helping unfortunate pets with some level of seriousness. This is to help differentiate from their daily grind.
When it comes to communication, applying the right colours is important. Unconscious or learned, colours can evoke users’ emotions, inspire reactions, and change modes of thinking. While colour perception can be subjective, certain colours do have a universal significance. For example - the colour red is often associated with “danger” as it draws comparison to fire. In this exercise, I chose the colour yellow (#FFC700), aqua/ turquoise (#00aa8a)and a dark grey (#2D2D2D) as the primary palette.
Source: https://www.colorpsychology.org/
Yellow is the brightest colour of the spectrum, is commonly used in images depicting fresh ideas, creative projects, or new business initiatives. It encourages people to seek new perspectives by abandoning the dull ways of looking at the world.
Turquoise/ aquamarine and has a strong link to the colour of the ocean. As such, it can be connected to calmness and peace. This is a colour that encourages reflection and focusing on one’s own needs, thoughts and feelings.
Black or dark grey is highly versatile and, depending on which angle you approach it from, you can see it as elegant, mysterious, or downright depressing. It is also a well used neutral colour
Admittedly, logo design isn’t my strongest suit. I made several attempts to sketch out a logo that embodies the theme of “love” and “family” while differentiating it from pet stores and other pet brands. While the palette has a dark grey, the logo is meant to be light hearted and modern without being overly serious and authoritative. The logo should never be against a dark or coloured background. It should be bright enough to capture attention while expressing the casual and youthful vibe of the organisation. Although they can be cliché, hearts are definitively a universal symbol that expresses “love” and “family”. The yellow heart represents those of the animals, signifying their always cheerful energy and unconditional love. The turquoise heart that embraces the yellow heart represents the people; showing how as humans, we need to be compassionate, sympathetic and calm towards others and bring meaning into their lives. The fonts used are Bebas Nue and the colours are almost neon; they represent a bold, daring and youthful culture within the organisation, influencing society with positivity.
Homepage is the most important page on a website. It is where first impressions are made by the user. It is also the page where we deliver crucial messages to the user without overloading them with information. To keep users engaged, the information needs to flow well; keeping them curious enough to scroll or explore more within the website. Most users browse animal shelter websites primarily looking to adopt.
The first section focuses on adoption. This is where the call-to-action button will be. The hero banner is also made to advertise weekly/monthly star pets that are available for adoption prompting users to check their profile out first. Below the hero banner are information cards that are educational for new pet owners who don’t know where to start. These information cards are meant to supplement the hero banner and reinforce the adoption messaging. However, there are cases where users are looking to these sites for help. Hence following the adoption should be about reporting or reaching out to personnel who is able to assist regarding difficult cases.
The report section is using a dark grey as a background colour to convey a serious tone. For a smaller group of users whose interest is in contributing to the greater good but do not have the time flexibility to volunteer, the following section can be about charity events and spreading awareness. As we reach the mid-point of the homepage, it’s good to add a reminder to the user again about how they can contribute. This is where I add more explicit clickable cards that will redirect the user to their desired page.
The next section, although less pertinent to most users, is still important to display. They are meant to target user engagement through articles, blogs, resources and fostering a community that aligns itself by helping less fortunate animals. They are also meant to educate the public relating to animals, events and how the organisation operates. Being a charitable organisation, it is important to show such transparency in order to gain public’s trust. While statistics aren’t significantly important for these types of organisations, they do display a certain level of success that the organisation has in their operation strategy and tactics. This helps them gain more trust and confidence from the public and users, knowing that what they are doing aligns with the majority’s principles and moral compasses.
As we near the end of the page, it is also good to add another reminder to users by giving them the option to stay engaged. This is where I added social media options, a call number and supporting via shopping comes in handy. Lastly, no organisation is complete without the help of volunteers. While it is a nice-to-have to encourage users to join as volunteers, the number of volunteer sign ups tend to be realistically lower. Showing what a day-in-the-life of a volunteer would look like would very well help mitigate the user’s concern and relate more to them should they see similarities in these stories. While most people voice their intention to help, only a small fraction actually act upon it. This is a proven study that was done showing 90% of the population shown interest in volunteering but only 1 in 4 actually act upon it.1
Finally, the footer bar is where I consolidate all contact and engagement opportunities to the user as a last reminder and attempt to reach out to them.
1: https://longevity.stanford.edu/three-reasons-why-people-dont-volunteer-and-what-can-be-done-about-it/
