Designing a good event booking experience

On an event booking website, the most important page is that which provides all the details about an event. This page has all the necessary information that customers need to know before booking their tickets. The trickiest part about designing this page is deciding what details to emphasize and how much of them to emphasize. Should the price of the tickets be shown first? Should the time and venue be shown first? Should there be pictures of the event? The list goes on.

Most often, all the information on the page about an event is supplied by the event organizers rather than the website administrators. This leaves the designer an added task of dealing with misplaced, repetitive or missing information.

Consider the following details page of a popular event booking website. (Pictures ordered as seen while scrolling from top to bottom)

screen 1
screen 2
screen 3
screen 4

I recently worked on redesigning the event details page for this website. I started my design process by conducting a set of user tests to understand the pros and cons of the design and areas where users were getting stuck.

I explored the website by myself first to list out the different functions I wanted to test with the users and created a test plan.

The testing process

I conducted 5 user tests and set up the following 5 tasks for each participant:

a. Book Tickets

b. Search for a particular tag

c. Invite friends

d. Follow the organizer

e. Subscribe to the newsletter

During the test, the users were asked to think out loud while exploring the website. After the test, I interviewed each of the participants about the usability and their general impression of the website.

Usability issues

The most common issues raised were:

a. Participants didn’t know what the event was until they scrolled down past the image carousel shown in screen 1.

b. They also had issues with the ‘Details’ tab.

“This doesn’t tell me anything about the event.”

c. The details about the organizer were unclear and many participants spent time looking for the organizer’s name.

d. Participants noticed too many repetitive calls to action for the same function like Invite friends, subscribe to news letter, etc.

“Why are there so many sharing options? They’re all over the place.”

e. The “I am interested” floating view at the bottom blocked their view while scrolling(screen 2–4)

“ This is distracting. I feel like it’s blocking stuff at the bottom of the screen”

The Analysis and Redesign

Taking into account the concerns raised by the test participants, I made the following changes to the design

screen 5

a. The image carousel took up 90% of the page of which the image itself took up 60%. Reducing the space allocated for the image carousel as shown in screen 5 would accommodate the Event information at the top of the page.This would give customers information about the event as soon as the page loads.

b. I assumed that the ‘Details’ tab was a description provided by the organizer and not the administrators of Events High. So, the amount of information provided and its relevance depends on the organizer. To ensure relevant entries, the form fields to be filled in must hence be designed with a clear structure and descriptive fields.

screen 6

c. The organizer information can be presented more noticeably as a part of the information categories so that following the organizer is easy for the customer. In screen 6 it can be seen that ‘Organized by Triyana’ and a follow button next to it is clearly specified.

screen 7

d. The ‘book ticket’ floating view can be placed with the main toolbar having menu options, at the top of the screen to avoid obstruction while scrolling. This can be seen on the top of the screen in screens 6–7.

e. Repetitive calls to action like the “invite friends” button was a decision made by the designer possibly to stress the importance of the function to the website owners. However, multiple instances of this clutters the screen and distracts the customers. Repetition can be avoided by making the button prominent with a contrasting size or color to stress its importance. It can also be placed on a floating toolbar which appears throughout the page scroll. As seen in screens 6-7 where the floating view consists of a share icon to invite friends, a heart icon to favourite the event and the book tickets button along with the name of the event.

In short, the key information to highlight on an event details page includes event name, date and time, location, organizer and of course, a ‘book tickets’ option. Displaying the book tickets option even while scrolling through different sections of the website, through a non-obstructive floating view adds to the usability of the website.

Check out more of my work on behance.net/anupamadhareshwar and let me know what you think!