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

 

Overview

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

Brainstorm

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.

IMG_4583.JPG

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
 

conclusion

Google Design Exercise_Page_10.jpg
 

Storytelling

POV

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
 

persona

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

 

storyboard

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
 

Problem

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
 

Ideation

HMW?

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.

IMG_5652.JPG
 

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.

IMG_6399.JPG

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