Web Design • 2020
Pethouse
Summary
An online platform to match users and homeless animals in a responsive and informative method.
My Role
User Research
User Interview
Wireframing
Prototyping
Tools
Figma
Principle
Photoshop
Illustrator
Team
Solo project
Time
2020
01
Introduction
For most of us, the desire to share our lives with an animal is irresistible. Studies show that over half the people on the planet own at least one pet (GfK, 2016). Given that the pet industry is experiencing an unprecedented economic boost, It may be an increasing number of homeless animals on our streets.
Adopting a pet from your local animal shelter is one of the best ways you can help animals in need. However, thorough research must be done before you take on a long-term commitment. Does every pet adoption platform provide enough information for users to make the right choice for themselves?
Goals
02
Research
How Ella met Kiwi in NY
I interviewed my friend Ella from New York who adopted her puppy Kiwi around a year ago. Ella had done plenty of research using different resources and spending an enormous amount of energy before finding a match, and finally taking Kiwi home.
Ella had never had a pet before, but had always been interested in getting one. As she was working full-time and busy with her own career, she had doubts about the feasibility and it took her some time to finally decide to start looking.
For users like Ella, the most common questions before adopting a pet might be:
- Can it fit into my lifestyle?
- How do I train/look after it?
- What exactly does the adoption process involve?
↑ Empathy mapping
In our interview, Ella described the following problems she encountered during the adoption process:
1. A dreadful searching process: she had to check if she met the criteria case by case and manually
2. Preparing documents to meet the requirements of different organisations took a long time
3. Her uncertainty about getting a dog, and whether the dog was the right one, shadowed most of the journey
4. The whole process was not transparent enough
5. There was no follow-up support from the shelter
↑ The process of how Ella got Kiwi
Do we want to make it 'easy' or 'right'?
I studied the adoption process of some globally popular platforms (Petfinder, Adopt-a-pet and ASPCA) and some local ones (Ikzoekbaas and Verhuisdieren). The standard process on most websites starts with endless hunting for information and is accompanied by little guidance. This process might be ‘easy’ to build for the platform: simply a template for lovely animal pictures and a button linking the shelter’s email. However, this seems inadequate for helping users with their struggles and doubts during their search for a perfect match.
The process of Verhuisdieren is slightly different to the majority. To its credit, it emphasises the importance of creating personalised filters in order to find a match.
↑ The process study on competitors
In terms of support, I think most websites fail to provide a user-centred solution. Some offer a library of tips for users to browse and search freely, but unfortunately these resources are often treated as a separate section of the site, away from the adoption service. In this way, only the most motivated users will find the help they need to find the perfect match for adoption. The Pethouse would have a tailored solution: it links the animal and its potential problem directly to the related tips that the owner might find useful.
↑ Most competitors’ structure
↑ Proposed structure
An optimised process
Inspired by the process of Verhuisdieren, I explored the possibility of a better way to adopt a pet online. I think the simplicity is crucial for users. Unlike Verhuisdieren, it is possible to explore the platform without registration. Only when the user is ready to take the responsibility is it essential to get an account. The long-term support is also considered as a part of the whole adoption process.
↑ Proposed process
Mapping the website
I used the card sorting method to figure out the structure of the website. My first step was to write down keywords related to pet adoption on cards and scatter them on a table. I then sorted the cards by grouping them into associated keywords, and found a name for each group which described their theme.
This method gave me a better idea of the site map, and provided me with immediate materials to guide my wireframing.
03
Wireframe
Throughout the iterative process of wireframing, I reviewed and examined each stage with the user’s needs in mind. The first proposal was inspired from a study of competitors, and after three rounds of iteration this turned into a more effective and simpler solution, which answered the user’s needs at each stage in a straightforward manner.
What to expect on the landing page
The first proposal tried to deliver information that the user might require via several sections arranged by topic from top to bottom. These included: ‘looking for a pet’, ‘new pets in the shelter’, ‘an introduction to the adoption process’, ‘tips and advice’ and ‘about us’.
In the iterative process, after reviewing the user’s intent at the landing page, I realised that most of these sections were redundant. The interview with Ella taught me that she had started to browse available dogs even before she had made up her mind to adopt. What users expect to see on the landing page would be the portal to view all available pets. I therefore proposed a simple landing page where portals to different types of pet (grouped as ‘dogs’, ‘cats’ and ‘others’) dominated the interface.
When I later reviewed my study of the adoption process which had emphasised the importance of follow-up support, it became crucial to understand that two types of users needed to be taken into account: those who are looking to adopt, and those who are looking for advice about their pet after adoption.
↑ Persona, click left or right button to see next
When I later reviewed my study of the adoption process which had emphasised the importance of follow-up support, it became crucial to understand that two types of users needed to be taken into account: those who are looking to adopt, and those who are looking for advice about their pet after adoption.
To make it 'right'
Most users hope to find a perfect match on the page showing available pets. The most important question for them is likely to be what their own criteria are. For users who are not completely sure of what they want, the right approach would be to start by searching for something certain, such as their location.
Users should be encouraged to consider their preferences and set advanced filters for his or her search results. A rigid grid system is applied here as it provides a clear overview of the result.
Users may generate a lot of questions as they are searching. Four useful links can be found on the left upon opening the page. More importantly, as they are browsing the results information cards are inserted among the available pets, which offer useful advice and potential answers to users’ questions.
Unfolding the journey
The page displaying the details of a particular animal should not just be a slide show. In order to help the user better evaluate the match, he or she should have immediate access to the adoption requirements and any behaviour problems the animal may have, as well as a direct contact for the shelter.
Should a user decide to adopt the animal, they can check the adoption process in a clear diagram on the same page which shows the next steps they should take. The process is designed with the hope of making a responsible match.
If the users are not sure about adopting, they are encouraged to support the animal in other ways, by donating to or volunteering at the animal shelter.
04
Design
Colour: pastel and accessible
Two shades were first selected to set a childlike and innocent tone for the website. During the further development, two lighter shades and an intermediate one were added to enrich the design. A preliminary study of the contrast ratio based on the text in colour colour #333333 helped to decide the final colour palette.
Typology: frisky and mellow
I selected two Geometric fonts whose curves span a larger radius. Proza Libre is used for headings because of its presentational quality. DM Sans is used as the paragraph font which benefits the readability and character of the website.
Accessibility Testing
For an easily accessible website, I tested different combinations of text colour on the scheme colours. The goal was to produce a guideline for the readable and structural use of the colours.
↑ Drag the handle to view the difference
↑ Before
↑ After
The guideline
Finally I reached a conclusion and made a guideline for the colour of the text and its background (The standard is referenced to W3C Recommendations).
Logo: the cozy cat
I was inspired by the picture below and started to draw a cozy sleeping cat as the logo. It delivers a wholesome message as I hope all the animals in the shelter can find a comfortable home to sleep in. When I digitalised it, I used a series of circles whose centres were on the same vertical line as references. The joggling animation effect when a user clicks on it adds a playful touch.
Landing page
Users are welcomed with a simple landing page where they can find direct access to what they want: finding a pet or finding advice. The hover effects shows two links for users with different purposes. Otherwise, users can navigate using either the menu button or the footer.
Available animals page
Users are encouraged to define their criteria step by step, starting from their location. The page also reminds them of the importance of making a responsible choice. Relevant information cards can be found in the gallery of the available animals.
Animal detail page
On this page, users can find more information about the animal as they scroll down: from a general outline to key facts and stories. Users have access to more practical information and can contact the shelter directly if they are interested. If they decide to adopt, a clear diagram of the necessary steps is shown to clarify the process. If they still cannot make a decision, different ways of supporting the animal are listed to encourage them to contribute to its well-being.
Responsive design
A responsive design is necessary in order to provide a smooth user experience across different platforms. Here I explore and test my design on web, tablet and phone screens.
Wanna say hi?