top of page

Desktop e-commerce flow to improve room booking

Rock Box Karaoke

UX Researcher
& designer
draw_io logo.png
sketch logo.webp
Rock Box cover.png

Challenge: solo concept project to discover pain points and improve the desktop user experience for the ecommerce portion of Rock Box's website during a 2-week agile sprint

Business Goal: help reduce friction around reserving karaoke rooms on busy nights and weekends.



To help guide the scope of this 2-week sprint, my first priority was to set project time blocks. I used a Trello board with cards for each deliverable to enhance visibility for task due dates.
To that end, I also created an organized documentation folder to ensure that I could easily locate and share files in both Trello and Google Drive.
Rock Box Trello Board.png


Rock Like A Salaryman
My initial organizational research and competitive analysis showed that Rock Box has positioned itself as a unique option to standard bars and restaurants in the Seattle nightlife scene . 
Online reviews verified that Rock Box seemed to have an edge over karaoke venues due to their extensive digital song selection, upscale atmosphere, and prime location in the vibrant Capitol Hill district.
Rock Box Comp Analysis.png
However, Rock Box had no capability for online booking.
From a usability heuristics standpoint, their website was also suffering from a severe lack of visibility for links and poor prioritization of key tasks.
Guerilla Investigation

To get a quick read on the business and user goals, I visited the location in Capitol Hill.


I managed to get detailed notes and audio recordings from two 20-minute staff interviews.

I learned these key points:

  • Repeat clients value personal service

  • Host both social outings and business events

  • User age range 25-50 with diverse interests 

Screen Shot 2020-03-12 at 11.38.53

Most importantly, I learned Rockbox manages their busy schedule for private rooms using an outdated excel spreadsheet, phone calls, and emails, causing friction for both employees and users.

Screening Survey

Now that I had a workable proto-persona and problem hypothesis from my site visit, I created survey questions to find users who were frequent planners, enjoyed performing in public, and had use-cases for desktop in addition to mobile.

The data collected from 15 responses allowed me to select optimal user interview candidates.

Screen Shot 2020-03-12 at 11.29.36
Conducted 3 User Interviews

I created a script digging into the how users planned events and made reservations in similar situations. I wanted to find out why they would choose a karaoke bar versus other options.


Data was captured through Zoom audio / video recordings and detailed notes. Key quotes were selected for analysis.

"The last thing I want to do on a Saturday night is use email for a reservation. That seems like work. BORING!"

"I appreciate booking options that help me save time by not having to pick up the phone and talk to a person"



Affinity and Concept Mapping

After synthesizing interview data points with an affinity map, a few clear trends emerged which I used to develop a concept map and persona: karaoke bar users value fun, song choices, social connections, and the ability to quickly check room availability on busy nights.

Rock Box Affinity Map
Mapping Vanessa's Journey

Since a primary concern was the ability to reserve karaoke rooms, I made a detailed user flow of the existing process.

I realized there were many key decision points where the she might abandon the task due to confusing menus and complicated log-ins.

Rock Box User Flow.png

When I saw Vanessa had to navigate through 20 different links in the FAQ to find key information, I knew there had to be a better way.

Rock Box Content Inventory.png


After completing research and analysis, I started the design process by analyzing user interfaces of key competitors
Design Inspiration

When comparing to the current Rock Box desktop site, Open Table and ScheduleOnce were comparative examples of industry-leading interfaces for online booking providing features like a Facebook login, live booking availability, and a clean booking search bar and calendar views.

Screen Shot 2020-02-07 at 9.53.42 AM.png
Paper Prototyping

​I created several paper sketches that served as paper prototypes to refine my ideas before moving to digital.

Rock Box Paper proto.png
Sketch Wireframing

The key focus of this process was getting clear on the new user flow for Vanessa to book a karaoke room for friends on a busy friday night. Once the flow was set, I added detail for higher fidelity.

RB Wire 01.png
RB Wire 02.png


Usability Testing

With the first version my Sketch wireframes setup in Invision for prototyping, I developed a usability test plan and script based off of my main scenario. I conducted in-person usability tests and took detailed notes.
Making Iterations

The key changes I made after usability testing were:

RB Iteration 1.png
RB Iteration 2.png
RB Iteration 3.png
Medium Fidelity Prototype
Rock Box cover.png
RB calendar.png
RB Menu.png


Next Steps

  • Add progress bar to booking screen flow

  • Add Google sign-in

  • Add credit card entry for party room reservations

  • Update visual design for high-fidelity mockups

  • Perform further research for navigation and site-map updates


For my first complete UX Design project and my first time using Sketch and Invision, I was happy with the scope and usability of this prototype. The booking flow functioned well and would likely add a lot of value to Rock Box's needs around scheduling on busy nights.

bottom of page