Designing for Guitarists
Mobile Tab Creation Tool
Overview
Transforming Ultimate Guitar’s mobile experience to remove creative barriers and help musicians turn ideas into playable tabs effortlessly
During the redesign, I created the end-to-end experience of the mobile tab creation tool on Ultimate Guitar
Role
UX/UI Designer
Timeline
January - May 2025
Project Type
University Capstone
Mobile
Key Skills
Prototyping
Wireframing
Mobile Design
Brand Design
Background
Ultimate Guitar is a go-to resource for guitar players of different skill levels when learning tabs or chords for songs
Problem
On mobile, guitarists that want to create chords or tabs don't have accessible tools to help with the process
Current UI - Lack of tools
Solution
Streamlines tab creation, making music creation faster, more intuitive, and accessible for players at every level
How I Reached this Solution…
My Starting Point
Web experience isn’t available on mobile, limiting user creativity and accesibility .
Difficult tab creation makes the learning process frustrating and less engaging.
Submitting tabs upgrades users to premium — but the current experience discourages participation due to lack of tools
The Web Experience
Submitting tabs requires following detailed formatting guidelines.
The process is time-consuming and leads users to post lower-quality tabs or avoid posting altogether, resulting in fewer learning resources for others.
First step in creating a tab - lots of steps
Guitar notation
Publishing Requirements
Users must follow strict publishing guidelines that are:
hard to verify
time-consuming
unsupported by tools beyond a basic template.
If users don't meet all requirements when publishing, their tab won't be approved and uploaded
Publishing Guidelines
Looking at Competitors + Existing Solutions
I looked at Guitar tab creator + Tabmaker to identify patterns across experiences :
Functional/technical UI
Visual representation of fretboard to help with input
Click notes instead of typing
Gives notification to user on interface of what certain notation means by hovering
Narrow Down Insights
Taking insights from competitors and initial user research enabled me to design a tool that takes the basic structure of the web experience and enhances it with new functionality within the mobile experience.
Finalized Design Requirement to Guide Prototyping:
Tab mode with visual representation of fret board that enables users to press notes
Chord mode that has library of existing chord diagrams users can input into content
‘Automagic’ feature from web experience that checks if user’s content follows formatting guidelines
Share, export, and enable version history so users can revert back to older versions
Nest Components
Nesting components allowed me to easily scale and tweak my work as I tested my designs throughout prototyping. By building components within each other, I was able to better showcase user interactions and speed up design
How I nested components for the tab/chord modes
Walkthrough
Create Tab
Enter song name, artist, and other setup information
Users are notified that they are able to receive a month of premium access if their tab meets all the standards and is approved
Add other descriptions like difficulty level
Review and Begin Creating
Users can view the information they added in the previous step
They can use the tab mode or chord mode to enter notes/chords
Guitar notation buttons the limit the amount of manual entry
Undo, delete, and move quick access button
Chord Mode
Allows users to search for chords they want to input
Chords have their corresponding diagram to easily verify/choose
Searching enables quick access to all chords
Pressing and holding allows users to select a different variation of a chord
View Your Draft by Hiding Edit Features
Swiping up allows you to hide the creation tools and just view the tab/content you’re creating
Scroll through different sections of the song and tap to edit them
Easily delete different sections or add more
Automagic Feature from Web Experience
Easily access the automagic feature by tapping the button in the top right
Easily understand what formatting requirements they might be violating
Reference line numbers for easy corrections
Once all the formatting requirements are met, they can submit the tab for approval and upload
Autosave and Exporting
Once users are done, they able to easily save and export
Users can check version history in case they want to revert back to an older version
Solution
Streamlines tab creation, making music creation faster, more intuitive, and accessible for players at every level
