How do we improve
the pet fostering
experience?
Project
Background
Focus
HCI/UX
My Role
User Researcher
Interaction Designer
Team
Ann Tsai
Duration
3 Months
Claire Chang
Shravya Kolavara
The Pet Fostering Assistant aims to support and provide assistance to pet foster parents and build a bridge between them and the animal shelter/organization.
It will help the pet foster parents with promoting their pets, giving them access to adoption drives, providing health related information and it will comprise of a single database for their fostering experience. The system will also be used to directly communicate with various parts of the organizations and schedule appointments more easily via this application. Various features such as reminders about checkups, medicines and other important activities will also aid new foster parents in their endeavor.
The Pet Fostering Assistant will ease the process of fostering a pet and reduce the anxiety for new foster parents. In turn, it will increase their willingness to foster again. The interactive medium will enable people to be part of a community, provide seamless communication and overall a more efficient system.
Olie is a graduate student at UT who loves animals. One day he decides to foster a cat. He searches online and finally finds an organization that will help him foster a cat. Once he finishes all the paperwork, Olie is added to various online groups and email lists and gets flooded with emails regarding cats and dogs that need fostering. He tediously sorts through them all and finally finds the cat he would like to foster.
During his fostering process, Olie has to constantly report back to the organisation, upload pictures of the cat, attend adoption drives, visit the vet regularly and promote his cat on the organisations website. All very essential but tedious tasks. Since he has to switch between different platforms of communication and information gathering. He decides that once his cat gets adopted, he won't be fostering anytime soon cause the whole process is a tedious one and his busy schedule cannot handle it.
After talking to Olie about his journey as a foster parent, we decided to dive deeper into the problem and find a way to make the whole fostering process smoother.
Context
Process
Contextual Inquiry & Anaysis
Requirements & Modeling
Design
Prototype
RESEARCH
Contextual Inquiry
Before we began the research phase of our project, we decided to investigate some of the surrounding shelter's & rescue’s current systems, such as their websites and social media platforms. Based on the investigation, we fairly understood their goals and their general processes. This gave us an insight as to how we might go about researching the problem at hand.
We interviewed eight participants, out of which six would be our target users while the other two work at animal shelters and gave us a deeper insight into the whole process of fostering a pet.
.png)
We collected raw contextual data by observations during interviews, recording audios, taking pictures and visiting the the animal shelter.
First, we interviewed foster parents, and focused on their fostering experiences, the communication to the shelter/rescue, the information recorded by foster parents, and their suggestions towards the whole fostering process. We then visited the animal shelter to speak to the staff and collect field notes.
Numerous messages the user receives regarding available pets.
Mails regarding the weight tracking for kittens.
Numerous messages the user receives regarding available pets.
Contextual Analysis
To further analyze the data collected during our inquiries, we constructed a Work Affinity Diagram. Hierarchical categories and sub-categories were created to refine the entire affinity diagram.
Happy and Sad categories were also created to group together data based on the users feelings of satisfaction and dislike towards certain aspects of the fostering process. It was ensured that every piece of data collected was incorporated within the affinity diagram. Besides the happy and sad categories, we divided the affinity diagram into two user profiles- foster parents and organization, and a timeline of the process - before, during and after.
Requirements
After conducting the work activity affinity diagram, some of the work activities were grouped by users’ pain points, and some are grouped into different tasks in their fostering process. We read through every note, compared the importance of different notes, and picked the most important problems waiting for improvements to discuss. From these posts, we analyzed what gaps should be filled and how the system can do to help. As a result, we organized our work activities into 5 work bins and 12 extracted requirements.
Models
We identified 5 different models to help analyze the data collected. The models were Usage model, Hierarchical task inventory, usage scenarios, step-by step task interaction and User model.
These models helped us understand the various user, mediator and machine roles in the process. We were able to clearly visualize the data based on scenarios and a variety of tasks. These models set the foundation for our design process.
Persona
To begin the process of identifying the design persona, we first took all the data regarding personal characteristics, descriptions, goals, and their frustrations from our contextual inquiries and organized it based on these categories. We were able to find similarities between different interviewees and then built our persona based on these similarities. Although there were different kinds of users like “Users with kids”, we focused on building a primary persona that encompassed a majority of the users but also made sure that we include the frustrations of extreme situations.
.png)
DESIGN
Ideation +
Sketches
Our conceptual design ideas are initiated from different perspectives of the designer’s mental model. Our goal is to combine all tasks into a single platform and put the designer’s and users’ mental models into consideration.
We went through the whole fostering process, and addressed different tasks in each step. Followings are the paraphrased elements for our conceptual design:
Navigation/Explore
From the user’s mental model, we realized that the foster parents have the criterion in mind when choosing foster pets. However, the current system does not support the filter function. So our design has the feature for users to filter the search result.
Pet’s Profile, Health & Diary
Currently, the foster parents are using different tools to update information, and a standardized form has not existed. Our design focuses on creating a simple and standardized way for the foster parents to update pet information.
Foster parent’s Profile
We show emotional conceptual design ideas by introducing the foster parent’s profile. Our design provides reward mechanisms such as earning badges to encourage the foster parents.
Calendar and Appointment
This conceptual design idea is from the ecological perspective. Our design wants to provide the appointment process with the least steps to complete.
Messenger/Chatbot
All the perspectives influence this conceptual design idea. We focus on creating a conversational method to solve the issues of problems and emergency requests.
.png)
.png)
.png)
.png)
Storyboarding
Once we finished our ideation and sketching, we moved on to our storyboards. We first put down the workflow model of the user and divided the flow into three different scenarios. Each scenario was divided based on an individual frame. In this manner, we were able to build a story line and draw storyboards for it.
Describe your image
Finding a foster pet.
Updating Pet profile.
Describe your image
Wire frame +
Mockups
Using our low fidelity sketches we developed our medium fidelity mock ups and wire frames using Figma. We were able to pilot test using these mock ups and make relevant changes to the mock ups based on the user testing done. We continued to iterate on our designs till we were out of time and moved on to develop a medium fidelity prototype to test.
Some of the key insights we received during our pilot testing was as follows-
-
The navigation and the contents can be modified to be more intuitive.
-
For the home page, we can differentiate the layout design between events and foster pets because the need for finding events is different from finding cats and dogs.
-
For Explore page, we can provide the filter function before asking users to search for certain keywords.
-
For Health page, the graph showing weight information can be adjusted to be more clear.
-
In addition, in order to reduce confusion between different categories, we can change the category titles of the navigation bar or conduct tree testing to learn how users would find information on this app.
Using the observation we made during the pilot test, we redesigned parts of the interface.
PROTOTYPE
Medium-Fi
Prototype
We used the “T” prototype to develop the medium-fidelity prototypes using Figma. The wireframes of the main tasks evolved to be our horizontal prototypes. We created more interfaces underneath those main tasks as our vertical prototypes, so the users will be able to experience interaction and evaluation.
Below you will find a recording of some of the interactions performed by the application.
Key
Takeaways
Some of the key lessons I learn't through this process were
Determining the guidelines before you begin your research.
Having a research goal and some structured guidelines before heading out to do interviews and observations were crucial to us. Especially since every team member is not present for all interviews.
Collecting artifacts and field notes.
We photographed as many artifacts as we could. Although we were not sure how we might be using them, it ended up helping us during our analysis and even during our design process.
Thinking aloud can help prevent bias.
While conducting the contextual analysis, we were all voicing our thoughts while categorizing notes and pulling out requirements. This helped us prevent each other from introducing our personal bias by calling it out for each other.
Ideation-Work together or individually?
Our team decided to first individually ideate and sketch out our designs and then finally pool them together.
In this manner, we were all able to put down our ideas onto paper without influencing each other and then constructively go through the whole ideation process to identify design ideas that were similar and designs that stood out .
Iteration leads to better results.
Conducting the pilot tests and then finally conducting a heuristic evaluation and cognitive walk through for our application resulted in us iterating on our designs each time. The value of testing was definitely a key take away from this project.