UX Exercise #01: Booking A BBQ Pit

A quick UX design exercise

This series is about various user experiences of digital or physical products and services that I encounter in the wild and my suggestions on improving them.

Introduction:

I live in a residential complex that has facilities like BBQ pits and function rooms for residents to organise gatherings or other social events. To use a facility, you first have to book it through an app. When I tried the booking app, I found my first opportunity for a quick UX exercise.

The User Journey

The app is functional, but the breaks down occurs when a facility is not available at the desired date. In this UX case study we will focus on this issue.

First, let’s walk through a successful scenario:

Successful Scenario

  • Successful booking : Let’s say I want to book a BBQ pit for Oct. 25, 2018 in the evening. I open the app on my mobile phone and the main screen shows the different sections of the app. I click on “Facilities Booking” and it takes me to the facilities screen. This screen has a similar layout to the previous one, but it lists the names of all the facilities. After selecting “BBQ Alcove 2”, I am taken to a screen displaying a calendar of the current month and a header with the name of the facility. From there, I tap on the 25th of October. After tapping on the date, the time slots appear beneath the calendar: Morning (10:00AM-3:00PM) and Evening (5:00PM-10:00PM). Beside the time slots, the word ‘BOOK’ appears in green, implying that both schedules are available. I click on BOOK for the evening schedule. This takes me to another screen that shows the details of my booking, such as date, time slot, and my name and contact number. There is a “Confirm Booking” button at at the bottom of the screen, which I click. A warning modal box appears and tells me that I have to read and agree to the terms and conditions first before I can proceed. I click ok to exit the modal box and I am taken back to the confirm booking screen. I tick the checkbox beside the terms and conditions and click on “Confirm Booking” again. This time, I land on the final screen displaying the message “Your booking has been submitted for approval”. From there, the only remaining action available is to go back to the home screen. So, I assume that I’ve made a successful booking.

If you want a particular facility at a particular time and it is available, the experience is quite good. In practice, however, I am usually interested in booking a particular time on the coveted weekends/evening slots and do not care too much about which particular BBQ pit is booked. In this case, the user flow of the app can get frustrating.

I decided to investigate if my neighbours have the same issues as I did with the app. After interviewing two other residents, I found two recurring frustrating scenarios:

  • When a user wants to book at a specific date but the selected facility is not available : When a selected facility is fully booked at the specified date, the user would have to go back to the Facilities screen to see if the other facilities are available on that specified date. The user would have to go through all of the facilities, one by one, to see if the date and time slot are available on other facilities. There are more than 10 facilities, so it could get confusing. A user would have to remember whether they already clicked on a facility or not. The calendar screen also doesn’t give any indication if there are still a schedule available on the desired day so, each time, a user has to click on the same date in order to see the available schedule.

Unsuccessful Scenario #1: When a user wants to book a facility at a specific date

  • When a user wants to book a specific facility and they need to find out when it’s available : For this scenario, a user would need to tap on each of the dates from the calendar screen to find out when it would be available.

Unsuccessful Scenario #2: When a user wants to book a specific facility

Heuristic Violation: Recognition rather than recall

The two scenarios I mentioned are good examples of what Nielsen’s 10 Usability Heuristics for User Interface Design calls a Recognition rather than recall violation. The users need to remember all of the failed selections they’ve made before in order to make a successful booking. It’s not a big obstacle for the user in achieving their goal, but it’s frustrating that there’s no indication of whether a date or a facility is available on neither the calendar or facilities screens. I gave it a severity rating of 2.

Solutions

I sketched a few possible solutions to improve the user flow then I did a quick user test with my husband and my neighbour who also use the app. I found two key changes that helped improve usability:

  1. Filter the results : By including the option of filtering the list of facilities to only show those available at a particular time slot. This filter eliminates the need to loop through facilities (having to go through 5 screens and 7 actions for each) to check their availability.
  2. Give visual cues which dates are available : A calendar screen is simple enough that is it okay to increase its visual complexity to increase information density. The days in the calendar can contain a visual clue on the availability. For example, if a date is fully booked, the day can be crossed out or in a different colour to imply its unavailability.

Revised user flow

Facilities Booking Screen

In the current design of the facilities booking screen, you have to first select the facility and then select date (in two separate screens) to make a booking. Because of this flow, users who clicked on facilities that are not available during the desired dates had to repeat the process over and over again until they find a facility that is available.

To avoid this frustrating scenario, I added a filter that will allow users to key in the date so they only see facilities that are available. This way, users don’t waste time looking through facilities they can’t book. The terms and conditions agreement is also moved to the first part of the process so users have the information they need from the beginning.

Design changes for Facilities Booking Screen (Right screen)

Calendar Screen

Colour-coding the calendar screen eliminates the process of checking each day, one by one, to see which dates still have available slots. I used yellow to indicate that the morning slot is available and blue to indicate that the evening slot is available. Dates in black indicates that both slots are still available. User will not be able to click on dates that are fully-booked.

Design changes for Calendar Screen (Right screen)

Confirmation Screen

In the current design, the confirmation screen is pretty bare. Until you check your email, the app never really gives you a direct answer whether you are successful at booking a facility or not.

I placed all of the booking details in this screen and an option to cancel or edit the booking just in case users made a mistake.

Design changes for Confirmation Screen (Right screen)

Search Filter

The current app doesn’t include a search filter function. By adding this, users can easily input their preferred date and time slots, and they can see in an instant, which facilities are available at the specified time.

Search filter

User flow mock-up

The following gifs are a quick demonstration of the booking process through the app, with the design suggestions applied:

Booking without using the search filter
Booking with the search filter

Conclusion

This is just a short and quick UX exercise so I didn’t do any user testing for my proposed design changes. I did ask my husband, who also uses the app, to see if the proposed changes improved the usability of the app. He reported that the filter is a useful addition. Of course, being my husband, his opinion might be biased. More testing is required.