About

Ultimate guitar is an online music chart and sheet music website + application for tablet and mobile. Unfortunately it does not have offline access. This doesn't allow musicians to access their chord charts and sheet music without an internet access. In some cases, especially in destination venues, this can pose a serious problem for performers who rely on the Ultimate Guitar app for their music.

The Challenge

• Design a feature within Ultimate Guitar that allows users to access saved chord charts when their device isn’t connected to the internet.
• Maintain Ultimate Guitar’s design system while integrating an offline feature.
• Design a layout allowing users to easily access saved chord charts on or offline.

Brainstorming

Ultimate Guitar has already been developed, so I had to design a feature within an already designed product.  This provided an already defined design style I had to follow when creating the offline feature. When researching how I would design the offline feature itself, I took a lot of influence from Spotify’s “Download feature” that allows users to listen to songs, podcasts and audiobooks directly from their device without an internet connection.

‍

Sitemap

The user journey is not too complicated. Once the user creates their account, Ultimate Guitar will automatically open to their "My Tabs" Page.  By touching the “Like” (heart logo next to each song) logo, the chord chart will be instantly saved within the users “Liked” playlist.

Paper Wireframes

With influences from Spotify’s offline and file download features and within the style and architecture of Ultimate Guitar’s already designed product, I began drawing out the initial user journey to save song charts within Ultimate Guitar’s application.

‍

Lo-Fi Wireframes

The following lo-fi wireframes are the first digital iterations of the offline feature for Ultimate Guitar. My approach to this design was to not fully redesign Ultimate Guitar's app and website, but simply add a feature to allow users to access their chord charts without internet access. For Desktop users, that implied directly downloading the chord charts to their desktops & laptops via .PDF files. For tablet and mobile users, the chord charts would be downloaded to their respective devices and accessed through the Ultimate Guitar app.

‍

‍

I proceeded with a usability study on my lo-fidelity prototype to find any pain points with the user goal of downloading chord charts to their devices (in their respective formats).

I used musicians who have used online charting apps -including Ultimate Guitar- in the past and were familiar with the type of product. All participants had a 100% success rate with the user goal. There were some suggestions with the layout of the website, but this was over other aspects of the website that were not related to the downloading feature.



One suggestion that did resonate was to add the download feature to the "My Tabs" page, and then have all downloaded charts in a respected playlist to be accessed later if needed.

From my initial wireframes and the improvements done to them through usability testing, with the addition of the assets and styles my UI kit, I was able to start bringing to life the final design for Ultimate Guitar's offline feature.

‍

‍