An Mobile App for
Karaoke with Your Friends
This is a team project for Intro to HCI at JHU. Our team memebers include Shichang Ke, Yiyang Han, Anna An, Ayo Ajayi. We came up with this project theme based on the project requirement: a digital services/products that facilitate remote/hybrid interactions. There is also a list of other ideas we came up with here.
User Research
After some background research, we found that there isn’t a widely used implementation of “Online Kararoke” that’s on the market right now. Therefore, we chose survey as one of the forms of our user research.
We also did a contextual inquiry, asking the user to try an online Karaoke on zoom. The user was aked to complete three tasks:
- Create a karaoke room
- Invite a friend to join the room
- Play a song that you want to sing
The analyze possible breakdowns, we constructed a detailed sequence model.
Low-fi Protoype & Evaluation
After the contextual inquiry, we created our first iteration of the low fidelity prototype. It is paper-based, and contains some of the most important fucntionalities we wanted to include.
We then conducted a user evaluation to test our low-fidelity prototype. One feedback we got was that the invite button at the bottom is out of expectation (usually at the top - like zoom) A second breakdown is regarding the difficulty understanding what ‘check queue’ means and how it works represent the poor affordance usage. In particular, the visibility of available actions is lacking in this button.
Higher-Fidelity Prototype & Video Prototype
Base on our user research and low-fidelity prototype testing, we built a higher-fidelity prototype on figma. This version of prototype is more detailed in that it looks like an actual mobile app without it's actual karaoke fucntions.
In order to show the use of our design more straightfowardly, we developed a video prototype with a persona and a scenario. Since most of the responders to our user research were collge students, we built a persona based on that. Also we thought of a scenario that can demonstrate our design's usability and the user's need for it.
Final user Evaluation
After developing the prototype, we interviewed another user and presented a task based scenario as previously conducted given the similar set of tasks. The tasks were similar to that from previous user evaluations.
Overall, the user enjoys using the karaoke app. She likes how the albums are big in the main pages. She comments that buttons and their names are clear and straightforward. She also adds that the color coded lyrics and their functions are obvious to predict. The first major breakdown the user has is creating a room. The room creation feature is embedded under a microphone icon, and the user comments that some people might not link ‘creating a room’ with ‘mic’. The second major breakdown is checking the queue. She likes how the ‘add songs’ button is up at the top because she tends to look at the screen from top to bottom. The button is easy to find, but she does not expect checking the queue feature is also under the button.