Appointment Web Forms

Many challenges I deal with in the work place revolve around bringing users to register, purchase items, sign up, or some other web form that the client wants to improve. There is one particular web form that hasn’t been touched since its creation — every website does it the same (with some variation) without any evolution in the user experience, booking appointments.

Disclaimer: This concept I’m about to present only works well and has been researched with offices, such as dentists, doctors, car maintenance, etc.

What we have today.

There are two ways a booking form works today. Find a date on the calendar, view available times, and if none of those work for you, keep clicking through the each date that is available until you find a time that works for you.

Credit to Elikan

The second most common calendar format gives a weekly view.

Credit to Patrick Monkel

Obviously these paradigms works great since they are still with us today — however what if we take a look at it from the upside down?

Doing some research.

After booking appointments for myself over the phone, I came to a realization and decided to ask to listening to coworkers and friends booking appointments when they actually needed them so it was more natural —there was one commonality amongst all of them, the majority of conversations followed the pattern below:

Business: When would you like to make your appointment?Customer: As soon as possibleBusiness: How about Tuesday at 2PM?Customer: Do you have anything in the morning?Business: I have a morning 8AM in two weeks.Customer: Let’s do that.

What happened here? we can break it down into three points:Business offers a time → customer states timeframe → business gives future date.

People have a general idea of what their schedule will be, even when it is in the future, they know they are available during lunch time, or only after hours, so why do we have to scroll through days or weeks finding a time that works for us?

The solution.

Reverse the way people work in appointment forms by having users select their time frame first, then selecting a date and exact time. I tested two different ways of selecting a window of time. Want to make a guess at which performed better?

Variation A & B

Variation A performed better naturally, it’s much easier for all age groups to understand, plus you can select two different time frames for example morning and night. The final result?

With this design, you can see it is a hybrid of our new design and the week view that already exists today — however the week view presented here removes days that do not have times as you can guess by the dates across the top.

With this design we solved the issue of finding dates far in the future that fit our schedule, and easily finding days that the time frame we would like. Even if the next appointment in the Morning is six months down the road, that will be the first date to show up, saving us from scrolling for weeks and months on end.

I encourage other designers to test this format and improve upon it, show me what you come up with and results on how it pans out with your user base! Thanks for reading ✌🏻

Find me elsewhere,

Find me on Twitter, Facebook, instagram, or check out my website at mattscorner.io