.png)
Providing a local and seamless approach to scheduling appointments for your pets


Brief Summary
Fuzzy Paws Clinic is a local veterinarian clinic based in Charleston, South Carolina that offers a friendly and stress-free experience for pet parents'. The clinic focuses on creating a streamlined and seamless approach to scheduling appointments as well as quick access to communication with staff and the ability to view important notifications.
My Role
Sole UX Designer - leading the multi-responsive websites from conception to delivery
Responsibilties
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, design iterations, information architecture, accessibility considerations, and responsive device designs.
Project Duration
November 2021 - December 2021
Client
Passion Project
Problem Statement
The online communication between local vet clinics and pet parents seem to be broken and disconnected. These individuals have felt that calling seems easier to provide effective communication as opposed to doing it online. Across the board, they have all wanted something easy, quick and effective. They also felt like they didn’t have quick communication access or important notifications about their pets at the click of a button.
Goal
The goal was to find a way to build a sense of online trust, communication and confidence between the users and the local veterinary clinic all while drastically improving user and visual experience.

Primary Interview Research
I interviewed a total of 5 participants who had a least one dog/cat, had access to a local vet, and scheduled appointments at least two times a year. Moderated questions were open-ended about their overall online experience with the local vet clinic. The topics of choice included scheduling online appointments, ease of communication with the staff, access to quick notification pet records and transparency about vet bills. It was interesting to note that all but one participant had attempted to schedule an appointment with their pet online. This was because either the vet website didn’t offer it or lacked valuable data input for the users. If four out of five users weren’t interacting with their local vet from an online presence to schedule appointments, they might not be using additional features of the website. From further research, users did complain about the lack of communication that was available with the staff and transparency about the vet bills, even when calling the office. Also, many users were discouraged about forgetting upcoming appointments or to even schedule them. Most users just had paper copies, which from time to time, they would misplace.
This quickly became apparent, from user perspective, that gapped opportunities to bridge an improved online experience with the users and the staff at these local vet clinic was necessary. Consistent user pain points were of the following: an overall emotional online disconnection, lack of transparency, poor data input or no ability to schedule appointments, lack of communication with the staff, and poor visual and website branding.
My assumptions indicated that most users would schedule appointments online, given how often we use the internet for other tasks in our daily lives, but that certainly was not the case.
​
Participants
5 users
Requirements
Minimum Age 18
Own at least one cat or dog
Access to vet services
Schedule 2x appointments per year
Conditions
Moderated & Recorded Phone Calls

Interview Findings
Based on interviews, I found five interesting challenges and struggles that pet parent's faced when scheduling appointments.
1
Emotional Online Disconnection
Users felt emotionally detached from the local vet clinics from an online perspective.
2
Lack of Transparency
Users felt overwhelmed and worried about the cost of the vet visit after scheduling an appointment
3
Poor Input Data
Users felt discouraged about the lack of information they could provide to the clinic when scheduling an appointment, which in turn discouraged overall online use
4
Branding/Visual Design
Users felt that all their local vet websites were outdated visually and created confusion about where to access important information.
5
Lack of Communication
Users felt that they had minimal or no quick notifications about their pets records or the ability to speak with local staff online
.png)
Empathy Maps
After discovering these important findings, I created two empathy maps to create a shared understanding of the users needs and aid in the decision making process.
_edited.jpg)
_edited.jpg)
User Personas
After discovering important findings from interview research and empathy mapping, I created two personas that encompassed the pet parents' personalities. I present to you, Chad and Jessie.
(Fuzzy%20Paws).png)
Problem Statement:
Chad Barnes is a budget and detailed focused engineering manager who needs an estimated breakdown cost of services prior to the visit as well as an important reminders notification area because that will give him an ease of mind for overall planning and the ability to budget his finances accordingly.
Unorganized & Forgetful
"
"
Problem Statement:
Jessica Tobins is a busy and stressed pet mom who needs an improved scheduling process as well as an easy and enhanced way to communicate with the vet staff anytime, so that she can eliminate miscommunication and get the best care for her pets.
"
Socially & emotionally disconnected
"
(Fuzzy%20Paws).png)
User Journey Maps
After creating personas, I wanted to take these individuals though a scenario involving their direct actions and emotional feelings. These scenarios also provided opportunities of improvement of their user experience.
.png)
Scenario
Chad wants to reserve and schedule an appointment with an anticipated price of the services, so he can be financially ready to pay at a later date.
Scenario
Jessica wants to have the ability to have a detailed input option to explain the reason for the visit and to have a live chat session while scheduling an appointment
.png)
Crazy 8's
During the ideation phase, I constructed a crazy 8 sketches for both Jessie and Chad. My focus was to brainstorm as many different learning features that would potentially eliminate their user pain points when scheduling appointments for their pets.
.png)
Competitive Analysis
Digging deeper into the competitors market created an opportunity to discover strengths, weaknesses, missing features, and opportunities. Based on previous research, I wanted to find out if these gaps of pain points were being capitalized by competitors. An excel sheet was created to get a birds eye perspective.
I decided to analyze four companies that met requirements from a direct and indirect competitors standpoint. These were Bees Ferry Veterinary Hospital, Olde Town Vet Clinic, and Charleston Animal Society, Patrick Veterinary Clinic.
.png)

Strengths:
-
All buttons are easily accessbile including scheduled appointment, navigation bars, visually appealing
-
Sections are dividend and content easily understanding
-
Excellent user flow between all the pages
-
Nice hamburger Menu on the right side.
-
Easy to access all the top menu options as well as quick access to make phone calls and send an email
-
Responsive Design website well constructed
-
Brand identity is great. There are great primary and secondary colors being used, as well as a a visual and legible white background.
Weaknesses:
-
Too many different fonts and do not cohesively work well together. (Serif and San-serif)
-
disability accessibility button available for mobile version
-
Too many Unnecessary 'Request appointment' buttons at the top of page
-
Changes to another website URL
-
no way to go back to local website
-
Requires to put in information you would already have if created a PETportal, including name, email, and phone number
-
Cannot chose multiple time slots
-
Lack of transparency to input what has happened with the injury

Strengths:
-
Provides important content on the main page including hours, location, and services rendered
-
Well designed Vet clinic logo
-
Quick access to vet phone number
-
Easy navigation bar
-
Very little confusion between pages and the content inside of each
Weaknesses:
-
Lack of overall colors
-
Content between pages lack component separation
-
Contrast colors are poor on navigation bar
-
lack of uniformity with typography hierarchy, text fonts, and sizes.
-
Poorly designed menu drop -down
-
No actionable button to click the menu and have a drop down
-
No frozen menu bar while scrolling
-
When navigating to new page, you aren't aware what section you are on
-
Too much information to be scrolling on a phone, especially the services area
-
No quick clickable button to cal the phone number, email, or schedule an appointment.
-
Just feels like an information website, no interaction
-
No brand identity
-
Must call to schedule an appointment

Strengths:
-
Navigation bar is easy to visibility read
-
Excellent search icon and includes suggestive options while actively searching.
-
Nice hamburger menu bar with interaction design and sections
-
Robust and valuable textual resources
-
Great short clip videos
-
Brand Identify has wonderful quick videos to convey the connection and importance between humans and animals. It provides a wide variety of settings.
-
It does have excellent descriptions for each of the services and other causes they provide
Weaknesses:
-
Services are hidden toward the middle of the main page
-
Confusion on navigation bar for what pharmacy, pet store and calendar mean. There is a lack of contextual description.
-
Distracting and too much information about the navigation bar.
-
Too much mobile information on each page, too much scrolling, less is more sometimes.
-
Services are not provided at the top of the page, they should be
-
Request appointment button is buried in the website, it was extremely hard to find
-
Taken to a complete different website, felt disconnect as an online user.
-
Donation button is the front and center call-to-action button for the website.
-
Lack of direction to find valuable content
-
Poor execution when hovering over buttons and navigation bar
-
No disability accessibility button

Strengths:
-
Much Easier to read and understand than desktop version
-
Provided hamburger navigation bar
-
Simple design (no pages within pages)
-
Ability to access request appointment button is front and center
-
Ability to access PETportal on the navigation bar
Weaknesses:
-
No brand identity. It does not include a color scheme, font types/sizes, brand personality
-
Very disorganized in website layout
-
Navigation titles are confusing
-
Poor and disorganized colors, font size/text, and images
-
Poor contrast colors
-
Text is hard to read, some text is bigger than others
-
Call to action buttons are all different sizes, colors, and shapes
-
No disability accessibility button
-
Changes to another website called URL, feels disconnected
-
No live appointment times
-
No live chat
-
No ability to upload pics to injury
-
No ability to chose doctor
This competitive analysis research revealed many gaps and opportunities for Furry Paws Clinic.
Gaps:
-
Lack of emotional connections from an online perspective
-
Lack of accessibility options
-
Lack of communication options with the vet staff
-
Lack of data inputs when scheduling appointments
-
Lack of overall user flow from all perspectives
-
Lack of branding and identity focused on being stress-free, friendly and heartwarming.
Opportunities:
-
Having a better online connection with the local vet website
-
Improving the overall brand design and website interaction
-
Provide a more detailed and friendly approach to scheduling an appointment
-
Ability to have a live chat feature for patients
-
Improve website disability accessibility call-to-action buttons
.png)
Site Maps
I constructed a hierarchical and sequential site map that would allow users to easily navigate through the main vet website and the scheduling appointment user flow. These actions provided a high quality and unrecognizable change in user experience between both the multi-screen responsive adaptive website.
Hierarchical Map
Although not all the main website pages would be created, I wanted to create a complete hierarchical map to get a sense of what the user would ultimately experience when navigating through the site. I thought of important sub-menus and ways to simplify the user experience if they were visiting the site for the first time.
_edited_edited.jpg)
Sequential Map
Understanding a deeper hierarchical map allowed me to convey a user flow for both returning pet parents and first time users. Guest would be able to go through the scheduling process without being forced to create an new account. My design process would focus on existing users.
_edited.jpg)
Paper Sketches
After creating site maps, I started to paper sketch red routes with a multi-responsive website in mind. I provided some icons, information and a consistent rhythm for the user. These sketch design were consistent with the users' needs. Once complete, they were converted into digital wireframes and tested for usability.
Mobile Responsive Sketches
.png)
Desktop Responsive Sketches
.png)
Usability Low-Fi Testing (Round 1)
Once digital sketches were complete and a prototype was connected, I interviewed 5 participants to perform a series of tasks. These tasks were followed by specific questions about those tasks. Statements and quotes were documented in a note-taking excel sheet.
The following tasks were asked of each participant:
1
Show me where you would go to schedule an appointment for your pet.
2
Sign in as an existing user
3
Select the pet ‘Mila’
4
Select the veterinarian ‘Dr. Williams’
5
Select ‘Wellness check-up’ type of visit
6
Show me how you would provide a detailed description of the visit and upload some photos
7
Show me how you would schedule a date/time for ‘December 18th’ at ‘10:30 am’
8
View and explain to me what the ‘estimated cost of scheduled visit’ page represents.
9
View, explain the meaning of this page, verify and book the appointment
10
View the confirmed booking confirmation page and go back to the home page
11
Show me where you would go to chat with somebody live
12
Show me where you would go to view notifications about your pet
Participants
5 users (3 Mobile & 2 Desktop testers)
Requirements
Same requirements as interview participants
Methodology
Moderated Testing
Communication: Skype,
screen recorded
Application: Figma
Time: 1 hour
Location: Remote, U.S.
Date: Nov. 22nd-25th, 2021
KPI's
Conversion Rate
Clickable Error Rate

Affinity Mapping Diagram
After usability testing, I gathered valuable feedback about the multi-screen responsive websites and clustered those ideas into themes. Those themes were subcategorized into 'likes' or 'changes' based on the feedback. This gave me the opportunity to discover key findings about the usability testing.
_edited.jpg)
Usability Study Findings (Round 1)
After affinity mapping, I discovered 6 key findings and some key performance indicators (KPI's). There was a 100% conversion rate as well as 0% clickable error rate. Although these were encouraging findings, I was able to discover additional features that greatly enhanced the user experience. These key iterations were addressed and edited before moving on to the high fidelity versions of the product. All comparison edits were also changed in the desktop version.
1
Improved Description Visit Page
Users felt the need to have an anatomy map of the pet, so they could choose where the injury is located. This gave users more options besides inputting contextual descriptions and uploading photos.
.png)
3
Improved User flow
Users wanted a seamless user flow after the appointment has been booked and offered suggestions to schedule appointments for another dog they might own
.png)
5
Improved User Options
Users felt that before confirming the appointment, they wanted an option to ‘EDIT’ the personal information section if something was incorrect and a visual map to see where vet was located.
.png)
2
Chat Navigation
Users wanted a minimize button when opening the chat window. They were worried that if clicking the ‘X’ button, they would lose the chat information.
.png)
4
Improved Contextual Descriptions
Users were confused about certain tasks and what would happen including the chat description, options for reminders of appointments, providing options to upload photos, multiple selections for type of visit, and more.
.png)
6
Accessibility
Users felt frustrated after scrolling down the page, and wanted a ‘Scroll to Top’ button to get back to the top and request an appointment
.png)
Prototypes (Low-Fidelity)
Below are low-fidelity prototypes screenshots and the connections for the multi-responsive websites. These connections allowed the user to make multiple clickable decisions during the task process. Each connection between pages were thoughtfully constructed.
Mobile Responsive Website

Desktop Responsive Website

Design System
Before transitioning into the high-fidelity prototype, I focused my attention to the design system. This crucial component allowed me to create consistency and cohesiveness between various screen sizes. I focused my attention on a logo, typography, colorography, layouts & grids, components, iconography, input fields, corner radius, and tables.
Logos

Colorography

Iconography

Components

Default Tables (Confirmation Pages)

Typography

Grids & Layouts

Input fields

Corner Radius

Usability Hi-Fi Testing (Round 2)
Once edits and design systems were implemented, I took my designs to the next level by creating a hi-fi prototype version. Testing was performed with the same tasks, methodologies, participant requirements, and KPI's.
What was discovered:
After creating another affinity diagram map and compiling user themes, it became apparent that there were minor edits that needed to be done. All changes made fell under Prioritization 'Level 2.' This means there were only additional features that were nice to have, but not essential. All KPI's when comparing round one to round two testing remained the same. Minor edits that were suggested across the board were the following:
1
Improved Colorography
Share Features
2
All users felt that there were missing color components with the progress indicators as well as the chat bubbles on both desktop and mobile devices.
Users felt that after confirming an appointment, they should be able to share appointment details via text on the mobile platform

3
Location Link
Users were frustrated that only a screenshot of the map was displayed and not the ability to have a clickable link to take them to a usable map
Usability Iterations (Round 2)
Below are visual side by side changes that the majority of users felt could enhance their user experience for both multi-responsive website versions. These are changes that were performed after the first round of testing. I wanted to continue to keep in mind the continued users' wants and needs, even if they were minor changes.
.png)
1
Changed location of important emergency info box to the top of the page to emphasis importance before continuing the online appointment scheduling.
.png)
3
Added a share button to allow users to send important details about the scheduled appointment with family and friends.
2
Enhanced color of important info icon to create attention to the information before selecting the type of visit.
.png)
4
Added map and link to mobile version to get a birds eye view of the vet location
.png)
5
Added a direct link to Google maps for users to get a precise location of the vet office
6
Enhanced chat bubble colors to help differentiate between users
Accessibility Considerations
1
Chat accessibility
Many users wanted the ability to speak with somebody anywhere within the appointment process. This gave them the option to communicate in a different way and get the help they needed.


3
Scroll Buttons
This button option gave the users the ability to navigate back to the top of the main vet page without scrolling.
.png)
5
Color Accessibility Standards
2
Progress Indicators
Indicator bars, both mobile and desktop, gave the user a starting and ending reference point in where they were in scheduling process


4
Enhanced User Feedback
Improved color changes when users click buttons to navigate through each of the pages.
Ready to Click

Clicked


Disabled

When designing, I knew my color palates had to pass WCAG 2 Color and Contrast Requirements. This insured full and clear visibity for all users
Mobile High Fidelity Prototypes












Responsive Website
High Fidelity Prototypes








.png)
Final Prototype (High Fidelity)
Below are the final high-fidelity prototype screenshots and links for the mobile and responsive website.
Mobile Responsive Website

Desktop Responsive Website

Link to Final Prototype
Final Takeaways
Impact:
Furry Paws Clinic emphasizes the importance of creating a simplistic and streamlined approach to scheduling an appointment for your pet. The clinics impact is to connect locally with the pet parents, by giving them the tools to communicate and have access to their pet profile at the click of one button. Furry Paws is here to change the way we think about scheduling appointments online.
