FosterTrack App
Tools
Figma
HTML/CSS/JS
MongoDB
Duration
1 month
Overview
A web app designed to help foster caregivers organize and manage the day-to-day care of their foster cats. FosterTrack centralizes cat profiles, daily care logs, and behavioural notes into a single, easy-to-use system, with all data securely stored in a MongoDB database for consistency and reliability. By reducing scattered notes and memory-based tracking, the app simplifies documentation and allows caregivers to focus more on the animals rather than administrative tasks.
System Design
User-Centered
Information Architecture
Primary User
FosterTrack is primarily designed for foster volunteers who need a quick, simple way to log daily care updates, behaviours, and medical notes. The app helps reduce stress, keep information organized, and ensure their observations are clearly communicated to the shelter.
Secondary User
Shelter staff use FosterTrack to review consistent updates across multiple foster homes, track patterns, and make informed decisions about care and adoption. The app replaces scattered communication with a centralized, reliable system.
UML Use Case Diagram
This UML use case diagram illustrates how FosterTrack supports communication between foster volunteers and shelter staff. Foster volunteers can create cat profiles, submit daily logs, and view existing profiles. Submitting a daily log includes sharing updates, ensuring information is passed directly to shelter staff. Shelter staff primarily interact with the system by viewing shared updates and cat profiles, allowing them to monitor care consistently and make informed decisions.
Wireframes
These wireframes explore the core structure and flow of the FosterTrack app, focusing on clarity and efficiency for foster volunteers. The layouts map essential tasks like viewing cats, creating profiles, and submitting daily logs, helping validate information hierarchy and user flow early without visual distractions.
System Map
This system map shows how cat profiles and daily logs are structured in FosterTrack, highlighting key information and how data flows to support organized, consistent care tracking.
Taxonomy
This taxonomy defines how information is organized in FosterTrack, separating long-term cat profile details from recurring daily log data to keep care records clear, structured, and easy to maintain.
Colour Palette
This palette was chosen to feel calm, supportive, and trustworthy. Deep navy adds structure and contrast, soft whites keep the interface clean, and muted green introduces warmth and care. Together, the colours create a soothing, approachable experience suited to foster caregiving.
MongoDB Database
The MongoDB database stores FosterTrack’s core data into cat profiles and daily logs, linked by catId. This structure keeps information persistent, scalable, and easy to manage over time.
Final App
These final screens show the polished FosterTrack experience, bringing structure and ease to daily care tracking. The flow moves seamlessly from viewing foster cats, to creating detailed cat profiles, reviewing past logs, and submitting new updates. Clear hierarchy, soft visual styling, and simple input controls keep interactions quick and low-stress, ensuring foster volunteers can log information consistently without friction. Please allow the app a minute to load.
Takeaways
1
Reducing cognitive load improves daily-use tools
Designing FosterTrack around quick, repeatable actions, like logging mood, medication, and notes, helped minimize effort for foster caregivers who use the app consistently, often at the end of long days.
2
Design should support, not get in the way
This project reinforced that good UX often means stepping back, removing unnecessary steps so people can focus on what actually matters, in this case, caring for animals.
3
Organization can feel supportive, not rigid
Structuring information didn’t have to feel strict or clinical. With the right tone and layout, organization can actually feel reassuring and helpful.
