James Burnett's Portfolio

Rock Box
Category
  • Student Group Project
Role
  • UX Research
  • Persona
  • Information Architexture
  • Visual Design
Tools
  • Adobe XD
  • Draw.io
Timeframe
  • February 2020, 2 weeks
For this project, I was assigned to wireframe an app or website for a local business to help solve a problem. I was assigned to Rock Box, a local Japanese karaoke bar in Seattle. Over the course of two weeks, I created a wireframe for a web application that would help customers select music and order drinks. This was an independent student project for General Assembly’s UX Immersive program.

The Problem

Rock Box’s karaoke system is inefficient.

Rock Box has two karaoke systems – public karaoke and private room karaoke. The private rooms have TVs and sound systems that can be controlled with an app. But the public karaoke in the main area of the bar doesn’t use technology. Rather, customers that want to sing have to go through a book full of music, manually find their song, and copy the song ID onto a piece of paper. In a crowded bar, this is far from ideal. For this project, I thought about:
  1. What could be improved about this karaoke experience?
  2. How could an app facilitate these improvements?
  3. Where are the painpoints for Rock Box customers?

Over the course of two weeks, I worked on solving this problem for Rock Box using newly-learned UX research and information architecture skills to guide my design.

Design Process

Discover

Rock Box caters to the “salaryman.”

Rock Box is a Japanese-style karaoke bar in the Capitol Hill area of Seattle. The bar is branded around the idea of the “salaryman,” which refers to Japanese white-collar workers that are known for participating in a work-hard-play-hard culture. Customers can either come to drink and sing in the main area, rent a private room for up to 14 people, or rent an event space room for large groups exceeding 35 people. I also did some preliminary organization research that can be read below.

Rock Box is bustling with business.

At the start of the project, I wanted to figure out how the customer experience at Rock Box could be improved. I didn’t quite know where to start, so I made an affinity map made up from information I could find on Google reviews and Yelp. I just wanted to get a sense of the business and how people felt about it. From doing this, I learned a few key pieces of information:

Busy
People both Yelp (pink) and Google (green) felt as if both the private rooms and the main area were crowded.

Variety
People appreciated the music variety and private rooms.

Happy hour
Finally, people seemed to enjoy happy hour. Rock Box offers a different experience depending on when you go.

I conducted four interviews to discover problems to design for.

From here, I took a trip to Rock Box to talk to some of the staff to learn more firsthand. I interviewed two staff members and asked questions to learn about how they conduct business, what the typical crowds are like, and what the competitors to Rock Box are. My other purpose in these interviews was to learn about any perceived painpoints that I could potentially design for. I also interviewed two more people about what they look for when they go out to bars. I sent out a filter survey and had people respond to a few questions about their social and dining preferences to gauge whether they would ever go to a place like Rock Box. The two people I interviewed appeared to the most likely candidates to go to a place like Rock Box. My goal with these interviews was the same, except I just wanted to learn more from the user’s perspective.

Rock Box is busy and the staff have to work hard to keep up.

I made an affinity map from my interview notes to better understand the information. I learned that Rock Box has a complex system for queueing songs in the main area. Customers have to write down a song ID after manually searching through a book to find their song, and then give their request to someone working at the bar. The staff is already overworked as it is keeping up with all the orders, bookings, and phone calls they get every day. And customers in the main area of Rock Box seem to value the social, welcoming atmosphere of the environment. A trend was appearing, and from here I started to piece together what problem I wanted to solve.

Meet Stan Smith.

Using this information, I came up with a persona to design for. This was difficult because there is a very diverse crowd of people that go to Rock Box. But I decided to focus on creating one that encapsulates the kind of personalities that enjoy public karaoke.

Define

Inspecting the competition helped shape my design.

I decided that I wanted to design an app to help Stan queue music in the main room and purchase food and drinks. This would cut down on the amount of work the staff would need to do and make it easier for customers to quickly find their favorite music. Considering the immense database of songs available, I decided to create an interface that allowed people to quickly search, queue, and save music. But I also considered other options, so I made a feature analysis comparing Rock Box’s current system to two karaoke apps:

Rock Box: Pencil, Paper, and WebsiteThe Mix: Kara Fun AppHula Hula: Heals Sonic
Operated by Staff
Browsing
Album Art
Multiple Languages
Browsing on Home
Browse Genres
Browse Top of Charts
Browse New Releases
Searching
Search Automatically Searches Titles, Artists, etc.
Favorites
Settings
Account
Community Presence

Yes

No

As you can see, the apps used by The Mix and Hula Hula have a lot going for them in comparison to Rock Box’s system. Kar Fun App and Heals Sonic are karaoke apps that can be used to queue music. From this analysis, it seemed the most important features were:

  • Searching
  • Browsing
  • Favorites

My thinking was that searching allows users to find specific music quickly. Browsing is important because sometimes users may not know exactly what to play, so giving them some easy options to look through might help them. And having a feature to favorite music felt like a good idea because many people at Rock Box are returning customers and they might want to be able to easily find music they enjoy singing regularly.

Laying the foundation for the design.

Next, I created a sitemap for my design. I split the app into two parts: a menu and a song selector. The menu part of the app is for customers to order food and drinks. The song selector takes customers into the karaoke part of the app.

When formulating the site map, I decided to my design “The Square” and to make it for desktop or tablet. My thinking was that Rock Box customers could use the app while at desktop or tablet stations around the bar. The stations could have an accompanying credit card reader to allow customers to make payment on the spot.

When using The Square, a customer like Stan will have to order something from the bar before they can use the Song Selector. After making an order, Stan will receive a code of random numbers and letters. He can decide if he wants to print a receipt with the code or have it texted to him. Before using the Song Selector, Stan must enter this code. This way, the karaoke system can’t be abused by non-customers and it incentivizes customers like Stan to give Rock Box business.

Design

Creating wireframes for several user flows.

Moving into the design phase, I began drawing lo-fi wireframes. I didn’t create wireframes for all parts of the app outlined in the sitemap due to time constraints. But I chose to at least design for the features I felt were most important. I decided that it was crucial to give customers flexibility – I wanted to give customers as many ways as possible to find music to sing. My thinking was that Stan is trying to find music quickly while potentially holding multiple conversations. Maybe he can only remember the album of the song he wants to play came from. Or maybe he knows he wants to play a certain style of music but doesn’t know what to play.
Payment
This wireframe demonstrates the flow a customer goes through to order something from the bar and how they get their access code for the Song Selector.
Song Selection
This flow assumes the user has already entered the access code. The main page is intended to operate like a feed, helping Stan find music if he isn’t sure what to play.
Search
Stan can search for music and the results will appear in a list. This list can be sorted in a number of ways, for example by song titles. And by clicking the three dots to the right, Stan gets options such as add to queue, favorite, etc.
Favorites
Stan can click on an album title and be taken to a page containing all the album’s songs as well as its cover art. Stan can also easily favorite music and access that list via the star icons.

High fidelity wireframes in Adobe XD.

I then brought these wireframes to life in Adobe XD. Below is a video showing part of The Box. The below video demonstrates the flow Stan would go through. First he orders something, then he uses the code to get into the Song Selector from there.

Deliver

Final prototype and next steps.

With only two weeks, I was unable to push the design into a higher fidelity unfortunately. With more time, the next steps would be:

  • Build out pages for the music collection feed
  • Create account management pages for returning customers
  • Bring the designs into a higher fidelity
  • Conduct usability tests to determine flaws
  • Create subsequent design iterations based on feedback

Below is a clickable prototype of my final design.