LAAC

Los Angeles Animal Care

 

responsive, non-profit

6.5 million companion animals enter U.S. animal shelters

1.5 million shelter animals are euthanized

Every Year

Adoption a pet is a big decision, people would put reality factors into consideration. The pet’s personality is the most important factor for people to pick them.
People are looking for the “matching” pets rather than simply “picking” a pet. 

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.

 

1. Research

Research Plan

Methodologies

  • Secondary Research

      Market research, Competitors analyst

  • Empathy Research

      Individual Interview + observation

Empathy Map

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.

Insights

​​

  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.

 

​​

Needs

 

  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.

 

​​

Persona

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. 

Strategy

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

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

Sitemap

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

Desktop

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.
 

UI KIT

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, I spent some time and drew illustrated portrait 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