LAAC
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.
Tasks
-
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.
Methodologies
-
Secondary Research
Market research, Competitors analyst
-
Empathy Research
Individual Interview + observation
Research Conducting
Overview
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.
Participants
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.
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
POV & HMW
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 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.
