Solving the Problem of Raising more funds and Promoting Rescued Pets for Adoption in the City of Porto Alegre
How I used UX Design to help a Pet Shelter to promote their pets to adoption and to raise more funds in Porto Alegre - Brazil
The Challenge
Through the UX Design Professional Certificate promoted by Google, this study case was prepared to practice the knowledge studied in the course.
My role was to be the UX Designer, going through all stages of the project, including:
- User research;
- Conducting interviews and surveys;
- Wireframing;
- Prototyping;
- Conducting usability tests and more.
My challenge was to Design a Responsive Website for a Pet Shelter in Porto Alegre.
The Problem
According to several sources, it was possible to identify that there was an increase in the abandonment of animals and an increase in violence against animals during the pandemic, not only in Brazil but worldwide. So, the website emerges as a solution to assist in the responsible adoption process, helping the Pet shelter raise funds, as well as helping stray animals find a new family.
Develop a viable high-fidelity prototype for the business based on feedback from users within a month and a half.
The Product
A responsive website that allows people to donate, sponsor and adopt pets from Hope Pet Shelter, an institution established in Porto Alegre — Brazil. The website also shows how to report animal abuse.
Project duration: 1 month and 10 days (From 26 july to 05 september).
User Research: Summary
During this project, several approaches were applied to validate information and discover points of improvement on the website, including desk research, interviews, surveys, competitive audit and usability tests.
Some of the frameworks applied were Empathy Map, Personas, User Story, User Journeys, Problem Statements, Impact x Effort Matrix and Sitemap. All the stages of the project were guided by the Design Thinking methodology.
User Research: Interviews and Qualitative survey
To understand both pet adopters and animal shelter owners it was necessary to conduct interviews and a qualitative survey. Interview with people who have already adopted pets to understand points such as:
- How the pet adoption process is/was done.
- How shelters approach adopters and where.
- Identify if there are many stray animals in the interviewee’s neighborhood.
When contacting people who work with pet shelters, it was identified that they almost always have a lot of work and a busy schedule to participate in interviews. The solution found was to adapt the interview questions to a qualitative research, using Google forms. Some of the points to be clarified with pet shelter owners were the following:
- What are the biggest difficulties, in terms of resources, that pet shelters face.
- What are the steps to adopt a rescued animal with pet shelters.
- Where shelters promote their campaigns.
It was important to prepare open ended questions in order to avoid simple answers (such as yes or no) and thus get more valuable information about the user and the points previously defined.
User Research: Pain Points
With the information received from the users, the main pain points were discovered, which were used as guidelines during the project.
- Low demand for pets: Many shelters end up with their space crowded because the rate of exit of animals is less than the rate of entry.
- Difficulty in raising funds: The biggest difficulty for animal shelters is getting money for food and medicine.
- Find a reliable place to adopt pets: Some people end up buying or not having pets because they don’t know animal shelters in their city.
- Abandonment and abuse of animals: There was an increase in abandonment and mistreatment of animals. Users also identified many stray animals in the neighborhoods where they live.
User Research: Problem Statements and Personas
Persona 1: Anna Souza is a Veterinarian who has a pet shelter who needs raise more funds and promote her rescued animals for adoption because she uses her own money sometimes and takes care of over 50 animals.
Persona 2: Gilson Ramos is a Designer that lives in Porto Alegre who needs to find an animal shelter and adopt another cat because he has a cat and works outside home most of the time.
User Research: User Journey Maps
Based on the Interviews, Surveys, Personas and Problem Statements, the User Journey Maps were elaborated in order to understand the user’s routine with the problem and what insights could be obtained at each stage of the process.
Competitive Audit and Solutions Prioritization
A study was carried out analyzing the weaknesses and strengths of direct and indirect competitors. Identifying both positive points (to know where to focus) and negative gaps (to make our product stand out) from the competition. It is important to note that one of the parameters used during this competitive audit was the experience using screen readers. For this test, NVDA was used.
After coming up with several ideas (from Journey Maps and Competitive Audit), it was necessary to select which ones would generate the greatest impact for the business with the least effort to be carried out. For this, the impact x effort matrix, seen in the images, was used.
Sitemap
A clear organizational structure is key for all users to be able to move through and use our website’s design successfully. Sitemaps are a good tool for planning out the architecture behind web designs. With that in mind, and in order to organize the hierarchical structure of the website, the following sitemap was created:
Paper Wireframes
At this stage, the selected ideas were materialized through paper wireframes. The screens were designed both for the web and for smaller formats such as tablets and mobile, since the project is a responsive website.
Low-Fidelity Prototype and first Usability Test
After making the main wireframes, it was possible to create the low-fidelity prototype (lo-fi, for short). This prototype was used in the first Usability test. If you wan to check out the full lo-fi prototype on Adobe XD, just click here (updated version).
With a working lo-fi prototype, a UX Research study plan was created to organize a usability test with users. Some of parameters can be checked below:
- Study type: Usability Study Online — Unmoderated.
- Location: Brazil, Remote (Using Maze).
- Participants: Eight (8).
- Lenght: 10–15 Minutes.
- Metrics (KPI’s): Conversion Rate, User Error Rate, Time on Task and System Usability Scale (SUS).
After conducting the usability test with the lo-fi prototype, it was necessary to organize the information obtained. For this we first used a note taking spreadsheet and an affinity diagram.
With the organized data, the analysis was done in order to filter and find patterns among user feedbacks, using pattern identification. Lastly, the insight identification was applied to identify the main insights, as shown below:
- Adoption flow improvements: Add a term of commitment and change the adopter wage question.
- Contact section not so easy to find: Include the contact information on the footer and add a button on the header menu.
- Add filters based on user’s data: Include the most commented filters in the main search form.
- Pet pictures looks like links: Transform the animal pictures into clickable links.
You can check what led us to identify the 4th insight in the following image,
initially it was necessary to click on the “more details” button to proceed with the flow. The first row shows the heatmap of the clicks on the pet’s cards and the second row shows each click individually (represented by an “X” each).
Style Guide
After laying out the structure of the website and testing it with users, the next step was to establish the visual identity. Visual elements like colors, typography, buttons, inputs, illustrations and icons.
For the colors of this project, we opted for calm colors that had a high contrast. The main idea was to have more sober tones, shades of blue, and a well defined color for emphasis, shades of yellow.
To choose the typography, we looked for two different ones that would match smoothly together. The first choice was Comfortaa, a friendly and fun font for titles/headers. The second choice for larger blocks of text and with good readability and legibility, was Open Sans. Both typefaces are from Google fonts.
The scale used for the typographies was 3:4 (perfect fourth). With this scale, it was possible to build a consistent hierarchy for the website’s headers and texts. You can check out all the variations used for the two typefaces in the next image.
High-Fidelity Prototype and second Usability Test
With a defined visual identity, it was time to create the mockups and make their connections to generate the high-fidelity prototype (hi-fi prototype, for short). You can check the hi-fi prototype in this link.
Following the same steps as the lo-fi prototype, a UX Research Study plan was prepared to then carry out a new usability test. The parameters used can be seen below:
- Study type: Usability Study Online — Unmoderated.
- Location: Brazil, Remote (Using Maze).
- Participants: Eight (8).
- Lenght: 15–20 Minutes.
- Metrics (KPI’s): Conversion Rate, User Error Rate, Time on Task and System Usability Scale (SUS).
The main insights obtained are described in the sequence:
- Confusion about sponsorship process: Include hyperlinks to explanations about sponsoring before people choose to sponsor a pet.
- Adding some colors: Some pages were too monochromatic, shades of yellow have been added to some elements.
- Text consistency: Some textual elements were written in different ways but representing the same thing, so the texts were revised.
- Night mode (will be implemented in the future): Some users would like to have night mode on the website (everyone who suggested it tested at night), as it is a very light look.
Based on the two usability tests, the SUS score was the same, both 95 (lo-fi and hi-fi). They scored considerably high, and the parity is probably justified by the addition of various visual elements to the hi-fi prototype, detracting from simplicity a bit, but rewarding in detail and information.
The time taken to complete the adoption process was reduced by 50.5%, from 58.6 seconds (lo-fi) to 29.6 seconds (hi-fi). Showing that the visual elements helped in the adoption process.
Some transformations from sketch to high fidelity mockups:
Accessibility Considerations
To check the contrast between the colors used on all the elements in the prototype screens, we used the Constrast Ratio Website. The goal was to pass at least AA level for text of any size, user interface components, and graphical objects, in accordance with the Web Content Accessibility Guidelines (WCAG).
During the competitive analysis, a screen reader (NVDA) was used to simulate the experience that a visually impaired person would have on the competitors’ website. This was especially important to identify errors to avoid and good practices to apply to our website.
The headers and text blocks were organized logically, following a hierarchy semantically. Also contributing to those who use screen readers.
Thinking about the handoff part, annotations for accessibility were created in the most important screens. Indicating to developers what the logical flow should be:
Next Steps
- Future implementations such as night mode, which was commented on by some users, would be added to the project, as the website has a very light look, in addition to night modes being on the rise and contributing to accessibility.
- When handing off to the development team, a meeting would be interesting to align and explain the concepts and elements of the project. This is especially important in order to develop a homogeneous product, checking if the information present in Adobe XD and annotations are sufficient for development.
- After launch, using some business metrics would be essential to continue ensuring user feedback to the product. One metric that would also be important is to track the inflow and outflow of pets along with the pet shelter. Bearing in mind that one of the difficulties of shelters is having a greater entrance of animals than the exit, causing overcrowding.
Takeaways
- Impact: This project is considered very noble and important, given the high number of homeless animals that exist in Brazil, a situation that was amplified by the pandemic. During the research with people who work in animal shelters, the various difficulties faced by them were noticed, which identifies a real business opportunity.
- What I learned: During this project I was able to apply new concepts and develop a Responsive Website project using Adobe XD as a prototyping platform. Some new concepts/tools applied that are worth highlighting here were the use of the sitemap, screen reader for testing, tools for prioritizing solutions, heat maps and annotations for accessibility. Every design decision was based on studied concepts and mainly on the user.
