Google Design Challenge

 

Challenge

Design a reservation experience for music rehearsal rooms

banner.png
 

Timeline

 
timeline.png
 

USER RESEARCH

Let's start!

To better understand the problem, I decided to head off to the college of Music in Georgia Tech to try to find some people who have ever reserved a music space. Luckily, I did find a student and a professor who would like to talk to me. However, they said that they knew that the music rehearsal rooms can be reserved online but they never used it before since they have their special rooms for practicing. Then I realized that finding the real users is kind of difficult and then I decided to reach out for some of my friends who I thought might have related experience. 

 
IMG_9685.JPG
IMG_9691.JPG
 

Rehearsal rooms in Georgia Tech

 

Then I talked to the real users

Came back to the description of the design exercise, I noticed that there are three main user groups: professors, students, and community members. However, based on my talking with the music college student and the professor, I was thinking that the user needs between music major students and amateur music fans might be very different. So I finally decided to conduct a short semi-structured interview with each of person below :

users.png
 

What I learned from users?

To better analyze the data I gathered from interviews, I wrote down all the insights and problems on sticky notes and conducted a solo affinity mapping process. Actually, this process took a little bit longer time than I thought, however, it did help me a lot to organize my findings and prioritize the problems. It was worth it!

IMG_9696.JPG

 

For different user groups:

  • Professors have priorities ( first choose, longer time and more room types) when booking music rehearsal spaces

  • Students with different majors (music majors and non-music majors) have different restrictions for reservation

  • Community Members (non-students) have to pay more to reserve a space along with more restrictions (time and room type)

For music rehearsal rooms:

  • Usually, the rooms are divided into 2 to 3 levels due to the price and the quality of pianos

  • Some rooms are more popular because of the location, the piano qualities and the size

 

Why do people need to reserve a music rehearsal place?

  • Practicing music requires a quiet as well as private space to prevent disruption

  • Waiting for a room is always annoying and time-consuming

  • People need to play the piano in rehearsal rooms

  • School Bands always have rehearsal plans about when and where to practice during the whole semester

 

Current experience

Specifically, to better understand the current experience of reserving a music rehearsal space at the school. I asked my 5 participants to describe their processes in detail. Besides, I also try the online conservation systems of Georgia Tech and Carnegie Mellon University in person to have a sense of how the current systems work. Then I visualize the 5 different processes from Georgia Tech, Tsinghua University, Carnegie Mellon University ,and Berklee College of Music below:

current experience-01.png

Then I created a chart to compare all these processes. Since different schools are serving for different user groups, I was curious about how and why these systems are different with each other. 

 
competitive.png
 

 

Define the context

Then I realized that I really need to define the context before I start forming my solution since there would be a huge difference between the user needs of comprehensive colleges and music colleges. Besides, given the situation that I was designing for a new student center, I need to identify the quantity and the types of music rehearsal rooms. 

Moving on, the background research coupled with my talk with Georgia Tech students helped me craft an assumption of the music rehearsal rooms in the new student center:

assumption.png
 

Ok then... Who's going to use the system?

Based on the former user research, I carefully picked my primary users as non-music major students and band advisers, my secondary users as outside music fans. Non-music major students and outside music fans need music rehearsal rooms for daily practicing. And for band advisers, though they have special rooms at College of Music for regularly band practicing, they still need a larger and formal music room for final rehearsals before a performance. Then I created my personas below:

 

persona.png
 

IDEATION

 

What platform?

As long as I can see, there are three platforms I can choose for designing a reservation system of music rehearsal rooms: mobile app, tablet app and website. During the interviews, I noticed that reserving a music room is not a frequent task for users. The average frequency of reserving a music rehearsal room is 2 to 3 times a semester. Based on that, I assume that users would not like to download an app or go to use the kiosk in the student center to reserve a music rehearsal place. What's more, getting from the competitive analysis, all the schools I researched are applying website platform to support reserving system. Therefore, I finally decided to design a website to help users reserve a music rehearsal place.

 

So what's wrong with the current process?

Based on the data I collected from interviews, I found out that there were mainly 4 problems:

problems-02.png

In addition, I came up with “How can I …” questions to begin the design thinking process.

  • How can I provide users with quick access to check the availability ?

  • How can I help different user groups find their desired rooms and times?

  • How can I make the reservation process easy to use for users?

 

Ok so... what if?

I tried to revise the user flow by adding the function of selecting the time/ room and simplifying the purchasing process. I came up with two options for this specific user flow: One is to select a time first and another one is to select a room first. Unfortunately, I was stuck here. I couldn't figure out which one is better, or both options are awful and I need a third one. 

revised flow-04.png

What do users care about?

Before I picked an option, I decided to come back to the interviews and tried to find out what do users care about. One pattern I spotted was that different user groups were caring about different factors:

  • Students care more about when they can use the room than the location or the room type

  • Professors care more about the size, the piano quality and the acoustic environment of the room

  • Outside people care more about the location of the room since they are not familiar with the school

CARE ABOUT-03.png

Based on that, I was thinking about: should I design two separate systems? One for students and outside people and another one for professors. That sounds like a good idea as it caters to all user groups. However, developing two systems may cost a lot for the school. And somehow, I intuitively felt that there should be a better option that serves all the user groups.

 

Wait... What if?

What if I simply combine the map and the calendar together and let the users check availability first? This option felt the best, the multiple filters helped all the user groups to search for a time/ room based on their own needs, and it finally felt like a tech school's reservation system. By merging the map with the calendar together I made the checking availability process much more flexible for users. 

option 3-05.png

Then I redesigned the whole user flow, considering different use cases and trying to further simplify the whole process:

final flow-06.png

 

After the above steps, I identified many opportunities to improve the reservation experience. However, due to the constraint of time I have to narrow down my design topics by referring back to user’s main tasks and the product mission.

For this design challenge, I decided to mainly improve the process of checking availability and reserving a room. Because this is the major task of the user.

 

DESIGN

 

Then I started sketching...

IMG_9701.JPG

I started by trying to figure out the whole user flow from checking availability to reserving a room and finally get confirmation. At that stage, I didn't care much about the layout things. Instead, what I wanted to know are how many screens I need to design and how these pages interact with each other:

sketch01.png

Ok, this flow looks good! I understood that I was going to design 4 steps

  • 1. Check availability

  • 2. Select a room and a time

  • 3. Reserve a room

  • 4. Get confirmation

 

Then I proposed a task-based workflow based on these 4 steps:

info arch-15.png

And I started polishing the "Check Availability" page... However, there was a question hovering in my mind:

 

What info do users really need when checking availability?

 
 

I analyzed all the info that related into a mind map. But, do users really need all this stuff when checking availability? To pick the factors that really matters, I came back to the personas and tried to walk in their shoes. Then I decided what info should be included and what info might be more useful when users looking for the details of a certain room.

 

How to provide info to users?

Then I came up with several components to deliver the necessary info:

solution-08.png

However, I was wondering: is there a better way to help users set their times? I wanted to design a time filter that was intuitive, easy to use as well as provides users with the flexibility to choose their times. Based on that, I formulated 4 design alternatives and evaluated each of them from multiple aspects. Also, I asked my roommates to get their opinions towards these 4 options:

Time Filter-10.png
 

Then I continued sketching...

I boiled down all the components to form a single interface and created 10 design alternatives:

 
IMG_9707.JPG
 

How to compare all these alternatives and choose one to further develop? I decided to come back to the personas again. What do the users care about? I noticed that for students and outside people, they care more about the time. And professors care more about the room's type. Since the number of professors is much less than students, I decided to put the time filter at the most attractive place and the room filter at the second. 

check availability final-11.png
 

Let's move to next step

To keep consistency, the layout between pages should be similar with each other. Follow the design of the "Check Availability "page, I crafted several sketches of the "Room Detail" page:

room detail.png

The user's main task at that step is to get detailed information about the room and make their reserving decisions. The detailed information needed for this page was defined in the former process when deciding the info that needed for checking availability. Specifically, key info in this page includes layout, price and facilities

 

Can users find the "Reserve" button?

I quickly drew out the first draft. Overall, it looks good. However, the location of the "Reserve" button looks bad. I was worried about that the users may not be able to find the button smoothly. Then I decided to move this button to the right-bottom of the screen and created an action card with the reserve button on it. 

room details f-12.png
 

Then next step... Users finally make decisions!

Still started by analyzing all the information that users need to provide at that step, I looked back at the Georgia Tech's "reservation" system. However, since Georgia Tech's system is not really providing reservation service, so I also referred to the reservation processes of other schools(CMU, THU, and Berklee). Then I figured out three categories of information:

reservation input.png
 

And I started sketching...

 
IMG_9711.JPG
 
 

Pop-up or New Page?

From the sketches above, I finally picked two of them to refine the details. The first one required users to make a reservation in a pop-up card and the second one was jumping to a new page. Which one would be better for users? Recalling the experience when I was applying for a job on a website, I was asked to input all my information through a small card. This experience was awful since I needed to always look back to check that my inputs were correct. What's more, for a reservation system, you shouldn't ask your users to confirm all the choices (room type, reservation time, price, etc) they made were correct by finding all around on the screen. Therefore, I made my decision to select jumping to a new page to help users focus on their tasks.

Make a reservation-13.png
 

Key screens

Then I roughly put all the key screens together and crafted a new experience flow for reserving a music rehearsal place:

4 STEPS-14.png
 

FINAL WIREFRAME

 

Build a wireframe

Based on all the sketches I made, I redrew the wireframes in Sketch. During this process, I refined the details of the components on the pages and focus on different use cases:

H wireframe all.png
 

Take a closer look

1. Check availability by setting filters

wireframe 1.png

How to select time by the time picker?

 
wireframe 1.1.png
 

How to differentiate all these room status?

 
wireframe 1.2.png
 
 

2. Look at room details and check more available times

wireframe 2.png

Time picker and week calendar are connected with each other

 
wireframe 2.1.png
 
 

3. Input necessary information to make a reservation

wireframe 3.png

For different user groups and different use cases, which info cards should be presented here?

 
CHART.png
 
 

Design iterations

After developing the wireframes in Sketch, I decided to conduct several very quick and dirty user testings to see whether my design is intuitive. I simply showed them my wireframes and walked through the user flow with them to see if there's any problem. Then I figured out three main problems and made design iterations below: 

 

1. "What if I want to reserve a room every Friday afternoon for my band?" Said by Professor Wang.

design iteration 1.png
 

2. "The time filter is confusing. I don't quite understand these grey lumps..." Said by my roommate.

design iteration 2.png
 

3. "What do room types mean? What is the difference between them?" Said by my friend.

design iteration 3.png
 

VISUAL DESIGN

 

Design Guideline

color pattern.png
object relationship.png
 

Visual Design

UI.png
 

THIS IS NOT THE END

 

What to do next?

Due to the time limit, many design decisions and assumptions in this design challenge were made based on several casual interviews. Though I frequently showed the wireframes and design alternatives to people around during the design process, the usability problems of this wireframe should still exist. If time allows, more task-based usability tests should be done to get solid insights and feedback.

To be specific,

  • Will users understand all these filters when checking room availability?

  • What if users failed to find an appropriate room?

  • Do first time users feel the flow intuitive and easy to use?

  • Are there any other edge cases I didn't take into consideration?

  • Moreover, how can I improve the accessibility of this system?

 

Afterthoughts

Wow! You finally reach this line! Thank you for reading through all my design process and authentic thoughts patiently.

Actually, this is my first design challenge and I have to say that I REALLY  REALLY enjoy this challenge! It was a lot of fun while challenging :)  I have to act fast, make decisions fast, learn fast and the most important thing is to fail fast. Very different from a long-term design project, I didn't have time to dig into every details and perfect each screen. Instead, the key is to build a whole framework first and then gradually form the design direction by understanding the problem and real users. I tried my best to make each of my design decision evidence-based and get quick user feedback during the process. However, I still felt that I spent much more time than I planned on some of the design decisions since I was overwhelmed by the details and couldn't find a balance. 

Anyway, I am so glad that I made it! And hope that I can have a chance to talk with you in person in the near future ;)