Desktop e-commerce flow to improve room booking
Rock Box Karaoke
UX Researcher
& designer
Tools:
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.
Plan
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.
Research
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.
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
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.
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"
analyze
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.
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.
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.
design
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.
Paper Prototyping
I created several paper sketches that served as paper prototypes to refine my ideas before moving to digital.
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.
Prototype
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:
reflect
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
Conclusions
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.