the UCL Study Space Booking System

Timeframe: 2 Weeks

Tools: Miro, Figma, Microsoft Forms

My Role: UX Designer and Researcher

Project Overview

This project focuses on improving the UCL study space booking experience by addressing pain points in the current system’s filtering and navigation flow. The redesign emphasises usability, clarity, and speed, helping students find and reserve study spaces more intuitively.

Unlike institutions with large dedicated UX/UI teams, UCL’s internal systems often reflect functional but outdated design patterns. This case study is my attempt to reimagine a core student service — making it faster, clearer, and easier to use.

Problem Statement

Many students use the UCL study space booking system to book study spaces for groups or individual study sessions. The study space booking system's rigid search process, prioritising location filtering over time slots, does not match users' natural decision-making flow. This design often requires them to make unnecessary clicks or navigate through confusing steps to book a space.

Design Process

Empathize

->

Define

->

Ideate

<->

Prototype

<->

Test

...........

Empathize -> Define -> Ideate <-> Prototype <-> Test ...........

Empathize

Without trying to understand the pain points, I can’t see past my own bias as a user of the interface.

heuristic evaluation

Design problems were identified using Nielsen’s heuristics.

Heuristic Problem
Visibility of system status 1. The system does not clearly guide the user to available bookings. The user must visually search the study space table manually.
Match between system and real world 2. The filtering process consists of filtering out the building, neglecting users that prioritise time slots over location.
User control and freedom 3. Users must filter out searches by location first before looking for available spaces, restricting users to a specific location.
4. When clicking on a room, there is no back option to return to the available rooms page.
5. The breadcrumb navigation leads to a similar page but differs from the previous one. The filters are different than the initial search page.
Consistency and standards 6. The search interface provides filters to narrow down results, including Location, Zone, Category, and Capacity. However, labelling a category itself as "Filters" can be confusing.
7. The building study space page uses the term “available” to present the study spaces in a building, but this does not mean it is bookable.
Recognition over recall 8. Users must navigate each location one by one, meaning they must remember which locations had availability and which did not.
Flexibility and efficiency of use 9. The user cannot skip or adjust the filtering steps.
Aesthetic and minimalist design 10. The study space availability page presents a table with the study spaces on the y-axis and times on the x-axis. This results in visual clutter and information density for buildings with many study spaces.
11. The study space details can be accessed by the blue “details” button next to each study space and by the hyperlink on the study space text. One results in a pop-up window, which provides a more seaml

Questionnaire

“Feels like there are too many steps”

“Notification for time slots becoming available”

“Filtering system should be changed”

Based on the insights from a heuristic evaluation, a targeted questionnaire was created that was answered by 10 UCL students. The overall rating for the system's efficiency was a low 2.3 out of 5. The questionnaire also revealed user priorities when searching for a study space, with time and capacity being the most important factors. Given that most students use laptops/PCs for booking, the redesign will be optimized for these screen sizes.

DEfine <-> Ideate <-> Test

Goals

  • More intuitive filtering process

  • Reduce the number of steps to book a study space

  • Improve information clarity

  • Provide real-time updates on availability

  • More direct check-in/out process

Initial Sketches and Think-Aloud

To translate user insights from the heuristic evaluation and questionnaire into potential solutions, initial sketches were created. To evaluate the effectiveness of these ideas, a think-aloud interview was conducted with 4 participants.

Making a booking

The first set of sketches focused on the core function of making a booking, which involves selecting a booking with a specific location, time, and date.

First Idea: Live Filtering

  • The search page features live filtering, allowing users to refine results by selecting their desired options. Results are displayed in rows.

  • Switching the search page layout from rows to boxes can display twice as many options on screen.

  • Users have the option to display unavailable bookings, revealing a "notify me" functionality, which will send an email if a desired slot becomes available.

Second Idea: Search Page

  • Search filters are available on a separate page and are optional for users, enabling both broad and targeted searches.

  • Search results default to location sorting, but users can sort and refine by returning to the search page.

  • A booking confirmation window appears when the user double-clicks on the option.

Managing a Booking

The second core function is managing bookings, including cancelling, checking in, and checking out. A key finding from the questionnaire revealed confusion regarding the check-in/check-out process. When users clicked the 'check-in' button, the immediate appearance of the 'check-out' button led to accidental check-outs.

First Idea: Calendar View

  • To accommodate the 3-day booking window for students, the calendar displays bookings on a weekly schedule.

  • Clicking on a booking reveals details and provides relevant actions based on the booking status. Users can check in, check out, or cancel, but only valid options are clickable (e.g., check out is only available after check-in).

Second Idea: Scrolling View

  • The scrolling layout divides bookings into current and upcoming sections. Each booking offers check-in, check-out, and cancellation options.

  • To ensure users understand that checking out ends the session, a confirmation message appears when choosing either "cancel" or "check out," prompting them to confirm.

Think-aloud findings

  • Location clarity was a major concern. Participants stressed the need for a visible room image and clearly displayed address. Many found it difficult to distinguish between campuses or postcodes, suggesting this information should be more prominent and easy to scan.

  • The booking process felt redundant. After clicking the initial “Book” button, users were asked to confirm the booking again on a second screen. This repeated action created confusion and disrupted the user flow, leaving some unsure whether their booking had gone through.

  • The tick-boxes for comparing study spaces were not intuitive. Participants were unclear about their purpose and what would happen after selecting multiple options. This interaction lacked visual cues or contextual explanation.

  • When managing bookings, users responded well to the calendar layout, noting that it mirrors the structure of a typical course timetable, making it more familiar and easier to interpret.

  • In contrast, the scrolling layout felt more cluttered and introduced a higher visual load, making it harder to scan and manage upcoming bookings efficiently.

FInal Iterated Prototypes

  • Bookings begin with a search on the landing page.

  • Users can then refine their search using the filter bar on the results page.

  • To simplify location identification, locations are colour-coded, allowing users to easily distinguish between booking locations at a glance.

  • The booking calendar integrates seamlessly with university timetables, with the option to toggle this integration on or off. Additionally, users must check in before check-out to avoid accidental cancellations.

Reflection

User research was instrumental in uncovering key pain points in the booking experience. The heuristic evaluation, grounded in usability principles such as visibility of system status and user control, highlighted issues like unclear availability indicators and rigid filtering mechanisms. These findings were reinforced by a targeted questionnaire, which revealed users’ need for a more intuitive search flow and easier comparison between study spaces.

In response, I redesigned the filtering system, reducing unnecessary steps and minimising visual clutter. The updated design, which includes optional filters and clearer information hierarchy, was positively received by participants in the think-aloud study, who appreciated the streamlined search experience and improved clarity.

One limitation of the project was its focus solely on the web interface. Future iterations could explore a mobile-first approach, integrating features such as push notifications for booking updates or real-time space availability, to further enhance user experience and accessibility.

Previous
Previous

The Ultimatum Game, Reimagined: A Serious Game Design