top of page


Los Angeles Animal Care


responsive, non-profit

0. Background

LAAC (LA Animal Care) is an association of animal shelters. They partner with shelters all over Los Angeles County to raise awareness and foster the discoverability of pets waiting for a home. They are in need of a responsive website design to cover this purpose.


  • Design a responsive website (desktop, tablet, and mobile) that covers core functionality: search for pets, information about specific pets, and information about LAAC.

  • Design a new branding for LAAC

  • Add additional functionality to the website based on research that helps LAAC achieve discoverability and awareness goals. 

  • Deliver the final prototype within two weeks.

1. Research


Research Plan

Research Goals


  • Create strategies to encourage shelter animal adoption.

  • Understand what drives people to make adoption decisions.

  • Identify people’s adoption preferences (age, health, breed, personality, etc).

  • Identify adopters’ concerns and ways to address these issues.

  • Research how mobile devices assist adoption process.

  • Study how prospective adopters find shelters, and get qualified by shelters before adoption.

  • Discover challenges that shelters have, and find out potential solutions to mitigate them.

Research Assumptions


  • People prefer to adopt young, healthy animals due to potential health issues.

  • People have difficulties determining which shelter animals are the best match for their circumstances.

  • Most prospective adopters make decisions relying more on their feelings rather than logical reasons.

  • Shelters are concerned about prospective adopters’ reliability, and it is difficult for them to follow up post-adoption.

  • The adoption process is complicated and inconvenient. A mobile app would help remove hurdles and simplify the entire process.


  • Secondary Research

      Market research, Competitors analyst

  • Empathy Research

      Individual Interview + observation

Research Conducting



5 participants were recruited from 3 locations: local Petco, local shelter, and Southern California Pet Group (on chatting app). During the interview, I recorded the conversations using my phone. After the interview, I drew them portraits illustrations as gifts.



4 participants including 2 dog owners and 2 cat owners shared their experience, feelings, and concerns regarding shelter animal adoption. 1 participant is a full-time staff at a local shelter. They are 2 males and 3 females aged 20 – 35 who had an experience on adopting pets from shelters.

Empathy Map

I created an empathy map to synthesis my interview. I first type out all the conversations from my voice recording and then categorized them by do, think/feel, see and hear. And then I group the common ones into patterns analysis. Finally, I came up with insights and needs according to my previous processes. Empathy map is really helpful for me to really looking deep and sympathy my interviewees, which will be a solid foundation for later processes.



  1. Adoption a pet is a big decision, people would put reality factors into consideration.​

  2. The pet’s personality is the most important factor for people to pick them.

  3. People are looking for the “matching” pets rather than simply “picking” a pet. 

  4. People are frustrated by time-consuming processes and out of date information.





  1. People need to see relative information online addressed to their consideration and concerns.

  2. People need to be able to acknowledge the pet’s temperament, characters, and background stories.

  3. People need to walk-in to see and interact with a pet in person.

  4. People need more efficient application processes after seeing the pet at the shelter.




I created a persona called Nancy which inspired by my empathy map. I gave her basic information, a bio, personalities, motivations, brand affiliations, goals, pains, and needs. Persona helps me to empathize my users better.


2. Ideate


For ideation, I list out the charts with insights, needs, POV and HMW. I created POV by combining needs and insights and generated HMW according to POV.

After having my HMW, I brainstormed a list of possible solutions for each HMW by referring to my empathy map and persona, thinking about the POV and considering potential solutions for each HMW as many as possible. 


I made a diagram indicating LAAC's business goal and user goals, and what's in common. I referred back to my empathy map for user goals, and HMW for my business goals. It gives me a direction on next step project roadmap


It's a project roadmap with potential features for LAAC according to my previous business and user goals. After finding the common goals of business and users goals, I prioritized the common goals and listed out the potential features referring to my HMW brainstorming.


3. Define


After the roadmap, I create a sitemap with key features.

I made a user flow with 3 potential paths for pet adoption based on the previous sitemap. It will assist with following wireframe and task flow

User Flow

After the user flow, I made a user task to indicate how a user would complete a task from "searching on Goole", "landing on Homepage" to "Fill out the application form". I edited the user flow by grey out the rest of the tasks. It gives me a direction on conducting usability tests

User Task

Mid-Fidelity Wireframes

I created a set of mid fidelity responsive wireframes for four pages based on my UI requirements and low fidelity sketches.  The four pages are Homepage, Find a pet page, description page, and "interested" page.


4. Test

Usability Testing Plan

• To make sure the structure and interaction are comprehensive to complete a user task
• Test the Homepage to see whether it directs to “find a pet” easily.
• Test if the filters in “Find a Pet” page are helpful and understandable.
• Observe user’s preference for looking at the description page.
• To find out pain point and confusion or hesitation that need

Affinity Map

Based on my usability findings synthesis, I categorized the findings into "success", "pain point" and "recommendations" to learn where to be improved for my high fidelity prototype


5. Design

Logo Design

First I came up with some keywords about LAAC branding and then brainstormed some options for each keyword. Finally, I decided to use this option for my final logo. It represents a human hand holding a pet's paw.

UI Style Tile

I want to give LAAC an "adorable" and "sympathy" branding.

High-Fidelity Wireframes


Referred to my Idea board, I created five illustrated main pages. I created most of the illustrations. But I also bought some illustrations from online resources and edited them to save time.

Tablet & Mobile

I also created responsive web pages for the homepage, find a pet page and description page.


Final Thoughts

I really enjoyed doing LAAC project. Not only because I am an animal lover and I adopted my own cat from a shelter as well, but also because LAAC gave me the best interview experience. My individual interview for each of the five participants took averagely 40 minutes. I was impressed by their stories and had several emotional moments. My LAAC participants gave me confidence in interviewing strangers. They are awesome!


For the return to my interview participants, I spent some time and drew illustrated portraits for them and their pets, and then emailed to them. Nothing is more accomplishment than hearing "Thank you, I love it!" from them.


      Tools   Sketch, Invision, Illustrator

      Team   Alan Hurt (Product manager)

                  Heyi Wang (Designer)

Duration   80 Hours

bottom of page