top of page

PetFosterConnect: Bridging Hearts, Homes, and Hope

An online platform that offers a comprehensive animal fostering database and seamless application system with a community function.


The current state of the pet fostering program is plagued by issues such as an unclear application process, excessive and unclear information, a messy and outdated database, and a lack of standardized procedures. These limitations hinder the adoption process for those primarily focused on adoption, and there is insufficient space for foster parents to share knowledge and experiences.


"Fosteroo" is a one-stop platform that combines a pet fostering database, an application system, and a supportive community. It streamlines the process of connecting potential pet owners in Canada with local rescue organizations and shelters. Users can easily find available pets for fostering, submit unified applications, and engage with a foster family community for support and shared experiences.


  • Miro

  • Adobe XD

  • Figma

My Role

  • Project Manager

  • UI & UX Designer

  • UI Researcher


  • 14 weeks

Design Process


- Research
- Survey
- SWOT Analysis


- Empathy Map
- User Journey Map
- Persona
- User Flow


- Site Map
- Wireframe
- Style Guide
- Prototype

Research Finding

In the early stages of the project, I conducted a comprehensive secondary research effort that yielded significant insights. This research involved an in-depth exploration of existing literature, industry reports, and relevant data sources. The findings from this research provided a solid foundation upon which I built my project strategy.

Survey Finding

After the project kickoff, I defined the research strategy and objectives. Understanding the target audience and their challenges was our priority. First, I built an online survey and shared it in various relevant communities. In just a few days, I received 20 submissions. Based on these, we identified some pain points, which led me to the next step.

SWOT Analysis

To gain a comprehensive view of our project's landscape, I initiated a SWOT (Strengths, Weaknesses, Opportunities, and Threats) analysis.

The SWOT analysis allowed me to evaluate both internal and external factors that could impact the project's success.


  • Growing Pet Adoption Culture

  • Strong Animal Welfare Organizations

  • Diverse Pet Selection

  • Community Engagement


  • Untapped Markets

  • Innovative Features

  • Educational Initiatives

  • Pet Supplies and Services Integration


  • Competition within industry

  • Localized Challenges


  • User Trust and Safety

  • Changing User Preferences

Empathy Map

To foster a deeper understanding of our target audience and their needs, I organized an empathy map workshop as a crucial early step in the project. This collaborative session brought together team members and stakeholders to collectively explore the thoughts, feelings, and experiences of our users. By visually mapping out the users' emotions, motivations, and challenges, I was able to create a holistic view of their journey, enabling me to tailor the project's approach to better meet their needs.

Empathy Map

User Journey Map

In an effort to enhance the current pet foster program, I embarked on the creation of a user journey map. This comprehensive exercise involved mapping out the entire experience of individuals involved in the program, including prospective foster parents, the animals in need, and program administrators. By visually representing each step of the journey, from the initial inquiry to the final confirmation, I gained a profound understanding of the user's emotions, pain points, and interactions with the program. This user journey map has become a valuable tool for me to identify areas where the existing program excels and where it may fall short. Armed with this insight, I am well-equipped to make data-driven improvements to ensure a smoother and more fulfilling experience for all participants in the pet foster program.

Journey Map


I wanted to form a deeper understanding of the user's goals, needs, experiences, and behaviors. So, I created 3 personas for each of the user segments. They were based on user interviews and surveys, and I kept updating them throughout the project as I gathered more data. I used these personas whenever I wanted to step out of ourselves and reconsider my initial ideas.

User Flow

In my quest to optimize the user experience from search engine to application submission, I embarked on the task of mapping the entire user flow. This intricate process involved dissecting each step a user takes from the moment they initiate a search on their preferred search engine to the moment they successfully submit an application to our program. By meticulously documenting this journey, I've gained invaluable insights into the user's path, pain points, and pivotal decision points.

User Flow

Site Map

In order to structure the project effectively, I took the initiative to create a comprehensive site map. This vital step involved organizing and visually representing the entire hierarchy and structure of the project's website. This site map serves as a valuable reference point, allowing for efficient navigation and content planning. It ensures that users can easily find the information they need and provides a solid foundation for the project's design and development efforts.

Site Map


Taking a critical step in the project's development, I undertook the task of crafting a wireframe. This essential process involved sketching a skeletal framework that outlines the layout and structure of the project's web pages. By focusing on the placement of key elements, such as content blocks, navigation menus, and interactive features, the wireframe serves as a blueprint for the project's design. It allows for a clear visualization of the user interface, ensuring that it aligns with our project's goals and user needs.

Style Guide

To maintain a cohesive and consistent visual identity for the project, I took the initiative to create a comprehensive style guide. This crucial undertaking involved defining and documenting the project's design principles, including color palettes, typography choices, iconography, and other graphical elements. The style guide serves as a reference document that ensures all project materials, from web pages to marketing collateral, adhere to a unified and appealing visual aesthetic. 

Style Guide


In a pivotal phase of our project development, I worked on crafting a functional prototype. This critical step involved transforming our design concepts and user interface into a dynamic, interactive model of the project. By employing prototyping tools and techniques, I brought our vision to life, allowing stakeholders to experience the project's functionality and flow firsthand.

Pro_Pet Database


Consistency and Clarity Matter

Consistency in design elements such as color schemes, typography, and navigation is vital. It not only creates a visually pleasing interface but also helps users navigate and interact with ease. 

Iteration Leads to Improvement

UI design is an iterative process. It's rare to get everything right in the initial design. Developing a UI project involves constant refinement and adjustment based on user feedback, usability testing, and evolving project requirements.

Feedback is a Continuous Process

Continuously gather feedback from users and stakeholders not only within the design phase. This ongoing feedback loop allows for post-launch improvements and ensures that the UI remains aligned with changing user needs and project goals.

Next Steps

More Features

Identify additional features and functionalities that enhance the user experience and align with project goals. Prioritize these features based on their importance and impact on the user.

Complete the Whole Design

Implement the remaining design elements and visuals based on the approved UI design and style guide. Ensure that all design assets, including icons, images, and typography, are consistent and in line with the project's branding.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.

bottom of page