Reimagining Ultimate Guitar

Lindsey Mardona - DH110 - Spring 2022


Ultimate Guitar is a website where users can submit chord sheets, guitar tabs, ukelele tabs, bass tabs, and more. In addition to its main feature, it also offers additional functionalities for musicians and users to enjoy. The Shots feature allows users to submit videos of themselves playing. The Courses feature is a place for users to access and purchase published courses. The Articles feature is a place where music-related news is submitted. Finally, the Forums feature is where musicians can meet, interact, and hold discussion about any topic of their interest. The site does not require the user to sign up to be able to use it; however, additional functionality such as favoriting tabs is enabled when the user does create an account.

In an age where music is as big and booming as ever, it's no question that learning music is an endeavor that many will pursue. Consequently, the demand for tools that will simplify the music learning process only continues to rise. Ultimate Guitar, a website that primarily features user-submitted tabs alongside other learning and community-centered functionality (such as videos, courses, and forums), has served musicians well for over a decade, but has not changed much over the years. As the competition grows, Ultimate Guitar must modernize in the interest of staying relevant as online music learning tools multiply and improve.

As it currently stands, the Ultimate Guitar retains an outdated interface design and color scheme. Many functions of the site are unused and unoptimized for the not-so tech-savvy, which limits their potential user base. This project is intended to address the current shortcomings of Ultimate Guitar in regard to both its usability and aesthetics, simplifying the user flow while navigating the website, reducing confusion, and improving its presentation. This will allow for potential users to focus less on learning how to use the technology and more on learning the actual music. In addition, a second goal of the redesign of Ultimate Guitar is to improve the usability of the features of the site aside from the actual tabs. By doing so, users may be less intimidated and overwhelmed by the lack of intuitiveness of use and more encouraged to try out these features, fostering a sense of community among musicians who use the site and catering to users' other needs and desires. Through the lens of a brand-new look and feel, the hope of this proposed prototype is for Ultimate Guitar to improve its functionality while maintaining the core of the brand image it has held for many years.

View GitHub Repository »
Heuristic Evaluation
Heuristic Evaluation

As a first step, heuristic evaluations of two websites, Ultimate Guitar and Songsterr, were conducted in order to identify the strengths and weaknesses of each (as well as proposed revisions to address said weaknesses) in reference to the 10 Usability Heuristics. Songsterr, one of Ultimate Guitar's many competitors, had a much more modern and simplified look and feel, as well as much better usability and a smoother, more fluid user experience. Several weaknesses with Ultimate Guitar were evaluated, including a lack of visibility of system status, an outdated interface, lack of user control and error prevention, confusing navigation within several tabs, and little help and documentation. Ways to address these weaknesses were proposed, including a fresh color scheme, displaying where the user was on the site, help buttons, and a display of what features were locked behind a paywall.

Read more on GitHub »
Pilot UT
Pilot UT

In order to further assess the original product, a moderator script and participant survey was designed in order to conduct usability testing for the existing Ultimate Guitar website, involving a series of tasks for the participant to perform. A pilot UT was then conducted using these materials in a remote setting in order to test the setting, materials, and website intended for usability testing, as well as gain the experience of moderating a usability test and how to be a good moderator. The information gathered from conducting this test was used to learn more about the severity of previously identified issues as well as identify new ones, namely a lack of indication of difficulty ratings for tabs (newly identified), an intimidating and nonintuitive interface for the Forums (reidentified), and low usability of the Shots tab (reidentified).

Read more on GitHub »
Contextual Inquiry
Contextual Inquiry

After assessing the original product, the next objective in mind was to better understand the target user. To do this, research was conducted through participatory interaction, in which the participant answered a series of questions and completed a set of activities in the form of a remote interview and/or discussion. The participant was observed in order to gauge their authentic reactions and gain a better understanding and new insight of the user perspective. From this contextual inquiry, there was a further assessment of the severity of the following issues: ads should not obstruct use of the site, the difficulty ratings should be easily viewable and standardized, and the process of viewing different versions of a song should be streamlined. New issues were identified as well: song playback should be made available using MIDI to help with learning the music, site usage and song lyrics should be made available in different languages, and the tab revision process should be simple and intuitive for users to utilize.

Read more on GitHub »
Persona + Usage
Persona + Usage

The purpose of UX storytelling is to develop specific perspectives of users that might be using the product in question, and to be able to empathize with them and see things from their point of view to better understand the various but specific needs of different users of the product. For this purpose, two personas were developed with two tasks of interest in mind: redesigning tablature for a cleaner look, and a redesign of basic navigation of the site as well as the implementation of usage help through tutorials. Empathy maps, scenarios, and journey maps were also created for their respective personas. Ultimately, two proposed users were developed: Bradley Tandiono, a moderately tech-savvy beginner musician focused on learning basic pieces as well as growth and improvement, and Liam Anderson, a tech-illiterate older gentleman looking for tabs he can easily access when he's playing for professional gigs.

Read more on GitHub »
Low-Fidelity Prototype
Low-Fidelity Prototype

At the most basic level, a prototype is simply an expression of how a design is intended to materialize. Building upon this, a low-fidelity prototype is a version of this expression in which the design elements are secondary to the most important and functional aspects of the design. The purpose of a low-fidelity prototype is to begin conceptualizing how the user would interact with the redesigned website. Developed from the persona and usage scenarios, a set of wireframes was created in order to develop the wireflows for two tasks. The first was using the search bar to search for a song, filter difficulties, and switch between tab types. The second was accessing the tutorial on the Shots page to walk through how to use it. From there, wireflow testing was conducted to ensure that the wireframes were clear and straightforward enough to hypothetically execute the task. Feedback was derived from this testing to add a sorting functionality, close the help window in the tutorial, and implement a way to close the tutorial while in progress.

Read more on GitHub »
Interface Design
Interface Design

At this stage of the process, the objective was to create and test possible design ideas for the interface from which the final iteration of the design would be derived. By proposing several different variations of the design while prioritizing usability concerns and presentation of information, the strengths and weaknesses of each design iteration could be reasoned through to continuously revise and improve the layout design. Spacing was utilized for consistency of design, and typographic, shape, and color variations were produced and compared against each other. Color contrast checks were performed for accessibility purposes. Finally, an impression test was conducted to collect information on initial thoughts and first impressions. From this impression test, several revisions were made, including the removal of the drop shadow, color changes, modifications for consistent shapes throughout the design, and finalized color and typographic variations. The final design system was then visualized.

Read more on GitHub »
High-Fidelity Prototype
High-Fidelity Prototype

The purpose of a high-fidelity prototype is to combine the structure of the low-fidelity prototype with the interface design in order to visualize both the informative and interactive components of the prototype for design purposes, as well as validify the interaction flow of user choices. Using the low-fidelity prototypes and the interface design that were previously developed, a high-fidelity, interactive prototype was developed using Figma to perform two tasks. The first was using the search bar to search for a song, filter difficulties, select a tab, and switch between tab types. The second was navigating to the Shots page, accessing the help window, and clicking through the tutorial on the Shots page to walk through how to use it. After interactivity was added, task flows were visualized using the high-fidelity prototype. This prototype was evaluated by peer review through the process of cognitive walkthroughs, where users tried to perform the tasks at hand and note any confusion or impressions they had. Unfortunately, because of a misunderstanding of the site's purpose by the peer, the authenticity of the feedback was negatively impacted, and no revisions were made.

Read more on GitHub »
Pitch
Pitch

The final step of the UX design process was to prepare a pitch. Presentation material was prepared in the form of a web document that included the project title and author's name, an introduction and design statement, summaries of the competitor analysis, user research, UX storytelling, wireframe and graphic design element variation, low-fidelity prototype, and high-fidelity prototype. Once this was complete, a 4-10 minute speech was prepared to present the project and its process and methods, walk through and demonstrate use of the interactive prototype, and discuss any final conclusions following the creation of the project.

Read more on GitHub »