Overview

Client

BookedScheduler was initially created to replace an existing laboratory scheduling application. Following implementation, the authors made the code open source; it quickly reached 100,000 downloads and was put into use all over the world. People used it to schedule tennis court rentals, helicopter lessons, salon appointments, and of course laboratory equipment and the community has only continued to grow. Today, Booked is the most popular open source scheduling tool in the world–used by hundreds of thousands of organizations around the globe to schedule whatever they can think of.

Challenge and Goals

A College of Performing Arts uses a customized version of BookedScheduler that they call “CoPArooms”. CoPArooms manages the schedules of more than 100 spaces–classrooms, music practice rooms, drama studios, venues, conference rooms and offices–and allows students to self-reserve practice and rehearsal space online. The college’s 700 music students generate more than 20,000 reservations each month.

CoPArooms has functionality which allows staff to place students into user groups and apply limitations to how each group schedules rooms.  Much of the administrative functionality is as a result of customization, so any usability issues present in the program are compounded by added-on features.   Because of the extensive amount and complex nature of the administrative controls, CoPA staff finds the system difficult to learn.  

The goal for this project was to redesign the administrative features of Booked, integrating the CoPArooms customizations, so that the program can be more intuitive for users by making features easier to find in the navigation and by making the controls on each page more scannable.

Design Process

Empathize with Users

In 2013, I worked with a developer on the original customization of BookedScheduler for the College. Following that project, I was primary manager of the platform for six years. During 2019, I worked on a second round of customization with the program’s original author. Normally I would begin a project like this with user interviews, but given my history with the platform, I already had a high degree of empathy for users.

So with the project’s two week time frame, I began collecting insights through a cognitive walkthough and with several surveys. I examined the software with fresh eyes, practicing using features and flows from the perspective of different users.

I created a tree test to measure the findability of features in the navigation. Only 33% of booked users and 24% of non-users were able to identify the correct page to achieve a task. Of the correct answers in either group, about half were direct successes, where the subjects navigated directly to the correct answer and didn’t need to explore. I created an open card sort survey where I asked people to sort administrative features into groups. This illustrated that people tend to think of functionality grouped by users, rooms, rules, and reservations. I also sent a traditional survey to booked users which revealed that nomenclature was problematic and that features were grouped in unexpected ways.

Define the Challenges and Ideate Solutions

1) Layout and Organization of Site Navigation

In the existing app design, administrative features are located in three menus and organized into three levels.

From the tree test survey, I knew that users had trouble navigating to the correct page to find the features needed to accomplish a task. From user research, I knew that the 3-dot menus (shown below) were often overlooked and that users found the organization of some administrative features in the application management menu and others in the cog icon menu to be confusing.

In order to visualize the site organization, I made a website diagram, examining and evaluating how the administrative features were grouped.

I identified the five most heavily used administrative pages, catalogued the functionality on those pages, and looked for strategies to group features in more intuitive ways using the user card sort data and an affinity diagram.

I determined I could improve the navigation by flattening it into two levels. The settings menu is extensive, so I grouped functionality together under headers to help users quickly find features.

In the new design (shown below on the right) you can see the more visible navigation in two levels rather than three, deployed in a vertical layout. The program is now organized into five high level tabs with all administrative features placed into the settings menu. Sub navigation is visible with nothing hidden and grouped under headers to help users scan the navigation quickly.

In the existing bookings page, the layout doesn’t allow much of the gant chart to show without scrolling.

In the new design the site Nav and date picker shift to the left, allowing more vertical space for the gant chart.

2) Nomenclature

The nomenclature used in any scheduling app is loaded with meaning and tricky to implement. For example, is the word schedule a verb, something one does? Or is it a thing, a calendar that a person uses to keep track of appointments? Does the user think of schedule as a personal thing or something that can be applied to the availability of spaces for an institution? CoPArooms uses a variety of words that people relate to differently: schedule, bookings/reservations, resources, and quotas. Guided by surveys and interviews, I made slight changes to site’s nomenclature to improve clarity. Resources became Rooms, Quotas become Rules and Schedules became Grids.

3) Filter Size

Research revealed that users were overlooking important page functionality. So a goal for this project was to make the features on each page more easily discovered. One way that I did this was to reduce the amount of space that page filters occupied in order to move important features to a higher position on screen.

This is the existing site Resources page. The filter on top pushes the rooms down the page.

Show/Hides open to reveal room-specific functionality, incorporating standard standard UI elements.