Creating a great online booking site is a challenge. Selling tickets, booking accommodation or getting spa reservations it's all the same. You have a complex interface, lots of options for the user but at the same time, the page has to be easy-to-use. It must also look simple, but visually attractive. A lot of ticketing and booking sites are disasters. Seems like Mission Impossible? Don’t worry, it's not!



In this article, we are going to cover the following:

what are the dangerous pitfalls for any booking website

should I throw away the existing site or try to improve it?

5 tools for designing an awesome website

What are the common pitfalls for booking websites?

There are reasons why booking sites fail, but here are my favorite and they’re also the most dangerous pitfalls for any website:

It's all far too complex and the user gets lost somewhere in the process

Annoying issues: timeout, account or sign-up required, no option to buy as a guest shopper

No mobile optimized interface. It’s 2017, we use mobiles in an entirely different way!

Forcing the user to enter in too much information early on in the process

Not guiding the user step-by-step, so they feel lost and uncertain about how to proceed

Poor communication when the user makes a mistake. For example, not telling the user how to fill in an input. Simply saying that something is wrong isn’t enough!

Offering multiple options and forcing the user to enter in too much data. 15 inputs for one screen? Sure thing.

Hiding the cart somewhere in Narnia or Timbuktu, just so the user can't find it

These are just a few burning issues. The real problem is that you have to see the whole process through your customers’ eyes, instead of building a booking website as if it were a building.

Let's look at how to overcome this issue. Below, we’ve prepared an essential toolkit for creating a better booking platform. Trust us, you’re in safe hands!



But first, it’s time to ask yourself an important question:

Should I try to improve my site or just throw it away and start over again?

Since we’re talk about a complex website with lots of hours of development behind the whole structure, this is a serious dilemma for some people. When a client asks me this question, I usually reply with: "Let's see how it performs!"



To decide if a booking site works well or to check if it’s just a pile of trash, we have to define ‘success’ first. I like to use Google's HEART framework, which helps you to set your product goals and metrics and that will then tell you how well the site performs. I can't go into much detail about it in this article, but you can read more about it here:



It's an excellent presentation on the HEART framework



Based on the HEART framework, when looking at a booking site, there are four key elements for success: Happiness, Adoption, Retention, and Task success.

This table shows how to interpret the HEART categories

So to get started, I advise that you do two things:



A) Look at the analytics if you haven't done so already

B) Conduct a usability test with 5 participants on the existing site to see how users are interacting with it

What to look for in a usability test

how quickly people can make purchases, book stuff on the site .etc.

how do they find your site, what they think about the site

where exactly do they feel uncertain or lost in the process

Measure the time taken! Most users will complete the tasks, but locating the "buy now" button after 60 seconds is clearly not good enough!

So, when should you consider a complete re-design?

My main advice is to start improving the existing site, based on the usability tests and the analytics that you’ve gathered together. You can focus on just one thing at a time: improving the navigation, creating a better mobile experience, designing a better cart or just improving the way users add in their data to input areas.



However, there are cases, when the existing website is simply too old and so, making new changes is difficult. You know this is the case when your developer tells you that any change in the system would require 2-3 times as much work as building a new one. This is a sign you might need a new engine.



5 tools for designing a better booking website

Think of stories, not features and screens

When you purchase something online or use a product, there’s always a story behind it. When you are designing a process - like the way in which users will sign up -, you have to imagine it all from the customers’ viewpoint and then map out a specific story for every use.



Let's take a real-life example. We had a project where we had to re-design a transfer booking website. It was certainly a challenge. Lots of features, lots of data to enter - it was very easy to get lost in heaps of data or to slip up when sifting through it all.



That's why we made stories for all the processes. In this illustration below, you will find a use case, when a user starts the booking process but enters the wrong dates:

We created stories like this for all the processes. This helped us to better understand how users were interacting with the system.

Sounds familiar, right? In fact, this happens a lot. We just start the booking and usually do not pay all of our attention to what we’re typing in. It's OK. But in this case, you have to be prepared! If your system just says "Oops, you messed up!" then the user has got to start over or is lost wondering how to correct the mistake. This is major no-no when it comes to engagement and, to make matter worse, you risk losing a customer.



Why are stories ideal for UX?

Stories help you to understand user behavior and the real context

You can prioritize features and elements based on what's important at a certain part of the story

It will draw your attention to finer details that you might have overlooked before (what happens if a user makes a mistake here or here)

Only ask for the necessary information

This is a classy one. It's very common to ask for a lot of information (Who are you? The CIA? My mother?) or, in some cases, users have to go through a lot of steps to complete a particular task.



Do we really need all this information?

The less action you ask a user to take, the more likely they will complete a task. Therefore, you always have to ask yourself: Do we need to ask for this information at this point? If it's impossible to live without it, can we ask for it at a later point in time?



Don't ask for too much information upfront

"Great! I love this product; I want to buy it!" *Clicks Buy Now* "You have to sign up and fill in these 1000 boxes first". This will, undoubtedly, upset your users. Instead, let the user do what they want to do. Let them proceed with the booking and only ask for information when it’s necessary.



Too much input? Break it down into chunks

There are cases when you have to do the hard work and fill in lots of input boxes. BUT we aim to please and to keep it simple, remember? The users have to perceive the tasks as easy. If you have a long form, you can break it down into multiple steps, so that it LOOKS and FEELS easier for users to work with and fill in.



Airbnb has a great search form. It shows you exactly how to fill it and what type of information you have to enter

Supercharge forms

Forms can go a long way. Bad forms can frustrate your customers or even make them take their custom elsewhere. In my experience, improving forms could have a huge impact on the overall experience. Focusing on improving forms can lead to better conversions and an improved overall satisfaction for users.

What makes a form perfect?

Give hints to the user! How to fill a form? Use the placeholders to show samples and the format of the data

It tells you exactly how to fill it. No confused moments, no wrong attempts. Always make sure you use labels and placeholders, and ensure that the microcopy is well written. Don't just say "enter your phone number", instead give an example and the show the formula like in the image above.



Code your forms to make them smart. This isn't a design issue; it's a development issue. Don't make users rhyme off specific formulas to enter their information. For example, "No non-English characters allowed," "not an appropriate phone number." Just let the user enter the data and code the form to be smart so that it can handle these "imperfections."



The worst case is when the system freaks out because there’s an extra space and nobody can then understand what is wrong with the data.

This is way more helpful than just saying "You've sucked!".

It helps you when you make a mistake. If you fill out an box incorrectly or if you miss out one, a good form will inform you of this and then help you correct it. Don't use pop-ups and bars at the top of the page to give a hint to the users. Use inline messages. Remember, you are focusing on the input, so isn't it logical to put the error message right there?

It creates visual groups, so it's easy to follow. Great forms have a simple, clean and appealing design - after all if you ask a user to use the forms, make sure they will love it. Great design does not mean amazing and nifty layout or look.



Here, great design means that the form helps the user understand how to fill it all in. Good visual grouping will make you think, "Oh, this looks easy. It's not that bad." This is key, especially when a user does have to enter a copious amount of information.

Pay attention to microcopy - it can save your life

Microcopy is also a secret weapon. Why? Because it's very important to the users and everybody in your product team. What are microcopies?

Texts that appear as a hint for input, and placeholders

Error and success messages

Bits of information that guide through a process (like a progress bar)

Instructions on a checkout page

Button text

Navigational text and links

Most designers don't care about these finer details. They will either write some bullshit or leave in those lorem ipsums. Marketers and copywriters tend to ignore these items as well (“these are too small, nobody will care about them”). So in the end, developers will take care of them. Obviously, developers are not the most able when it comes to this particular job, and it's a pain in the ass for them, too.



But why is microcopy so important?

It helps your users when they need extra information (how to fill in a form, how to choose a payment method, what did they do wrong, etc.)

Misplaced or poor microcopy will lead to confusion and frustration and eventually force the customer to go elsewhere

It can make a huge impact on the overall experience. Improving the microcopy can result in a direct increase in conversions

It helps to build trust between you and your customer

So, to get the microcopy right, follow this checklist:

Always dedicate time to writing the microcopy (preferably with a UX Designer or Content Strategist)

Double check that the microcopy is well placed and well worded - even after the development stage! These bits of information can get lost easily during the production process.

Always test the microcopy with real people. Do a usability test, do A/B tests where you only change the microcopy and see what happens.

Be clear and friendly. You are helping humans, so address your customers in the right way! They aren’t mindless droids!

Pay extra attention to error and success messages! If you get an error message right, you can put a customer back on track. Great success messages will gain engagement and boost your customers’ happiness.

Usability test everything

Finally, this is the single most important tool. Usability tests will evaluate the designs that you have created. These tests will tell you, how easy it is to use your site and does it leave your users happy and satisfied. If you are brand new to usability testing, I recommend you read this article first:



Usability tests



When should I run a usability test when I’m building a booking system?

Since we have many risky assumptions and screens in a booking system, the goal is to start testing very early on and to continue designing the set-up step-by-step.



Here at Webabstract, we do the first usability tests once the wireframes are ready. And we even go further by breaking the system up into parts (sign-up, selecting products and using the cart, checkout, etc.) so we can test earlier on and find new, innovative solutions for our customers.



Most of the heavy work is carried out during the wireframing stage. Wireframes have enough information as:



they show the layout

they feature all the elements and interaction points

they have the copy AND THE MICROCOPY

Create prototypes in InVision. This software allows you to create clickable prototypes that you can show to your users. They can go through all your processes and give you helpful feedback on how to improve your website

Do a prototype now and save hours yourself a lot of time later on!

You have to make the wireframes clickable to do a usability test with them. There are plenty of great tools at your disposal for this purpose, but I recommend trying out InVision. It’s simple, quick and it has everything you need to create a wireframe prototype.

Running usability tests with wireframe prototypes will cut down most of the usability issues:

navigation problems

poor copy, or misleading microcopy

flaws in the process

missing links and use cases you haven't thought of etc.

It's also important to usability test the final, UI designs as well. User Interface Design features colors, refined typography, images and creates strong feelings and emotions for the user. Usability testing the wireframes can tell you whether the booking system is usable or not, but usability testing the UI designs can also tell you whether the design is appealing and pleasant or not.

UI adds new things to test:

Is the design appealing to users?

Does the addition of colors help the user or is it just confusing? (Like using red for a success message, Duh!)

Does the layout and style help the user to group the information? Does it help them navigate the form?

All in all, every hour spent on usability tests will result in 10 hours saved in the development stage

Key takeaways

So that’s that! I hope you now have a better sense of how to design a better booking experience. Here are the most important points:

Know why and when your visitors can be frustrated by the site.

If you have an existing site, consider improving it first! Only throw it away if it means serious limitations.

Conduct a usability test on your existing site before diving into the re-design. Prioritize the most serious issues and take care of them at first.

Set clear goals for the improvement or re-design job. Remember to not only focus on conversion rates but also other factors such as engagement, satisfaction, retention and task success!

Draw stories instead of designing screens. Stories will help you understand how users feel and how they will use the product. This will uncover many opportunities and avoid dead-ends along the user journey.

Only ask for the necessary information. Limit yourself and let your user use the product before asking for too much up front.

Supercharging fonts alone can cause a serious increase in online sales. Code them to be smart, help the user to fill them in.

Pay extra attention to microcopy since it can make or break the user and their online experience. Do an A/B test on microcopy before you do anything else.



Usability test everything. Test out every design until all the processes run smoothly and then check that your users are fully satisfied with the design.

Thanks for reading this article! Do you have any tips or tricks that you’d like to share? Let me know what you think!



I have several great stories and case studies on how we helped improved booking sites, that way you can see how a project like this works. If you are interested, book yourself in for a chat with me by using the link below: