Design Brief

Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet which matches their lifestyle, considering factors including breed, gender, age, temperament, and health status. Provide high level flows, supporting wire frames, and include a high-fidelity mock up (for at least one step of this experience).


2 Weeks
4 Days For Writing

Brief » Requirements
  1. Get animals out of shelters/foster homes and into proper homes.
  2. Promote Action: Connect people to adoptable pets that match their preferences and lifestyle.
  3. Promote Awareness: Educate about adoption and support connection for those not ready yet but still looking.
My Context

I’ve never had a pet before, adopted or not, due to my allergies and living situation growing up. However, I’ve lived vicariously through my friends’ adopted pets – seeing a symbiosis of love and support, knowing this could help others achieve the same, interested me deeply in this challenge.

Problem Statement

From my research and talking with people interested in adopting, I found that a core issue with pet adoption is in its perceived and real-life complexities: not knowing where to go to adopt, unclear expectations on the adoption process, and difficulty in finding a pet that pairs well with the owner. To relieve potential adopters of these complexities would get many more animals to their proper homes.

Briefly: The Solution

AdoptHero is a mobile app that makes it easy and fun to find nearby shelters, view adoption stories from others, and get paired to adoptable pets and shelters that work with your interests. And for adopters not quite ready yet, AdoptHero helps them retain their love for adoption until they’re ready.

Jump to a phase of my design process:

DiscoveryPersonasIdeationWireframingPrototypingHi-Fi MockupExtensionsReflection

Research & Discovery

I began with collecting my essential questions:

  1. Who are potential adopters’ and current owners’ backgrounds?
  2. What contributes to the decision-making behind adopting a pet?
  3. What factors encourage/discourage adoption and pet-ownership?
  4. What opportunities exist in the adoption to pet-ownership journey?

I formulated a research strategy to answer them:

  1. Mind Map open questions and angles to investigate
  2. Industry Research on adoption services and processes
  3. Conduct Online Benchmark Survey & 1:1 Interview(s)
  4. Generate a Journey Map that shows the current adoption journey

Finally, I set these constraints with respect to time:

  1. Timebox: 3x adoption center/service research for 2hr; 1-day turnaround for public survey, and 1x interview for 1hr.
  2. Scope: Limited time and budget mean a smaller sample size – nevertheless, any gatherings will help inform my brainstorming.

1: Mind Map

With a quick mind mapping, I brainstormed my open questions:
Who are these adopters, what goes into evaluating the right pet, and what does the adoption process entail?

2: Industry & Competitor Research

In addition to general research to learn about the world of pet adoption, I researched three established adoption centers’ websites, intake forms, requirements, and resources.

I was surprised to find most shelters have a similar process and requirements to adopt, like an 18+ or 21+ minimum age, as well as an owner lifestyle survey/evaluation.

I noted the basic info and lifestyle questions, which I’d later integrate into my user survey/interviewing to see if there was anything else that could help make a better pet-match.

3: User Survey

Using my mind map and initial research, I created a survey to capture quantified interests/preferences, as well as open-input qualitative responses about touchpoints in the adoption journey. My light screener helped disqualify anyone that hadn’t adopted and wasn’t interested in it.

I received 46 responses, which I then cleaned up and gathered insights to work from.

You can view my full analysis here – I’ve pulled a few highlights that were most helpful for my following design work:

4: User Interview

I adapted my survey questions into an interview script using open-ended questions that I could use to dive deeper, depending on the participant’s experience and context.

Although I had enough time to interview a Not-Ready-Yet adopter, if I had more time I’d dig into the experiences of Ready-To-Adopt and New Owner categories, to find out how they felt throughout their experience.

Interview Key Highlights

  1. Reasons participant can’t adopt: home size, income, and consistent time at home. Also a noteworthy detractor: of the six SF places he’s lived in, only one was pet-friendly.
  2. But if he could adopt: Already knows the size, breed, age, behaviors, and appearance of his potential dog.
  3. He’d want to see it in person first, to evaluate its behaviors and interactions around others, as well as its appearance.
  4. With an app or website, he liked the idea of seeing all adoptable pets nearby, at shelters and beyond. It would also make him think about adopting a pet more in general.

5: Current-State Journey Map

I created a journey map to visualize the current state of adoption. I found there are five high-level phases of the adoption journey with many opportunities mid-journey.

5 High-Level Phases

  1. Awareness: Adoption enters the user’s focus as a possibility
  2. Discovery: User considers pet preferences and looks up and/or visits adoption locations.
  3. Deciding: User meets on-site and evaluates potential pet(s).
  4. Adoption Intake: The shelter member collects documentation and assesses the adopter for pet ownership.
  5. Adoption Finalization: If approved, records and fees are copied and the pet comes home.


1: Personas

After collecting all of my data and insights, I synthesized my learnings into design-actionable, goal-aligned personas.

I defined two personas to design for moving forward, aligning to the two main categories of target app users: Ready-To-Adopt and Not-Ready-To-Adopt.

Sophia’s persona (orange) draws upon common patterns of situations mentioned by participants in the Survey, as well from my 1:1 interviewee. Her story shows her balance between her career, living space, and aspiration to have a pet.

Claudia & Matt’s persona (blue) is the other side of the coin – they’re ready to adopt. They have some housing-related pet restrictions, but are still open-ended on what type of dog they’re looking for and where they could adopt from.

2: Persona Core Needs

I also defined core needs for each persona to make sure the solution provides a fulfilling experience to both usage categories.

Sophia’s core needs center around sustaining interest to adopt and helping her prepare for when she’s able to.

Claudia & Matt’s needs are more result-driven, defining how we can can streamline their search and adoption of their ideal pet.

3: Persona User Flows

Lastly, I created high-level user flows for each of persona, which would closely help guide my next phase of wireframing.
The two personas’ user flows include a “flow trigger” entry-point into the journey, icons pertaining to the verb or noun of the touchpoint, and descriptions of services that aid in smoothing the adoption process from the app.

Although it was out of scope for wireframing, in the Ready To Adopt flow there’s a handoff-solution worth noting: After a user schedules their potential pet’s shelter vistit/adoption, the system pulls any applicable answers from their pet pairing survey, generating a printable PDF that the user can hand to a shelter team member for faster approval.


With my Discovery and Persona artifacts acting as different lenses to help shape the potential experience, I was ready to move into ideation – my favorite area of the design process.

I constrained myself to 30mins per category, brainstorming with descriptions and sketches to imagine the mobile/service context, and then affinity-grouping them by function area (like grouping location-related features).

Additionally, knowing that this would be part of a Google ecosystem, I reserved darker blue post-its for ideas that could potentially build from or add to Google’s services.

Wireframes & Wire Flows

Wireframing At Different Altitudes

My next phase of wireframing aligned the realism of my personas and their core needs with the more ambitious and differentiating features of my ideation phase.

Wireframing served three purposes in arriving at a solution:

  1. Defining an IA/Chrome for the app (seen right)
  2. Building out the core areas: explore, favorites list, and profile
  3. Integrating the pet-pairing feature/survey: before, during, and after the user completes the pairing survey

Lo-Fi Key Areas

Lots of global to screen- or action-specific affordances and navigational frameworks came together in this phase.

To start on wireframing, I quickly sketched out my features, their placement, and initial affordances.

Prototyping, Testing & Iteration

Mid-Fi Wireframes, In Context

As the scope of the app increased, multiple flows for the user emerged. I saw a need to feel the wires in their mobile context and test them further, so I created an interactive prototype to stress-test the Ready-To-Adopt persona.

Try it on your phone:

Further Refinement & Outside Perspective

I tested the prototype in its mobile context, seeing how information flowed together and scaled.

I also tapped a friend for a quick over-the-shoulder user test. Watching him navigate on his own and asking about his feelings/confusion in core areas, I arrived at a few tweaks that would hone in on the app’s usability:

  1. The user expected a definite place to tap to see all favorites, 
and did not expect it in the filtering menu or profile
  2. Some survey question copy could be clearer
  3. Survey answer form fields could require less input work with further refinement

These changes were made in my mid-fidelity wires and brought back into the prototype. Next up: Hi-fi!

High-Fidelity Samples

Moving the app into higher fidelity, I focused on defining the tone, brand, and richness of the app experience:

  1. Easy on the eyes: Corners are rounded and material shadow elevations help differentiate information
  2. Calming colors: Non-conflicting colors with photos, and colorful enough to evoke both trust and fun.
  3. Legible: I selected Avenir Next for its differentiated weights and excellent legibility. Using the Material plugin in Sketch, this was a simple dropdown change – much respect to the team.

To the right: A tappable prototype showing three areas of the app in hifi.

Try it on your phone:

UI Components

Shown grouped into their functional categories: Action cards and content with relevant data and graphics filled in.

The newest Material system has been used wherever possible – small changes and additions to this system have been made to accommodate added form inputs and strengthen the Pet-Pairing branding.

Feature Extensions

Integrating With The Google Ecosystem

Youtube Content
& Curation

Consistent in YouTube’s history has been its home for autobiographical stories – pet adoption is no exception.

Given the availability of this content, there is great potential in providing this in the mobile app context with personalized, recommended, and/or curated video lists.

And since app users will be filling out the PetPair survey, we could surface YouTube content as targeted as a user’s specific breed preference.

Google Follow
& Feed Integration

With Follow integration, we can make use of the Google Feed for relevant content placement. It’s especially useful for Not-Ready To Adopt users, as this would persist their awareness of pet adoption and info in a more appropriate space (rather than a push notification).

Try it on your phone:

Google Correlate
Re-Engagement Timing

There are a few ideas from my ideation that I loved, but were out of scope. One was to use Google Correlate to identify times when interest in adoption is peaking, and when connected with a system that tracks the user region’s shelter volume, we could identify when we could use push notifications in AppHero to provide context-justified marketing.

Concluding Notes & Reflection

Using the app prototype on my phone from start to finish, my experience was positive. Given my lack of adoption history, this would be a great way to hit the ground running.

While I focused more on the Ready-to-Adopt user category/actions in my wireframing since they would most significantly connect with and have an impact on our problem statement, I think there is a lot of value in our Not-Ready-Yet adopters’ features – it could even persist as a spin-off app given my research revealing this large demographic and their desire for peripheral persistence.

And after completing the design work for the MVP version of our app, I have a few follow-ups for validating and strengthening the app:

  1. Measure usage of the Explore/Favoriting function and areas, to test my assumption of users’ mental model of browsing and curating potential pets.
  2. Solve from the Shelter’s side: Visit Shelter, study their application forms, process, review process, and their respective web versions. Find ways to streamline and integrate processes and decision-making into the app, or if there’s impact in creating a separate solution for shelter teammates.
  3. Create a decision tree/map for the Adoption Shelter’s evaluation approach, especially to see how questions around lifestyle factor into their decisioning.
  4. Perform a yum/yuck assessment of existing digital adoption flows, then assess AdoptHero’s flows for comparative ease and impact.

I also came upon more critical reflections and learnings throughout my process:

  1. Adopting a pet requires physical 1:1 time – for both to know it’s a match. Earlier in ideation I thought about an amazon prime-like pet adoption approach, however I found in research the dynamic between pet and their potential owner is important in ensuring the owner keeps their adopted pet in the long run.
  2. While this design crystallized in the form of a mobile app, I see this solution being a very powerful progressive web app (PWA) as well, as notifications, persisted user login, offline support and caching are all available, and it would get people into engaging, personalized experiences with less friction.
  3. Using Social Proofs or a bandwagon effect to push the person (“15 others are thinking adopting about this pet”) sounds like a good way to drive engagement on paper, but this would dilute the pet pairing process/scoring; and from a moral perspective, this context of pet rescue would not benefit from pushing someone to adopt if it prevents them from assessing on their own criteria first.

Thank you for taking the time to look through my case study – looking forward to designing with you soon!