top of page
Logo_White (Port).png

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

fill2.png
14-16in M1 Pro.png

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.

hudson-hintze-CXQgs12wFHc-unsplash 1.png

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

nathan-hanna-7hxC83Qcuwo-unsplash.png

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

Logo_White (Port).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.

Empathy Map 2 (Pet Project)_edited.jpg
Empathy Maps 1 (Pet Project)_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.

Persona (Chad)(Fuzzy Paws).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

"

Persona (Jessie)(Fuzzy Paws).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.

User Journey Map (Chad).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

User Journey Map (Jessica).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.

Crazy 8s (Fuzzy Paws).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.

14-16in M1 Pro (Excel).png
Screen Shot 2022-01-24 at 5_edited.jpg

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

Screen Shot 2022-01-24 at 5.30.59 PM.png

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

Screen Shot 2022-01-24 at 5.31.30 PM.png

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

charleston-sc_sc_veterinarians_34.png

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

Logo_White (Port).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.

Site Map (Fuzzy Paws)_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.

User Flow (Fuzzy Paws)_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

Mobile Sketches (Fuzzy Paws).png

Desktop Responsive Sketches

Desktop Sketches (Fuzzy Paws).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

jon-grogan-yfTFo4iaADI-unsplash.png

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.

Affinity Diagram Map (Fuzzy Paws)_edited

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.

C1 (Low-Fi Pet).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

C3 (R1 Pets).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.

C5 (R1 pets).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. 

C2 (R1 Pets).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.

C4 (R1 Pets).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

C6 (R1 Pets).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

Screen Shot 2022-01-24 at 5.19.11 PM.png

Desktop Responsive Website

Screen Shot 2022-01-24 at 5.21.06 PM.png

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

Screen Shot 2022-01-24 at 4.33.50 PM.png

Colorography

Screen Shot 2022-01-24 at 4.34.37 PM.png

Iconography

Screen Shot 2022-01-24 at 4.37.28 PM.png

Components

Screen Shot 2022-01-24 at 4.35.52 PM.png

Default Tables (Confirmation Pages)

Screen Shot 2022-01-24 at 4.38.14 PM.png

Typography

Screen Shot 2022-01-24 at 4.34.14 PM.png

Grids & Layouts

Screen Shot 2022-01-24 at 4.35.02 PM.png

Input fields

Screen Shot 2022-01-24 at 4.37.57 PM.png

Corner Radius

Screen Shot 2022-01-24 at 4.38.35 PM.png

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

jonas-vincent-xulIYVIbYIc-unsplash 1.png

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.

C1 (R2 Pets).png

1

Changed location of important emergency info box to the top of the page to emphasis importance before continuing the online appointment scheduling.

C2 (R2 Pets).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.

C4 (R2 Pets).png

4

Added map and link to mobile version to get a birds eye view of the vet location

C3 (R2 Pets).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.

fillpet5.png
Pointer 👆.png

3

Scroll Buttons

This button option gave the users the ability to navigate back to the top of the main vet page without scrolling.

Main Page (Desktop).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

fillpet6.png
Desktop - 32.png

4

Enhanced User Feedback

Improved color changes when users click buttons to navigate through each of the pages.

Ready to Click

Screen Shot 2022-01-25 at 11.46.18 AM.png

Clicked

Screen Shot 2022-01-25 at 11.45.12 AM.png
Pointer 👆.png

Disabled

Screen Shot 2022-01-25 at 11.43.41 AM.png

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

pet1.png
fillpet5.png
fillpet9.png
fillpet2.png
fillpet6.png
fillpet10.png
fillpet3.png
fillpet7.png
fillpet11.png
fillpet4.png
fillpet8.png
fillpet12.png

Responsive Website
High Fidelity Prototypes

Desktop - 28.png
Desktop - 4.png
Desktop - 29.png
Desktop - 30.png
Desktop - 38.png
Desktop - 34.png
Desktop - 32.png
Desktop - 40.png
Main Page (Desktop).png

Final Prototype (High Fidelity)

Below are the final high-fidelity prototype screenshots and links for the mobile and responsive website.

Mobile Responsive Website

Screen Shot 2022-01-25 at 8.49.42 AM.png

Desktop Responsive Website

Screen Shot 2022-01-25 at 8.50.12 AM.png

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.

joe-caione-qO-PIF84Vxg-unsplash 1.png

What I learned:

What I’ve learned from this experience is that users mostly decide to call the clinic, instead of an online method because it’s “easier”. What I found out is that “easier” means, it’s just what they were used to doing and not necessarily a better method. Many local vet clinics lack the quality user experience and design of scheduling an appointment online. Users want a simplistic and easy approach with a feeling of control in their hands. Furry Paws Clinic has attempted to bridge that gap by finding solutions for all users, by creating confidence and trust from an online presence.

What I plan on doing next:

1

Continued Iterations

I would look to improve and continue to reiterate on the mobile and desktop websites by doing usability and interface testing.

2

Research

I would continued to do competitive research analysis on vet clinics that are at the forefront of making improvements to their user online experience. I would also look into diving deep into secondary research as well.

3

Analytical Data

I would look to compile quantitative data and determine which participants continue to schedule appointments online and how often that happens over a period of time.

Check out my other projects

master.png
Group 1209.png
Group 17.png
food5.png
bottom of page