Redesigning the D!BS Website

Note: This was a class final project at University of California, San Diego for DSGN1

D!BS is the room reservation system at University of California, San Diego.

Many students choose to study at Geisel, the main library on campus to meet with fellow classmates or club members in these study rooms. This is due to the convenient library location and privacy; however, they may face obstacles when trying to reserve these rooms. With the mass amount of users who often use this website to book rooms, we strive to redesign the website to better accommodate these users with more intuitive interface and a better understanding of their priorities.

In the case study below, my group and I focused on the design thinking methodology based on Don Norman’s book Design of Everyday Things.”

My role involved interviewing, and creating the interactive prototype.

01. Understanding the Problem

The Challenge:

How does someone book a room at University of California, San Diego?



People who could sign onto UC San Diego’s room reservation system.


For our interviews, we wanted to give our users a standardized task to test what difficulties they may face and how we can fix these problems to make our users more satisfied with the website. Each user was given the task to: reserve a room on the 5th floor in Geisel in the evening for 5 people. We wanted to approach our interviews with the Master-Apprentice Model, requesting each user to think aloud their thoughts and teach us how to use the website to reserve rooms. Our focus was to have our users show us their interaction with the website and what priorities they have when going through the process.

The goal of our interviews was to discover how people book rooms and what are their priorities when going through the reservation process. We wanted to take into account if they were a frequent user of DIBS or if they rarely used the website, therefore, we asked how frequently they have used the mobile website during the quarter and compare it to how easily they navigate the website. There also seems to be a different layout for the desktop and mobile version, which results in inconsistency and confusion for the users.

User interviews and error data can be viewed here.

Interviews were focused on 3 main factors

  • Diversity: First time vs. Frequent users
  • Universal task through usability test
  • Change the way they book rooms

56% of interviewees felt frustration and stated that they wouldn’t use this as a valuable resource.

Comments from people included:

“It was difficult to find a specific floor”

“Interface isn’t really clean and polished”

“I wouldn’t really use it again because it was tedious”

Problems and Trends

Users were given a universal task:

Find DIBS website on their phones through searching on browser (e.g. Geisel study rooms), sign in with the correct system, reserve a room for 5 people on the 5th floor of Geisel in the evening, successfully confirm reservation, and cancel the reservation.

67% experienced memory-lapse slip

28% made knowledge-based mistakes

Memory-lapse slips were created from people forgetting their spot within the web application as they were reserving a room while knowledge-based mistakes caused confusion between people as they did not understand why they could not even sign in or they forgot if they reserved a room.

Based on interviews, there were also several problems currently with D!BS.

Memory-lapse slips were created from people forgetting their spot within the web application as they were reserving a room while knowledge-based mistakes caused confusion between people as they did not understand why they could not even sign in or they forgot if they reserved a room.

  1. Poor imaging due to lack of colors and visual aids.

2. Lack of signifiers causes a problem because it makes reserving a room take longer than it should.

3. Limited feedback ends up confusing the user because it creates a feeling that they were not able to reserve a room when they actually were able to. From a lack of a confirmation email to no text from the DIBS

Some trends we noticed included:

  • Display inconsistencies
  • Website malfunctions

02. Design Space

In our design space, our two axes are “Navigation” and “Visualization of Information.” On the horizontal axis, the far-right end represents “Clear Visualization of Information” while the far-left represents “Vague Visualization of Information.” This axis represents how easily and quickly the user connects the information presented on the screen with a recognizable mental model.

03. Ideation

Current D!Bs workflow — As seen in this series of pictures, booking one single room in a UCSD library can be confusing and tedious. There are certain language that can make the process confusing for users and the interface, in general, doesn’t prioritize the needs of users.

There are currently 6 steps in order to book a room at UC San Diego.

04. The Competition

We used a design chart in order to create our design space. For our chart, we included four criterias that were highlighted during our interviews: aesthetic, visual aids, efficiency, and usability.

Aesthetic and visual aids are graded in order to determine the placement of each system on the horizontal axis of the design space. We defined aesthetic through colors, neatness, and organization.

Visual aids were defined as different pictures, signs, and fonts that allow user to easily view the system.

Efficiency and usability are pertaining to the vertical axis which is navigation. When using each system, we observed how long we were able to reserve a room.

Usability as having enough signifiers and feedbacks to navigate through the system easily.

Some questions we kept in mind: Did the three-click rule apply? How was our overall experience?

A comparison between different school’s room reservation systems.

A breakdown of different university room reservation systems.

UCLA’s main scheduling interface
University of Southern California’s main scheduling interface

05. The Redesign

White boarding

The Paper Prototype

Before picture of D!BS workflow

06. The Redesign


07. Conclusion

For most of this project, we focused on the first step of the double-diamond process, which is finding the right problem. The problem we found through our interviews was that many users were not able to book rooms based on their priorities and the website limited their options. If we had more time and resources, we would move on towards the second half of the double-diamond process and test our redesign with a sample group. We would observe their interactions with our redesign and adjust our current redesign based on collected data. This would allow us to create more iterations of our redesign until we come up with a design that we feel best works for the UCSD student population. Our goal, if we were to continue reiterating this redesign, would be to design a function that gives users more options and to change the way people book rooms based on our repeated interview testings. This newer redesign would include things that we weren’t able to add to our first redesign. For example, a “My Reservations” page that displays the user’s reservations, so that they can cancel and check their reservations within the website and not be confused by different text and email messages. Also, if we had enough time and resources, we would team up with UCSD to fix the sign-on page. The sign-on page was the biggest issue we found; however, since the sign-on page is managed by UC San Diego, it was not something we could simply fix for D!BS, it would have to be something implemented systemwide to all UCSD websites. Finally, instead of just changing the mobile website view, we would make D!BS its own mobile app.

07. Credit

Credit also goes to Jamin Capulong, Christine Le, Paulo Pagsambugan, Cassandra Puertas, Wesley Ruan

Product Designer @Upperstudy | I write about development and design topics | Previously @Spotify & @Autodesk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store