UI/UX & Product Designer
Artboard 4@3x.png

Music Room Reservation Redesign (UI/UX)

Music Room Reservation Redesign

Android UI/UX Redesign Practice using Google Material Design Kit



As a USC undergrad, I could not help but notice that the current online music room reservation experience for Thorton rehearsal rooms are flawed. Therefore, in this project, I attempted to redesign the whole experience for reservation. 

In addition to that, I want to practice applying existing UI library to new designs. Therefore, I used Google's Material Design Sketch Tool Kit to integrate with my UI.


User Research


Before actual research, I brainstormed and jotted down some of the potential problems on both sides of users and providers.

Then I highlighted the factor categories that I think are important, creating potential opportunities for design.


The next step is to make sure that my assumptions are actual problems by doing online research and user interviews.


Online Research - Current Product

The current system is flawed in the following way:

Long and tedious list/form to let users choose by themselves.

Limited and vague functionality: Only asks for name, time and number of attendance without much other information.


user interview - Students

To validate my assumptions further, I interviewed several students who had this experience before. Here are some clips from my interview:

Google Design Exercise_Page_08.jpg
Google Design Exercise_Page_09.jpg


Google Design Exercise_Page_10.jpg



To consolidate what my potential users said, I stood at their perspective and created POV for each of the individual problems.

Google Design Exercise_Page_12.jpg


I then created the following persona. To make it easier, I assumed that the above POVs are all from the same person.



Then I created the following storyboard.

This is the story of Ken - All in one picture. I pictured his whole bad experience when booking from the current reservation system.


journey map

Google Design Exercise_Page_15.jpg


Enough of the empathizing part. Now with deeper understanding of my users, I can finally form my problem statement.

Google Design Exercise_Page_17.jpg
Google Design Exercise_Page_18.jpg



To move forward from problem definition to ideation, I restated the key issues on paper to remind myself, and then generated a series of HMW questions from a design perspective.

Since this is not a group project, I will refer them as "HOW" questions in the following.


Reference Products


Mind Map

Then I created a second mind map. This time it helped me put everything together and brainstorm all the possible solutions/features to solve the above problems. I also labeled the features into an order I desired.


This looks quite untidy, so I will draw a more tidy low-fidelity prototype later.

By doing this, I am quite clear of what the bigger picture is by having a rather complete and comprehensive product in mind.


Low-fidelity Prototype

Here I roughly jotted down the screen mockups and a simple user flow.

Because the arrows seem to be a bit messy, I decide to draw a clearer flowchart before I do a second iteration of higher-fidelity wireframe flow.


User Flow

flow chart


wireframe flow

Tools used: Sketch with Google Material Design Tool Kit


High-fidelity Prototype

Sign in & Gather User Info

Decision highlights:

  • Overall process: System optimization instead of user manual choices

  • Call-to-action Buttons

  • Ability to recall

  • Fluidity


Showing Available Rooms & Details

Decision highlights:

  • Distance highlighted and ranked to help users reduce inconveniences

  • Soundproof fact highlighted to help users reduce anxiety

  • Popularity highlighted to create user urgency

  • Unavailable choices distinguished from available ones

  • Clear and concrete information architecture


Confirmation for Booking & Waitlist

Decision highlights:

  • Creation and indication of significance in the process of confirmation (should prolong system response time)

  • Call-to-action button

  • Reiteration of information after confirmation


After-booking Follow Up

Decision highlights:

  • Solving user requirements of technical support

  • Two ways of guidance

  • Interactive instructions

  • Ability to both proceed and escape


Managing Reservations

Decision highlights:

  • Fluidity

  • Call-to-action buttons differ from regular buttons


Final Presentation


Project Look Ahead

Google Design Exercise_Page_38.jpg

Thanks for watching!

Screen Shot 2018-04-01 at 12.31.26 PM.png