Desktop Interface for Resource Booking

Design of a graphical user interface for a resource booking application, making it easy for students and teachers to book rooms and equipment at chalmers. This was an individual project that was part of the course Graphical interfaces. The initial instructions said that students and teachers should be able to book rooms (such as lecture halls, study rooms and computer rooms, etc.) as well as equipment (such as 3D-printers, tools, video gear, etc.). An item should hold data on for example number of seats, room type and where it is located. This was a rather small project, focusing on the interface only.

Type of project
Course project

When

Dec 2021 – Jan 2022

Tool

Figma

Inspiration and Benchmarking

I began with seeing how other websites solved similar problems. The system used for booking rooms at Chalmers today is called TimeEdit. I started exploring TimeEdit to see what to include and exclude in my own interface. The first two times I used TimeEdit i failed to book a study room because I did not understand how to select a time slot. I did not think it was not clear enough if the time slot was available or occupied.

I also did not like the weekly overview of rooms being extremely cluttered and overwhelming. I could not read at what time a room was available because the numbers were placed all over each other. However, I liked the idea of having multiple rooms displayed at the same time to show their availability over a longer period of time. Another weird thing was that even if I chose to have the website in english, some parts were still in swedish.

I also looked into Chalmers Maps. I have used the app version (Campus Maps) many times to find where rooms are located. The map is interactive where you can search and explore what rooms are nearby or what rooms a certain building holds. I thought this could be a good feature for users that are not very familiar with campus, or if a user would want to find the room that is closest to him.

I took inspiration from other types of websites as well. For example real estate websites when it came to displaying results in a map view. I liked the feature in Facebook Marketplace where you can choose to only show results within a certain radius. From Google Calendar I liked the function of creating an event and being able to repeat it. I also liked the overview of the calendar.

From shopping websites I liked the feature of being able to add more items in a cart until you place the order. I looked upon many different websites to see how filters can be displayed. From a bus ticket website I liked that you reserved the seat under a short time until you corfirmed the booking. If the user stays inactive for too long, someone else can take the seat instead. The reservation also makes the user not having to rush through the booking as quick as possible.

The final result

The final result can be seen as an improved version of TimeEdit with more options. The new interface includes functions from many other different types of websites and I designed with many different scenarios in mind. For example the filtering page, users have many options for searching, fitering and displaying results depending.

Some people may already know the exact room they are looking for, then using the search bar might be the best option. Some people may have preferences but want to see all options matching the attributes, then using filters might be the best option. Some people just want to get an overview of what rooms are available and when, then the calendar view might be suitable. Others maybe just want to pick the closest room or want to know where the rooms are located. Then using the interactive map view might be the best option.

Under the “Your Bookings”-page the user can see a list of all the booking that he has ever made. There he can find out more information and read about details for every booking. In list view you see your whole bookings, which can be edited and deleted. You can also see the status of the equipment that you have booked. The yellow colour indicates that the equipment has not yet been accepted by the person in charge, handling the equipment. For example if the equipment is broken or needs calibration first. Green colour indicates that you are permitted to use the equipment during your chosen time slot.

In the “Your Bookings”-page the user can also see a calendar of all the bookings. In the calendar view you see all booked time slots for a certain period of time. These time slots can come from many different bookings. This gives a good overview of what rooms and equipments you have access to at the time. Colours are used to differentiate the types of items. The calendar is interactive so the user can click on a day or an item to find out more information about what has been booked and when.

Reflection and insights

It was difficult to making the shopping-bag-approach intuitive in this context. It made me think that there is a reason why shopping-bags are used for shopping sites and not for booking sites. The steps from when you click “choose” until you get a booking confirmation are the biggest flaws of the design since the layout and flow lack intuitiveness. Those were the parts where I tried to challenge standards and combine functions that are not usually together. For most existing booking systems you can only book one item at a time. Including multiple items in the same booking might confuse the users. Overall I think the interface looks nice and clear. The strongest parts of the design are the different ways of searching and filtering. Much could be improved with further iteration. I learned that standards should be followed for a reason. At least as long as you are a beginner. This was the first time designing an interface by myself in Figma.