Pet Health Tracker is a responsive website designed for pet parents and veterinarians. It provides a range of useful features, such as easy appointment booking, access to previous appointments and at-home care instructions, and the ability to track your pet's health.
Traditionally, pet owners would have to call or visit a vet's office to make an appointment, and reminders for appointments would be sent through postcards. Obtaining a copy of pet records often requires requesting a printed copy or receiving a large, difficult-to-read PDF via email. Additionally, at-home care instructions are usually only given verbally during appointments, which can be stressful and inconvenient for pet owners.
To address these issues, Pet Health Tracker was created with a simplified appointment booking process and a user-friendly interface for reviewing appointment history and at-home care instructions.
I conducted research using surveys on LinkedIn and interviewing family and friends that were previous or current pet owners with the following goals in mind:
Based on the initial research, I created personas to represent the user base and their pain points to better empathize when thinking of design solutions.
This is an example of one of the personas and their problem statement.
Problem Statement:
Alan is an IT support tech who needs to receive his pet care instructions online and through printed media because he has a hearing disability and it’s easier to read, rather than hear instructions.
After conducting my initial research, I began to brainstorm some ideas for how to format all of the information that needed to be included on the home screen, appointment screen, and the pet info screen. I listed all of the features that needed to be included to make sure each idea could possibly work, then marked my favorite layouts from each. I would later translate these to paper wireframes
After conducting research and brainstorming ideas, the app was designed with four main categories: appointments, "your pets," contact, and shop.
The "Your Pets" page displays information from your pet's most recent visit, including the option to view their full medical history and instructional videos for medical techniques. Users can also easily reschedule appointments and reorder food and prescriptions.
After collecting feedback from pet owners, it was evident that there was a need for a more accessible and convenient way to review information about their pets. Therefore, I updated the "My Pets" page to include details about the latest visit and at-home care instructions. I also addressed the issue of unclear costs by providing estimated costs for services during the appointment booking process. This allows pet owners to have an idea of the expenses before any services are performed on their pets.
The low-fidelity prototype using these digital wireframes include the user flow for viewing services, the pet page information, and booking an appointment (link will open in a new tab).
I conducted a moderated usability study after creating a low-fidelity prototype and requested feedback from my peers, friends, and family members. Again, these were all previous or current pet owners. These were the findings after the first round:
With user feedback and the affinity diagram (seen below) in mind, I created my high-fidelity prototype. The home page was completely redesigned to better direct the user flow to booking an appointment or viewing information about various vet services.
The pet information page also had additional features added, specifically the option to view the past 5 visits before downloading the full medical records of the pet. Users can also see upcoming appointments that they've made or the next annual checkup and what their pet is due for.
I also conducted a second moderated usability study since there were many format changes between the low and high-fidelity versions of the website. These were the findings from the second study:
.png)
For the Pet Health Manager's design system, I carefully selected a blue color palette and incorporated the Soft UI trends to create a soothing environment when reviewing pet information. The typeface chosen is playful with rounded edges and bubble-like buttons, which perfectly complements the fun and cheerful nature of pets. Furthermore, I meticulously checked all the colors used in the website for accessibility using WebAim's contrast checker to ensure the readability of the site for everyone. This attention to detail ensures that the website is not only aesthetically pleasing but also user-friendly and accessible to all.
