Uni-Bot

A chatbot that helps with music room reservation for students at University of Washington

THE CHALLENGE

Design the reservation experience to check availability and reserve one of the music rehearsal spaces within the new center.

TARGET USER

Students, professors and community members at University of Washington

DESIGN TOOLS

Sketch, Photoshop

Background

The challenge: a refresh of the reservation system for University of Washington

I was provided an excellent opportunity to do a redesign project about music room reservation system. The intention of this practice is supposed to be short. I spent seven days to figure out the overall flow, understand how the current University of Washington reservation system works, and try to create a better user experience. This practice is based on my research and design.

User goals

Who are the users' needs?

Student

- Quick and easy way to check available practice &  rehearsal rooms;
- Reserve rooms for many hours in one time;
- Know which room has needed equipment and correct instruments set-up.

Professor

- Reserve rooms for class (Automatic import schedule for class);
- Quick and easy way to check available rehearsal rooms;
- Know which room has needed equipment and correct instruments set-up.

Community Members

- Quick and easy way to check available rehearsal rooms;
- Quick and easy way to request for a room;
- Smooth payment system.

Research

Interview & User painpoints

I interviewed a faculty staff who is currently working at the UW music school front desk, asking about what he thinks of the music room reservation system at UW and the experience as well. Based on the interview, I summarized the main pain points that exist in the current music school reservation system.

Main Pain Points

1. Differences across the rooms that can be reserved :        
- Room details (like equipment and instruments) are not obvious when a user reserves rooms.

2. Visualization of the current reservation system:        
- The system is old and could use a visual refresh.

3. Automatic class imports vs. User-made reservations:      
- Automatic class imports can cancel user-made reservations without giving any notification.

4. Unused user interface for billing and accounts payable portion :
- Buggy and difficult to maintain;
- Price changes or price overrides could only be handled by the system administrator who does not handle reservations themselves.

User Interviews & Persona Creation

Since I am not able to find a music school student who is willing to participate my interview and I don’t have access to the music school reservation system, I decided to interview two students who are not music school students by using UW reservation system to reserve study rooms in HCDE building and UW libraries. I created a simple persona based on my interviewees.


- Name: Luna
- Age: 25
- Education: Graduate Student
- The frequency of Use: At least four times a week
- Need: To check available rooms and reserve room

“Most reservation systems are chaotic, too many things going on. All I need is a smooth and easy way to check if there is any room available and reserve one.”

Current problems

IA Analysis & Critique

To be able to understand the current IA of the University of Washington reservation system, I mapped out their existing content and color-coded the related sections. Since I do not have access to the music school reservation system, I used UW Library and HCDE reservation system instead. Additionally, I analyzed the UW music school booking page (Administration view) as well.

My interviewees have similar frustration as me since we get confused by the current reservation website IA layout. So I visualized the IA and did some critique.

Music School Booking Page (Administration View)

- Option (Filter) Section

The filter system is confusing because nothing seems clickable in this section. Besides, there is no category for classrooms, which leads to a long list showing all the rooms. It could be hard for the user the to check classroom availability.

- Option (Calendar Time Change) Section

The calendar time change section is too small. It could be hard for the user to notice. Also, using arrows to change day/week/year separately is unnatural and not
user-friendly.

- Room Availability Section

It is hard to tell which classroom is available by looking at the chart. Also, no diagram shows what different colors stand for in the time chart.

***

HCDE Booking Page

- Option (Filter) Section

It is confusing that equipment and rooms are categorized together. There is no clear feedback after user applied filter selections.

- Call to Action (Calendar Time Change) Section

Calendar time change section is too small. It could be hard for the user to notice. Also, this section is repeated twice on this page.

- Room Availability Section

The system does not show today's date, and it is confusing that previous reservations are showing in the same way as current/future reservations. User can even reserve past open slots. Additionally, the overall layout of availability information is bombarded
and cluttered.

HCDE Room Information Page

- Call to Action (Create Schedule) Section

Create/Cancel options are repeated twice on this page.

- Room & User Information Section

This section is too small, and it is hard for the user to notice and read through the information on the page.

- Option (Reservation Length) Section

It could be hard for the user to understand how to change the reservation length because this section is too small and not easy to read.

- Input (Room Usage Information) Section

The overall layout of this section is not user-friendly since the input boxes are out of scale comparing to other elements on the page.

***

UW Booking Page

- Option (Filter) Section

This section looks like navigation instead of a filter. It could be hard for the user to understand how the filter system works.

- Room Availability Section

Past reservations disappear when the time is passed. It could be confusing sometimes for the user since there is no indication of why those slots are empty.

- Option (Reservation Length) Section

It could be hard for the user to understand how to change the reservation length because this section is too small and not easy to read.

- Call to Action (Submit) Section

Submit button is not obvious enough. Additionally, the user always skips reading the privacy notice that is above the submit button.

UW Booking Detail Page #1

- Policy Information Section

Policy note section takes up too much space. The user tends not to read the police and click the continue button.

- Booking Information Section

Booking information section is too small; it could be hard for the user to read the selected room information.

UW Booking Detail Page #2

- Layout

The overall layout could be improved in a more explicit way so that user could read the booking details information better on this page.

UW Booking Confirmation Page

- Booking Information Section

The confirmation content is too small; it could be tough for the user to read the information on the page.

User journey

Designing the happy path

Given many insights from user interviews and the analysis of current systems, I sat down re-picture the "ideal user flow" of the new student center room reservation system. The flows of the three user groups are slightly different from each other based on their various needs. ​

1. Professor (Automatic class import feature)
2. Student
3. Community Members (Smooth payment system)

Ideation

Directions & Ideation

- Reasonable Filter System

The filter of music school system, UW library system, and HCDE system are not well-designed at all. A better filter system is crucial for users to check room availability and find the wanted room.

- Chatbot For Reservation

A chatbot system that allows students, professors, and community members to request classrooms, practice spaces, and music rehearsal rooms in the new student center at UW. The chatbot will provide users with a smooth and efficient experience to complete their reservation process.

- Reservation Prior Time Prediction

The reservation system will be able to create a traffic map for each classroom and generate the prediction on when the user should reserve the needed room in advance.

- Backup Reservations

The system will offer backup suggestions when user-made reservation is conflicted with automatic class imports. During the user's reservation process, the system will ask the user to select backup options. The reservation system will first send out a notification to the user when there is a conflict, and offer user other available time slots based on user's backup selections.

Wireflow

What the user experience will be like?

This flow mainly focuses on the student side. User will be able to talk to the chatbot system and filter out unwanted room options. In this case, the user won't receive overwhelmed and bombarded information of all the rooms. As users continually select their criteria, the reservation system will provide the most suitable options to users and help them get the work done.

Because of the time constraints of this design challenge, I only focused on developing the top two ideas, which are flexible filter system and chatbot for reservation.

Wireframes

Visualizing the experience

In this section, the wireframes will be presented as a series of detailed pages of the flow above, and, for some pages, I did a few iterations of the filter idea, and it helped me explore the idea further.

Student Center Sign in Page

The previous UW sign in page is a bit chaotic, and I decide to simplify the page. On this page, students and professors will be able to sign in by using the education view, and community members can sign in with the business view because, according to my interview with the music school staff, they have to pay for room reservation.

- Get Help

Whenever user meets any trouble with the website, the system will provide needed help. The user can choose to ask chatbot, learn about UW NetIDs on an information web page, or contact a real person to solve their problems.

Chatbot Landing Page

On this page, the user will be able to select quick options about the new student center. They can choose to reserve rooms, like a study room, meeting room, music rehearsal room, music practice room(usually 1-2 person space), rent digital devices, or schedule a meeting with an advisor.

- Switch to Keyboard Anytime

When users find quick options are not good enough, they will be able to use keyboard anytime they want and ask anything they want about the new student center.

Chatbot Select Room Option Page v1

To find wanted rehearsal rooms, they will be asked to provide their needs of the room, for example, sound system, Microphone, piano, and so on. Users can choose to give the number of people who will be using the room. Additionally, users can edit or cancel their previous selections in the right side section.

- Change Selections Anytime

When users want to edit or cancel their previous selections, the only thing they need is to click the selection. Click "Cross" icon for cancel; Click the options will lead to a quick range of other possible choices.

Chatbot Select Time Range Page v1

On this page, users will be able to choose the time range to search for the room reservations. The user can select a date/time to search. Additionally, users can also edit/cancel their previous selections in the right side section of the screen.

- Date & Time Selection

The user can choose either select a single date or a range of dates. Also, the user will have the option to set the time range as well.

Chatbot Reserve Room Page v1

On this page, the chatbot will show all the desirable and available results to the user. The user will be able to change any previous selections on this page as well.

- Select Time for Reservation

Once the room is decided, users will be able to choose the time for reservation.

***

Iteration: Chatbot Select Room Option Page v2

Above is an iteration of v1. On this page, users can select room size instead of equipment. This design is based on when each size of rehearsal room(small, medium, large) has the same equipment, for example, small rehearsal rooms will only have sound system and microphone; medium rooms will have the audio system, microphone,
and piano.

Iteration: Chatbot Select Time Range Page v2

This is an iteration of v1. On this page, instead of selecting time range in the first stage, the user can quickly choose today, this week, this month, or select range.

Final screen

From sketch to high fidelity

- There is an easy way to do this​ 👌

The only thing that users need to do is to type out everything they need, and chatbot system will automatically generate the filter based on the message. As easy as pie :)

Reflection

What could be done differently?

Starting from a relatively small scope and vague requirements, I learned to use different approaches that lead my way through the process. I believe that user feedback is the best way to bring robust design solutions.

Unfortunately, I emailed two music school professors, and they refused to participate in my interview. I have access to neither UW music school professors nor UW music community members. These constrain lead to what this project is lacking: automatic class import process & payment system.

For further development, I would love to explore more on the professors' side and community members' side. Also, I would like to explore more on the two other ideas that I did not end up designing.

UX design is where my passion lives. I love talking to users, solving their problems, and delivering joy to people's life.