![Group 272 (9).png](https://static.wixstatic.com/media/dc7def_223c920775354129b4efb4c3aeebb661~mv2.png/v1/fill/w_980,h_407,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%20272%20(9).png)
Petner
Pet Adoption Agency Website
UX/UI Designer
Participants observation, interviewing, synthesis, precedents research, design experiments, prototyping, usability test, and graphic design
Duration: Fall 2022
Team: Daniela Weng, Dominique Alvarado, Songlin Yuan
Tools: Figma, Adobe Illustrator, Google Docs, Miro
Course: Northeastern University - Research Methods for Design​
Overview
​
Problems
The main pain point is Communication, which is the process of exchanging information between users and adoption shelters. And the communication can be divided into 3 parts:
1. Productivity: Lack of clarity, users have to spend a lot of time figuring out how to apply for an adoption.
2. Support: Users are struggling to find real-time application status.
3. Process: Application redundancy, users have to fill out an application form each time they apply for a pet.
​
Solution
Migrate the different application forms into an intuitive website application process.
​
Results
User processing time: users spend about 50% less time operating our designed website than existing websites.​​
Design Concept
Provides an efficient application process for adopters and pet adoption counselor.
​​
-
Adopters | Expedite application process
We are currently targeting first-time adopters and want to expedite their application process.
​
-
Pet Adoption Shelter | Increase the scalability
Increase the scalability of the shelter, they can reply to most applicants with their application status with an easy click and check in the backend of the website.
Help counselors avoid spending hours on the phone and emails.
Participant Observation
We formulated a research question that directed towards the idea of researching the pet adoption process that is filled with a variety of parts we needed to find out along the way of what are we setting on to research.
Our investigation was realized by searching existing pet adoption websites each following 3 types of categories:
-
Official Website - MSPCA, Animal Haven
-
Government Website - City of Boston
-
Third-Party Website - PetFinder
We would do a thematic analysis for each specific site with giving a detailed response to the Action, Emotion, and an Improvement Opportunity. For each we would way-find the sites and take notes on experiences from browsing homepage to submitting the pet adopt application
Gathering the information for each site we were able to come up with pain points, pleasure points, and any other insights for the future resources that can help us plan the design and answer our research question.
![Group 275 (2).png](https://static.wixstatic.com/media/dc7def_e20fd27befaf41a791d33fc9c3c23eaf~mv2.png/v1/fill/w_980,h_649,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%20275%20(2).png)
Pain Points
We categorized pain points based on our observational research.
![Group 276.png](https://static.wixstatic.com/media/dc7def_615780d974f34afba5e5e3f04af273fa~mv2.png/v1/fill/w_899,h_822,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%20276.png)
Interviewing
Since, we are non experts and new adopters we needed to start conducting interviews that could help us have a more clearer understanding of what happens in the process.
We formulated interview questions that would be asked for each interviewee, and gathered 4 experienced adopters who shared their personal experience and expressed their feelings towards the overall process. For each interview we gave each other tasks for none of us to miss anything as from one being the note-taker, timer, and the conductor.
![Design 16.png](https://static.wixstatic.com/media/dc7def_696d079b1c134b82be48f5b441683b37~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2016.png)
![Design 18.png](https://static.wixstatic.com/media/dc7def_4a8973be8145475eb441c151ed6357e0~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2018.png)
![Design 17.png](https://static.wixstatic.com/media/dc7def_9ac5e398c9d64d6d99eedb946b0562c6~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2017.png)
![Design 22.png](https://static.wixstatic.com/media/dc7def_c79df052b059478cadd6e5498db22f6a~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2022.png)
Codebook
After the interview responses we went back in creating a transcript as smaller version of what was spoken in each interview that collaborated to make the codebook and see any common patterns each would fall on.
We then decided that "communication" would be the main pain point we designed to solve next.
![Group 276 (2).png](https://static.wixstatic.com/media/dc7def_89934492970d4f3d8a011c809008c961~mv2.png/v1/fill/w_799,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Group%20276%20(2).png)
Synthesis Research
After our previous interviews:
1. We identified and created 3 personas that modeled our users.
![Group 278.png](https://static.wixstatic.com/media/dc7def_9e48cbe0a6bf4cf0924d74d58907c81e~mv2.png/v1/fill/w_500,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Group%20278.png)
![Group 276.png](https://static.wixstatic.com/media/dc7def_ca154cef024344aa9ac7bc2af7bc2dec~mv2.png/v1/fill/w_500,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Group%20276.png)
![Group 277.png](https://static.wixstatic.com/media/dc7def_e70f03aff5d54dbba8ba4985aa4a2af9~mv2.png/v1/fill/w_500,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Group%20277.png)
2. Developed a scenario that model existing problems and design opportunities.
![Group 277 (1).png](https://static.wixstatic.com/media/dc7def_3c2936106bfb4a1f804471de6c109613~mv2.png/v1/fill/w_800,h_920,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%20277%20(1).png)
Design Proposal
Design Proposal
![Design 34 (1).png](https://static.wixstatic.com/media/dc7def_57fe3411339d424997fc2abff2ff7075~mv2.png/v1/fill/w_480,h_311,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2034%20(1).png)
![Design 35.png](https://static.wixstatic.com/media/dc7def_8311130f81854093bc4342ca568d3df5~mv2.png/v1/fill/w_480,h_311,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Design%2035.png)
We curated design concepts to select the most exciting options from the three.
![Group 10 (3).png](https://static.wixstatic.com/media/dc7def_724ee569e12f4b9da32ee8eec3c8d7b7~mv2.png/v1/fill/w_980,h_387,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%2010%20(3).png)
![Group 278 (3).png](https://static.wixstatic.com/media/dc7def_99f381ec1a5c4efdac9e82e9e7099864~mv2.png/v1/fill/w_978,h_603,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Group%20278%20(3).png)
Precedents Research
With the following collected precedents we were able to identify, analyze each example and annotated the samples through our sketches with the provided evidence of each part we will be grasping for our website as from previous used and seen platforms from our daily lives.
​
Research Objectives
We started by listing similar comparison objects that can help us understand current UX design trends/logics, so as to suggest ideal solutions for each pet adoption process.
![pet adoption research objetives.001.png](https://static.wixstatic.com/media/dc7def_e22a2313f77a41d1a75353c7fd947219~mv2.png/v1/crop/x_87,y_204,w_1753,h_680/fill/w_946,h_367,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/pet%20adoption%20research%20objetives_001.png)
Petner, as a pet adoption agency website, want to deep dive into the adoption process. We then divided the whole adoption process into 3 parts-search approach, application process, and tracking approach.
1. Search Approach | Increase search ability
Since housing search websites have similar user experience design and logic, we conducted a comparative analysis with pet adoption agency websites. It turns out that the similarity between the two lies in the distance: distance is the first for these industries.
![search 方法 1 (1).png](https://static.wixstatic.com/media/dc7def_069b528b810f42b8a8bb32a848ce9197~mv2.png/v1/crop/x_133,y_71,w_1964,h_761/fill/w_442,h_171,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/search%20%E6%96%B9%E6%B3%95%201%20(1).png)
Then we spotted our design opportunity! By adding map-based location search, we can help users find shelter locations more easily. Also, we implemented search scrollbar to provide more precise searching options.
![Group 279.png](https://static.wixstatic.com/media/dc7def_e7f472946a2843da8fc24cbcbb88e5a8~mv2.png/v1/crop/x_0,y_0,w_2344,h_1020/fill/w_711,h_309,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Group%20279.png)
![Tabloid - 3.png](https://static.wixstatic.com/media/dc7def_989770736ab540089911ec14968e9f0a~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Tabloid%20-%203.png)
![Dani_Precedent Library-2.png](https://static.wixstatic.com/media/dc7def_0f1181fe21124387aafbeb40bc9fd4bf~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Dani_Precedent%20Library-2.png)
2. Application Process | Expedite application process
The application process is the process we mainly want to optimize - speed up users' processing time. Therefore, we first compared the user process of pet adoption official website and agency website. It turns out that users typically spend twice as much time on agency sites than on official ones. As users have to submit their inquiries on the agency website and then submit the application form on the official website later.
![1663801972.png](https://static.wixstatic.com/media/dc7def_7638a063dc3045fb8b7751b5fe903125~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1663801972.png)
![Tabloid - 4.png](https://static.wixstatic.com/media/dc7def_c54a321b42544ea39a537ca90c18b358~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Tabloid%20-%204.png)
In order to speed up the user experience time, we divided the comparison objectives into two directions:
1. Adoption website: pet adoption agency website, pet adoption official website, and child adoption website
2. Application website: job search website and school application
After analysis, we teased out the ideal solution: By providing a unified application form and clear guidelines, and implementing LInkedIn's "easy apply" logic in the process, we can minimize the processing time for users to adopt pets. The image below is an example of one of our research sites for adopting children.
​
![Child Adoption-1 (1).png](https://static.wixstatic.com/media/dc7def_a3cab51601c740daba1bc1ee25a0fea3~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Child%20Adoption-1%20(1).png)
![1663801970.png](https://static.wixstatic.com/media/dc7def_11b407048c89496c845ddab74dfcff9b~mv2.png/v1/fill/w_479,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1663801970.png)
The picture below shows our process of optimizing user experience:
![Search Approach (1).png](https://static.wixstatic.com/media/dc7def_6b0d586719814c969ac75b3a0000b14a~mv2.png/v1/fill/w_663,h_429,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Search%20Approach%20(1).png)
3. Tracking Approach | Summarize the whole application process
Based on our research, every pet adoption agency and official website currently does not provide an application tracking system for applicants. Therefore, we found the corresponding comparison object on the tracking system to develop a suitable one for our pet adoption website:
E-commerce, food delivery, and job research website
Design Experiments
Based on the precedent research, we made some modifications accordingly, aiming to make our product more intuitive and logical. We then developed high-fidelity prototypes, especially for new adopters.
![Group 5 (3).png](https://static.wixstatic.com/media/dc7def_d076c4571eaa4a90a8b1ffbbc65946c5~mv2.png/v1/crop/x_0,y_5,w_4952,h_12043/fill/w_980,h_2383,al_c,q_95,usm_0.66_1.00_0.01,enc_auto/Group%205%20(3).png)
High-Fidelity Prototype
Usability Test
We reviewed our problem statement again to clarify the research direction.
​
The problem we are solving
New adopters feel lost and confused when it comes to the pet adoption process.
Our design hypothesis
New adopters are experiencing confusion towards the variety of existing application process being done in other organizations that needs to be more clearer, hierarchical, and reduce confusion.
Research question
How can "Petner" bring a hierarchical and less confusing way to organize information for new pet adopters' experience and a clearer pet adoption process that could improve this existing system?
How we tested the hypothesis
We conducted a monitored and non-monitored user testing method with 10 people for each website: Petfinder, an existing pet adoption site, and Petner, our design website. We chose Petfinder because we knew from our previous interview research that it is currently the most used pet adoption agency website.
​
We provided tasks, recorded time, and how many clicks were performed with a comparative analysis between an existing pet adoption site, Petfinder, and our site, Petner which highly focuses on the adoption process.
​
Results
1. User processing time: Overall, users spend less time operating our designed website than existing websites
![Untitled 2.001.png](https://static.wixstatic.com/media/dc7def_a6cc34bcc46745a1a8a5efb00e66380f~mv2.png/v1/crop/x_2,y_70,w_1918,h_1010/fill/w_980,h_516,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Untitled%202_001.png)
2. Positive feedbacks mentioned by testers:
![123.001.png](https://static.wixstatic.com/media/dc7def_1502eb481121445ea4f102156d1fb94f~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/123_001.png)
![Untitled 2.002.png](https://static.wixstatic.com/media/dc7def_29439f7ed497484682665c2a183ce5ec~mv2.png/v1/crop/x_2,y_76,w_1918,h_1004/fill/w_980,h_513,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Untitled%202_002.png)
Take Away & Next Steps
Impact​
-
For adopters, especially new adopters, an intuitive user flow can help speed up the application process time.
-
For shelter staff, this design allows for greater scalability, as they can reply to most applicants with their application status by simply clicking and viewing in the background of the site. Plus, we help counselors avoid spending hours on the phone and email.
What I learned
-
What Pet Adopters' need: I learned that what specific areas they care, clarity, and specificity that can change their behaviors and commentary towards the effects of the experience.
-
How the Pet Adoption Process works: I gained a solid understanding of pet adoption application criteria, which also allowed me to understand the thinking of adopters and shelter staff.
-
Develop a Design System: Based on previous user research, I learned the logic of creating a more appropriate user flow for the pet adoption process. Also, since I also understand the user's mind, I create a design style that fits the user's mood and behavior.
​​
Next Steps
-
Measure effectiveness:Usability test for pet adoption counselor
Due to time constraints, we are currently unable to contact pet adoption counselors for usability tests, but we will continue to do the usability test in the future.