PetDesk
Timeline: 6 Weeks • Completion Date: June 2024
Disclaimer: I do not work for or represent PetDesk. This UX study was done as a learning experience, in part with my studies for the MPS UX Design program at MICA.
Tools:
• Figma
• Miro
Role:
Lead Designer
Project Overview
Our project tasked us with locating two user pain points within an already existing platform or app, and creating our own designs to solve these problems. This project kept initial user research to a minimum but focused heavily on user testing and feedback.
Problems
​Scenario One:
Pet Owners, especially those with multiple pets, need an easy filter system within the tab to target individual pets or procedures at a time, to limit the amount of time spent having to scroll through what could be years of past information of their pet.
​
Scenario Two:
Pet owners using PetDesk need a dedicated and centralized location in the app for individual pet health history to keep track and get reminders of when upcoming vaccinations may be due for their pet.
Solution
Scenario One:
Bring in a simple filter bar, across all aspects of the app to allow users to filter out access not applicable to their search in a given moment.
​
Scenario Two:
Create a dedicated "Health History" tab for each registered pet in the app, that allows veterinarians to upload pet health charts directly to the chart for owners to see for records, and to send reminders of upcoming vaccinations that may be due.
Proto-Personas
Two Proto-Personas were created, one for each of the usability problems I wanted to explore further. Each had their own user story and a user flow chart to go along with the desired outcome of the project
Lauren
"As a multi-pet owner, I want to be able to easily locate the last appointment of a specific pet, so I can check when my last visit to the vet was for that pet."
User Flow
Emily
"As a new pet parent, I want to be able to track my pet’s health history, so I can keep my pet up to date on vaccinations."
User Flow
Wireframes
A set of wireframes was created for each scenario based on the goals of redesign I was looking to achieve. The wireframe designs represent the current design configuration of the existing app, with my re-design edits brought in.
Scenario One
Wireframe designs featured a simple drop down menu option allowing users to toggle between pets, with additional options to filter by date, provider, and service provided. Reset option added should users need to reset the filter options they put in.
Scenario Two
My original design involved creating an entirely new tab/pages to bring forward my idea of a general “Health Summary” page, which would be located on the “Pets” tab where users could already utilize the pet filter option to toggle between pets. This also utilized the filter bar created in the first scenario.
Style Guide
My style guide utilized the existing app coloring and font utilized across the platform. This information was offered directly from the PetDesk website
Prototype
Scenario One
The final prototype for this scenario combined two forms of a filter bar, that of by pet specifically- utilizing a already existing app setting in other locations, and providing a additional filter setting next to pet photos to further filter down requests how a user may see fit.
​
*This prototype is interactive! Please feel free to play around with it!​
​
To open prototype in a new window
Scenario Two
This scenario stayed more similar to the that of the original wireframe designs, but utilized the same filter features brought in within the first scenario. Sticking to my original design a new "health history" page was created for each pet which stored all uploaded information from the veterinarian that has been taking care of these pets. "Sylvester" was specifically used as the example in this study.
*This prototype is interactive! Please feel free to play around with it!​
To open prototype in a new window
Testing Feedback
5 users were tested twice during the course of this design project, once after wireframes were created, and again with the final prototype that implemented design changes based directly on their feedback. First round interviews pointed out some flaws and pain points that users experienced.
Scenario One Questions
Feedback from users during this testing phase was that of an accessibility standpoint. While users did not struggle themselves with the prototype, several users felt that if translated to their actual phones, the filter options being only on the far left side might be hard for some users to click- especially those with older/smaller phones or even users with bigger fingers.
Taking all user feedback into consideration, I made some more changes to the filter bar system overall- including moving the filter bar icon over a bit so it would not be so far to the left, and instead of having a drop down menu option on just the left side, the filter bar now opens to an overlay with drop down filter options in the center of the page. This design system hopefully corrected the accessibility issue users foresaw happening, and still allowed them the option to filter out what they were searching for within their appointments.
Scenario Two Questions
Users found the design concept of bringing in the same attention icons and color scheme more universal within the app, as opposed to seeing it a random feature located in just one location of the app.
The only negative feedback received at this point was in comparison to both prototypes- since I had highlighted the filter bar option again in this scenario, users pointed out design differences at this point in the test run. Where as the first prototype had a drop down feature at this point, and this prototype featured the only filter bar I had originally designed.
​
​The final product resulted in taking the unity idea of the color scheme and attention icons, and bringing it across the app. Final changes were made to the filter bar concept, and changing it to be a universal design to that of the one highlighted in the previous prototype.