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.
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:
user interview - Students
To validate my assumptions further, I interviewed several students who had this experience before. Here are some clips from my interview:
To consolidate what my potential users said, I stood at their perspective and created POV for each of the individual problems.
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.
Enough of the empathizing part. Now with deeper understanding of my users, I can finally form my problem statement.
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.
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.
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.
Tools used: Sketch with Google Material Design Tool Kit
Sign in & Gather User Info
Overall process: System optimization instead of user manual choices
Ability to recall
Showing Available Rooms & Details
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
Creation and indication of significance in the process of confirmation (should prolong system response time)
Reiteration of information after confirmation
After-booking Follow Up
Solving user requirements of technical support
Two ways of guidance
Ability to both proceed and escape
Call-to-action buttons differ from regular buttons
Project Look Ahead
Thanks for watching!