Booking page

a figma prototype of a booking page

Project overview

  • Team size: 1

  • Software: Figma

  • Setting: project in Graphical interfaces course

This booking page was created as part of a home exam in the course Graphical interfaces that was a part of my masters.

Features and requirements

These where the requirements for the assignment

Items (rooms and equipment) should be defined in the system. An item should hold data on:

  • Name

  • Location (floor, building, campus)

  • Size (number of seats or similar)

  • Equipment (projectors, whiteboards and such)

A booking should hold data on:

  • Who made the booking

  • Start and end (date and time)

  • Status: preliminary, final

One important – and challenging – aspect of the booking is that it should manage the balance between automatic booking and manual control. The system needs to help the user to find available rooms, and make the booking as quick as possible, but, at the same time the interface must allow for the user to manually adjust the selection of rooms. The interaction between automatic algorithms that help the user find rooms and the users control of selection of rooms is important and requires proper controls and proper feedback from the system.

The Result

The resulting projcet is a Figma prototype which can be seen here:

The starting page where you can see a schedule for all rooms that fits the current search and filtering. In the headbar you can see a searchbar that is always visible from all pages so that it’s easy to access.

If you press on the search bar you can set a few different options First the type of rooms/equipment you want and the number of each.

Second when you want your booking to be made, here you can choose between having a single booking or one that repeats over a a secifiedd number of weeks. You can choose to leave the time blank if you want to find one on your own in the schedule view or get recommendations of times in the recommended list view.

Then you can choose either which campus the rooms should be on or search for specific building or find them in a dropdown menu.

After you’ve specified your search you can filter it further by clicking the filter button. Then, a separate popup with additional filters comes up.

After you’ve specified all the options and filters you want you can then see the results of your search. To find additional info you can click on any room/equipment name to bring up a detail-view with all the specifics as well as a map to where the room is located.

A lot of this information is visible in the schedule as well as the list view but in the form of icons. To create a booking you simply have to click somewhere on the schedule to book that time slot. Then a popup appears where you can further specify the time as well as what rooms to book and add additional ones if desired, and add any comments that you want. If you’ve already specified that you want several rooms you first have to choose all the rooms you want before the booking confirmation pops up.

If you don’t want to book via the schedule view but instead want to get recommendations of rooms to book you can get this via the recommended list view. Here is what it looks like when you only want to book one room versus when booking several.

Lastly there is the my bookings page. Here you can see all of your current bookings as well as edit or delete them.

Learnings

One of the biggest challenges with this project was to make the booking system as user friendly as possible. The system needed to help the user to find available rooms, and make the booking as quick as possible, but, at the same time the interface must allow for the user to manually adjust the selection of rooms. The interaction between automatic algorithms that help the user find rooms and the users control of selection of rooms is important and requires proper controls and proper feedback from the system.

I did a lot of mistakes when creating this prototype but from the I learned valuable lessons suc as not having too small icons or text and the value of having bigger contrast when it comes to text to accomodate for users with visibility issues.