Improving the UX/UI of Ultimate-Guitar

Final Prototype of my Ultimate-Guitar redesign.
James Yoon

How can we make music learning accessible?

Like many others who grew up on the World Wide Web, I learned the guitar through the Internet. Armed with my music theory knowledge from piano lessons, I scrolled through tablatures and supplemented my playing with the occassional YouTube video. However, no service was as crucial as Ultimate-Guitar in my guitar learning journey. By learning just a couple of chords in an evening, I was able to play along to some of my favorite songs: the latest pop hits, radio throwbacks, and the occassional classical piece.

This UX/UI project, completed with Dr. Sookie Cho's guidance in UCLA's Digital Humanities 110 UX course, aimed to improve Ultimate-Guitar's user interface, focusing on a target audience of middle-aged, male guitar learners of all skill levels. 

For this project, I identified the issues to be a non-intuitive labeling (using "Shots" instead of "Videos"), overall design clutter, and lack of flexibility or features like annotation. Overall, this website seemed tailored to long-term users and advanced guitar players, thus excluding a significant portion of their potential userbase.

The design journey consisted of heuristic analysis of the current Ultimate-Guitar website and a competitor, followed by a usability test of the current site to identify any potential flaws. I then researched UX improvements through an interview and a ethnography and used these findings to guide my personas and UX storytelling. I then designed a low-fidelity prototype and interface based on the personas I created, testing them through a cognitive walkthrough with my peers. Finally, I polished my high-fidelity prototype and conducted four usability tests with my target audience to identify more opportunities for future improvement. 

You can explore the design journey and the final prototype here

Special Thanks

Huge thanks to Sookie Cho and the rest of the DH 110 course for all of their help and reviews!