Matthew's logo

Matthew Talebi

My portfolio and research about accessibility, design culture and sustainability to make life a tiny bit easier.

Building a frictionless appointment booking form for small businesses

Before we begin, as a side note - some of you that followed me on medium previously may remember my article about appointment calendars. This is a case study I did a few years ago, however I have refreshed and updated the content in hopes that it caters to an experience for today.

The use cases discussed in this article are specifically for timeboxed appointments. Requiring an appointment spanning across multiple days is not covered in this article.

Calendars today

Booking appointments online have remained the same for as long as I can remember. A few tweaks here and there, but overall the same experience that doesn't help the user select a time quickly and efficiently. With the following discussion I will quickly review the shortcomings today before moving into the next iteration.

There are generally two types of calendars we see on the internet, the monthly calendar view and the weekly calendar, each with their own merits and drawbacks.

Monthly view

To put it bluntly, the monthly view has very few advantages for appointment booking. The only real advantage is the visible overview of what days are unavailable for booking. If there are holidays or specific days unavailable the user may understand this point immediately. When it comes to timeslots its tedious, especially for popular venues. The day you select is a gamble on whether the times available will fit your schedule.

A month view calendar with time selection

Weekly view

When working with weekly calendars, they user loses the advantage of being able to immediately see which days of the month are available. There is the advantage of removing days of the week that the business is never open. In the case shown below the business doesn't open on Sundays.

A week view calendar with time selection

Conversation on appointments

Before we get to the final pattern, let's have a conversation and roleplay. You are looking to book an appointment with your dentist, you call them up and let them know you want to make an appointment for your regular cleaning.

The dentist then responds they have the next available appointment at around 3PM next Tuesday, unfortunately you need to pick up your child from daycare. You ask them if they have any availability after lunch - and they let you know the next appointment is two weeks from now. You go ahead and book that appointment.

What happened in this conversation? With most people, whether they are a student or working professional know the general times they are available. People also do not care which days the business is unavailable, it's information that doesn't add any value to the conversation.

The perfect calendar

No, the perfect universal pattern doesn't exist, since each business has their specific customer base and expectations. With the conversation and details given, we can make an adaptable design that may cover most scenarios for our appointment based businesses.

Below is an example calendar, that solves many of the issues of the traditional calendars shown above. We only show days that are available and take into consideration different time frames.

Calendar view with timeframe option and skipped days of unavailability

With the given pattern, if the user selects a popular timeframe, the calendar may display the first date four weeks in advance. The view also removes days in between that don't have availability for the timeframe selected - in this case Friday March 12 and most of the following week are already booked in the evenings.

This allows users to quickly find the earliest time available without having to skip weeks or click on days mysteriously through the monthly calendar view.

User testing results

The time frames given in this calendar are set and give three partitions to select from, the user may select one or all. During our user testing, we found that three timeframes gave best results without overwhelming the users.

We also tried various patterns to give the user more control, such as a double slider, or two dropdowns to select custom timeframes; however the users were confused in each of these tests.

At the end of the day, I hope this calendar serves as a baseline, and with a few tweaks and some user testing you may find it works for you. If this pattern does appease your audience, do share your findings with me as I'm always intrigued to know how different audiences respond.

Next up...