UX Case Study

SayulitAnimals

An animal welfare organization devoted to helping the community

Project Overview

Sayulitanimals is a non-profit organization in Sayulita, Mexico, dedicated to eliminating animal suffering and building compassionate communities. Their mission involves addressing challenges such as overpopulation, neglected pets, and limited community awareness about animal welfare.

Project:  As a student in the Google UX Certificate program, I was tasked with designing for social good. Given the opportunity to choose a project close to my heart, I selected Sayulitanimals due to my personal connection with Sayulita. Having spent significant time in this small Mexican town, I developed a deep appreciation for its community and culture. 

This project is a commitment to enhancing their impact by creating a user-friendly adoption app that educates users, fosters community engagement, and extends Sayulitanimals’ influence beyond the local boundaries.

Team: Individual Project

Role: UX Strategist | Researcher | Designer

Tools: Figma, Miro, Google Suites

The Problem

Challenge: Sayulita struggles with a large population of abandoned and neglected pets and a lack of community awareness. Sayulitanimals aims to alleviate these issues but struggles to make pets in need of homes visible to the public and garner ample support, hindered by their limited visibility.


— How can we create a user-friendly digital platform for SayulitAnimals to address overpopulation and improve visibility for neglected pets in Sayulita?

The Solution

Solution: The SayulitAnimals App will simplify pet adoption, make animals in need more visible, educate users on responsible ownership, and foster community engagement, aiming to amplify SayulitAnimals’ impact beyond local boundaries.

5 steps of the design thinking process

DESIGN THINKING : Solving problems by taking a holistic, user-centered view of the issue

 

The Process

Phase 1 — Empathize

User Interviews — Empathy Maps — User Personas — User Stories — User Journey Maps = The Foundation of a User-Centered Design Process

Questions: Who are we designing for and what are their needs?

Stakeholder Interview:

In the stakeholder interview with SayulitAnimals’ founder, a critical revelation emerged: approximately 80% of the organization’s adoptions involve individuals from the United States or Canada. While some of these adopters are relocating to Sayulita, the majority are choosing to adopt animals and bring them back to their home countries.

Opportunity Insights

  1. Broader Outreach: The necessity of a digital platform to extend the reach of SayulitAnimals beyond the local Sayulita community

  2. Clear International Adoption Guidelines: The importance of transparent guidelines to navigate and facilitate international adoptions

  3. Streamlined Processes: Need for efficient processes to simplify and expedite international adoption procedures

Foundational Research

To begin getting to know the target users, I searched Facebook groups for people in Sayulita and Puerto Vallarta, focusing on individuals discussing adoption, animals, dogs, or cats. After identifying 49 potential participants, I distributed a screener survey. Eight individuals responded and passed the screener, leading to remote interviews to delve deeper into their insights. This approach ensured a targeted and authentic understanding, shaping the development of the SayulitAnimals app in alignment with the community’s real needs. This method allowed me to directly engage with the Sayulita community, uncovering genuine insights from potential users.

Screening survey:

  1. Are you a resident or frequent visitor of Sayulita?

  2. Have you ever considered or engaged in the pet adoption process in Sayulita or a similar location?

  3. Do you use a smartphone as your primary device for online activities?

  4. Would you be willing to fill out a short series of interview questions to help with the development of an online adoption platform?

Interview Questions:

  1. Can you share your experience or thoughts on the pet adoption process in Sayulita, including any challenges you faced?

  2. How do you typically search for information related to pet adoption, and what platforms do you rely on?

  3. What specific features or information would you find most valuable in a pet adoption app tailored to Sayulita?

  4. Can you describe any frustrations or difficulties you’ve encountered while navigating the current pet adoption landscape in Sayulita?

  5. How do you envision an ideal platform facilitating pet adoption in Sayulita, and what elements would make the process more accessible and user-friendly for you?

Key Insights

The initial interviews revealed three user pain points related to completing the pet adoption process:

 

Empapthy Maps & Personas

empathy map of user persona 1, Sarah
 

Empathy Maps — Interview answers were organized and categorized based on shared characteristics, goals, and needs to create two aggregated user personas to represent two target user groups.

Empathy map of user 3, Jasmine

User Personas — Converting empathy maps into user personas enhances empathy and understanding, translating key insights into actionable representations for a more user-centered design approach.

 

Problem Statement: Sarah is a 32-year-old remote graphic designer from San Francisco and a new resident in Sayulita who needs a straightforward and accessible pet adoption process because she’s navigating the challenges of unfamiliarity in a new country and seeks to bring a furry companion into her home.

User Persona Alex

Problem Statement: Alex is a 28-year-old marketing consultant from Vancouver Canada who recently visited Sayulita Mexico and fell in love with the town. Alex needs a streamlined remote adoption process because he wants to adopt a pet from Sayulita and bring it back to Canada.

 

Problem Statement: Jasmine is a 27-year-old bartender with a music degree living in Sayulita who needs a simple and straightforward pet adoption process because the current lack of traditional adoption platforms in Sayulita makes it difficult for her to find information about available animals.

 

User Journey Maps — User personas were used to create a user journey map to visualize and understand the their interactions with finding and adopting a pet, highlighting key touchpoints, emotions, and interactions throughout their flow.

Sarah´s User Journey Map
Alex’s User Journey Map
Jasmine’s User Journey Map

Use Case:

Mobile app: The goal is to highlight pets in need and drive adoption

Website: The goal is to educate and drive donations

Mobile First Design
I chose the mobile-first design approach because it aligns with the digital habits of the local community. According to a 2023 survey, 95.4 percent of Mexican internet users access the web via smartphones. Prioritizing mobile accessibility ensures the SayulitAnimals Adoption App is user-friendly and tailored to the community’s prevalent technology usage. Additionally, considering Sayulita’s poor wifi strength, focusing on mobile-first design addresses practical connectivity challenges.

Phase 2 — Define

— Problem Statements — Hypothesis Statements — Goal Statements

Question: Which of my user needs are most important in my design to address?

 

By determining the goal statements for my two personas, I was able to take the action and outcome of the hypothesis statements and expand them to articulate specific and measurable goals for the restaurant app. The goal statements are also a vital tool for honoring a project’s business requirements.

 

Goal Statement: Sarah — The Sayulitanimals App will empower users like Sarah to easily discover available animals and navigate the adoption process in a new country. This will positively affect individuals seeking pet companionship in Sayulita by providing a seamless and user-friendly adoption experience. We will measure effectiveness by tracking the increase in successful adoptions and user satisfaction with the app’s usability.

Goal Statement: Alex — The Sayulitanimals App will enable users like Alex to efficiently explore available pets remotely, coordinate international adoptions, and contribute to the global welfare of animals. This will positively affect individuals outside Sayulita seeking international pet adoptions by providing a centralized and accessible platform. We will measure effectiveness by monitoring the number of successful international adoptions facilitated through the app and assessing user feedback on the ease of the adoption process.

Goal Statement: Jasmine — Our pet adoption platform will empower users like Jasmine to seamlessly search, connect with, and adopt pets, positively impacting her ability to find a suitable companion. We will measure effectiveness by tracking successful adoptions and user satisfaction levels.

Phase 3 — Ideate

Competitive Audits — How Might We — Rapid Sketching — User Flow Diagram — Storyboards

  1. Outline the goals of my audit

  2. Identify direct and indirect competitors

  3. Determine the aspects of my competitors to investigate (products’ users, interactivity, flow, visual design, written content)

     

The competitive audit revealed a distinct gap in the local market as no competitors within a 200-mile radius offered a mobile app for pet adoption. The three closest adoption organizations located in Puerto Vallarta, 40 miles away, had websites, but none provided visibility of animals available for adoption. Additionally, critical information regarding adoption procedures and guidelines for bringing pets to the United States or Canada was lacking. The responsiveness of these websites varied, emphasizing the need for a more accessible and user-friendly solution in the pet adoption landscape.

Competitive Audit Report

How Might We…

How might we translate user problems, needs, or pain points into opportunities for design?

  • Amp up the good?

  • Explore the opposite?

  • Break the point-of-view into pieces?

  • Remove the bad?

  • Create an analogy?

SA rapid sketching - Crazy 8´s

Rapid Sketching

“Crazy Eights” is a great way to ideate in a visual and tactile way. I sketched eight different ideas quickly and without judgement for ways to solve user painpoints.

User Flow Diagram

A user flow diagram helps you visually map the steps that users will take to interact with your product, complete key tasks, and achieve their goals. To develop a user flow, answer these questions:

  1. What actions till users take in the product?

  2. What decisions will users make?

  3. What screens will users experience before and after taking action or making a decision?

SA User Flow Diagram

Storyboards

Big Picture — My goal was to show the emotional engagement that Sarah will have with the SayulitAnimals app. 

 
SA Close Up Storyboard

Close Up — My goal was to focus on the practicalities of the design itself and indicate Sarah’s transitions between screens as she completes her goal. 

 

Phase 4 — Prototype

Site Map — Wireframes — Mockups — Prototypes

Site Map

  • Organization

  • Hierarchy

  • Sequence

The site map serves as a visual guide to organize and include essential features such as pet browsing, adoption processes, virtual meeting coordination, and international adoption information. The goal is to provide all users with an intuitive and efficient navigation system following a intuitive path.

 
SA Site Map

Paper Wireframes

SA Paper Wireframes - 5 iterations of homepage

I sketched 5 iterations of the homepage to explore various designs. Stars mark features to integrate into the final paper wireframe version.  

The primary goal of creating paper wireframes was to visualize the initial layout and structure of the website, focusing on the arrangement of key elements. Through paper wireframes, I sought to establish a clear information hierarchy and user flow.

The primary goal of creating paper wireframes was to visualize the initial layout and structure of the website, focusing on the arrangement of key elements. Through paper wireframes, I sought to establish a clear information hierarchy and user flow.

 
SA Wireframes of Main User Flow

Lo-Fidelity Wireframes

SA Lo-Fidelity Wireframes

Using wireframes, I put my ideas on paper first and then started to make high-fidelity wireframes.

 

Lo-fidelity Prototype

The low-fidelity prototype connected the primary user flow from logging in viewing a pet to set up a meeting with a prospective pet. The Low-fidelity prototype was tested in the first unmoderated usablity study.

SA Lo-Fidelity Prototype

Design Systems

I created a series of reusable elements to develop the app more quickly and consistently, following predetermined brand standards.

Color Scheme

Typography

SA Typography

Phase 5 — Test

Usability Testing — Organize Data / Affinity Diagram — Analyze and Synthesize Data — Turn Data into Patterns and Themes — Translate Patterns and Themes to Actionable Insights — Prioritize Insights — Modify Designs — Repeat

Research Questions:

  1. Can users effectively explore and view pets available for adoption?

  2. Is the navigation and understanding of the pet adoption process clear for users?

  3. Are users facing difficulties finding information about the adoption process?

  4. Are there specific challenges or obstacles in completing the adoption process, from selecting a pet to finalizing the adoption?

  5. Can users easily navigate to different parts of the app from the home screen?

Usability Studies

I conducted two usability studies to refine the SaulitAnimals pet adoption app.. The initial unmoderated study assessed the lo-fi prototype, guiding revisions based on user feedback. Subsequently, a second moderated usability study aimed to validate the success of these changes and thoroughly evaluate the functionality of the hi-fi prototype.
SA Affinity Diagram

Gather the data in one place — Organize the data — Find themes — Translate themes into insights

 
Usability Study Round 1 Findings
Usability Study Round 2 Findings

Based on insights from the first usability study, users were not able to book a meeting with a pet. The non-functional “Book a Meeting¨ button, reported by all participants, is classified as a P0 priority issue. This critical insight indicates a complete halt in the user flow, preventing users from progressing to schedule in-person meetings or virtual calls with pets they intend to adopt.

 

Find all themes and insights derived from the first usability study in Research Report 1.

Research Study Plan can be found here.

 

The second usability study revealed the insight that users struggles with the readility of some elements. The size and color contrast was adjusted and will be futher tested.

Find all themes and insights derived from the second usability study in Research Report 2.

Hi-fidelity Mockups

Hi-fidelity Prototype

SA Hi-Fidelity Prototype

The final high-fidelity prototype showcased a more intuitive user flow for browsing, searching, and scheduling meetings with prospective pets. It also catered to user needs for clearer adoption guidelines for both national and international pet adoptions

Accessibility Considerations

Color Contrast and Readability

I ensured sufficient color contrast between text and background elements to enhance readability for users with visual impairments by using Web Content Accessibility Guidelines (WCAG).

SA Color Contrast Accessibility

Sequential Keyboard Navigation

I implemented a numbered annotation system to establish a logical traversal order, facilitating efficient keyboard navigation for users.

Hierarchical Headings

I documented hierarchical headings to order elements on a page and highlight their importance.

Inclusive design, essential for accessibility, ensures that products and environments cater to a diverse range of users, fostering equal access and usability for everyone, often resulting in improved design for all.

The Next Steps

If we were to bring this project to life. my immediate focus would be on furthersability testing to refine the app’s user experience. I would also kick off the development of a responsive website to complement the app. Despite the mobile-first design, having a website is crucial, especially for international users looking to bring pets back to the United States and Canada. Many of these users are likely to search on their computers, making it essential to ensure the website is responsive across all devices.

Takeaways—

Through this project, I’ve learned firsthand the importance of stakeholder interviews in bridging user needs and business goals. I did experience challenges with limited time and resources, making it difficult to gather enough interviews for robust user personas. Navigating this project, I’ve recognized that my existing familiarity with Sayulita could introduce personal biases. This raises concerns about accurately representing the diversity within the community, as my preconceptions might unintentionally influence decisions. This really solidifes the importance of rigorous research to mitigate potential biases.