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
-
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.
-
People are frustrated by time-consuming processes and out of date information.
Needs
-
People need to see relative information online addressed to their consideration and concerns.
-
People need to be able to acknowledge the pet’s temperament, characters, and background stories.
-
People need to walk-in to see and interact with a pet in person.
-
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.
