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).

Timeline

3 Weeks Design
4 Days Content Strategy
1 Week Testing & Iteration

Impact Targets
  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 interviews with people interested in adoption, 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. With these complexities potential adopters have to navigate means that more animals are being prevented from rescue, and finding their proper homes.

Solution: In Brief

AdoptHero is a mobile app that makes it easy and engaging for pet adopters to find nearby pet shelters, view adoption stories from others, and pair with pets and shelters that work with their availability and interests. And for adopters not quite ready yet, AdoptHero provides ways to persist their interest in 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 that most shelters have similar requirements and processes to adopt, such as 18+ or 21+ minimum age, as well as a survey/evaluation of the owner’s lifestyle.

I took note of the info and lifestyle questions these sites requested, and later integrated them into my user survey/interview, iterating and building from it to ensure a better pet match.

3: User Survey

Using my mind map and initial research, I ran a public survey to capture a quantified view of interests and preferences; and qualitative questions about various moments along the adoption journey. My survey also included a screener to disqualify anyone that hadn’t adopted and wasn’t interested in it.

I received 46 responses, which I then cleaned, organized, and generated 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 Interviews

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 they can’t adopt: home size, income, and consistent time at home. Also a noteworthy detractor: only 1 of 6 apartments were was pet-friendly.
  2. If they could adopt: Already knows the size, breed, age, behaviors, and appearance of their potential dog.
  3. Prefers meeting potential pet(s) in person first to evaluate the behaviors and interactions it has around others, as well overall appearance.
  4. With an app or website, they liked the idea of seeing all adoptable pets nearby, at shelters and beyond. It would also make them 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, and found that 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.

Personas

1: Personas

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

I defined two personas to design from moving forward which would align to the two main categories of my target 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 and my 1:1 interviews. Her user story demonstrates her balance of attention and effort between her career, living space, and aspiration to have a pet.

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

2: Persona Core Needs

Each persona also defines their core needs, which will ensure the solution provides a fulfilling experience to both user types.

Sophia’s core needs focus on sustaining interest in adopting and preparing her when she’s ready and able to adopt.

Claudia & Matt’s needs are more transactionally-driven, focusing on how the app should help to streamline their search for 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 out of scope for the project, the Ready To Adopt flow includes a notable handoff solution: After a user schedules their potential pet’s shelter visit/adoption, the system references and pre-fills applicable answers from the user’s pet pairing survey, which would generate an email or print-ready PDF to provide to a shelter team member for faster approval.

Solution Ideation

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

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

Taking into account that this could be part of a Google ecosystem, the darker blue stickies were used to denote ideas that could build from or add to Google’s existing 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

Core Areas: Lo-Fi Planning & Iteration

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:

Interactive Prototype

Interactive Prototype

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:

Interactive Prototype

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).

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!