Back to work

Group project · CS 6460 · Ultimate Guitar

Song-based decomposition

Full portfolio entry for designed feature: feedback, reflection, Figma, and the five-part case study from research through final prototype.

Project Group — Ultimate Guitar Feature focus Song-based decomposition Course CS 6460
Final feedback to incorporate

Feedback received

During the individual review and presentation, I received feedback related to improving the text layout by adapting both bolding and coloring to match that of the other features. It was also suggested that I enhanced fonts and padding in order to ensure I remained consistent with the overall user experience relevant to Ultimate Guitar. These details were not incorporated previously since I had initially paired my feature's design in accordance with the best looking design patterns of Feature 1 after Group Assignment 6.

Changes made to the prototype

I made the following changes to the prototype based on the feedback received:

  • Adapted text layout to match that of the other features by adapting both bolding and coloring.
  • Aligned fonts and padding to ensure consistency with the overall user experience relevant to Ultimate Guitar.

Reflection on the assignment

What went well

I believe group collaboration and overall effort were both effective in making sure we completed each task efficiently. I also think the regular feedback from the TA and professor helped us to develop understanding and move towards project completion.

What went badly

We could have done a better job of reviewing assignment requirements beforehand, specifically for assignment 1 and 7. I could have also spent more time on the group presentation to make sure my feature was well communicated.

What felt unnecessary or needed more time

We definitely needed more time to make the final prototype more polished and user-friendly.

If I could redesign the assignment

If I could redesign this assignment, I would also incorporate a programming assignment to help us better understand the application and how to implement each feature.

Updated Figma prototype
Group project portfolio entry
a. Background & pain points

Problem space

Our team compared Overleaf and Ultimate Guitar as possible app directions, and we chose Ultimate Guitar because it gave us a stronger opportunity to support real skill-building for self-learners through guided, hands-on practice.

Target users

Beginner to early-intermediate guitar learners who are mostly self-taught, practice inconsistently, and want clearer progression from fundamentals to full-song performance.

Pain points

  • Full songs feel too complex for beginners without intermediate checkpoints.
  • Most tools explain what to play, but not why it works musically.
  • Feedback is often delayed, so users cannot fix mistakes in the moment.
  • Practice and performance are disconnected, making progress feel slow.
b. UX research

Contextual inquiry

We reviewed two personas from earlier exploration (Overleaf and Ultimate Guitar) and ran user feedback rounds on interactive storyboards. We collected input from both beginner and experienced guitar players to compare how feature ideas worked across skill levels.

Key findings

  • Users wanted granular guidance (by chord/skill), not only high-level song notes.
  • Controls needed to be obvious; hidden actions reduced trust and discoverability.
  • Beginners preferred isolated drills before complete-song performance.
  • Users valued comparative practice (multiple progression/track variations).

Affinity diagramming

We grouped findings into four themes: clarity of feedback, progressive skill scaffolding, contextual theory support, and confidence-building for independent learners.

Affinity diagram summarizing Ultimate Guitar UX research themes
c. Design inspirations

Our feature direction was guided by core learning science ideas from the course and then translated into concrete product choices.

  • Component skills + mastery: songs are decomposed into smaller drills so users can build fluency before full reintegration.
  • Cognitive load management: each step focuses on one task with immediate feedback to avoid overwhelming novice players.
  • Constructivist learning: users test choices (progressions, scale options, rhythm adjustments) and learn through comparison and iteration.
  • Situated learning: theory and feedback stay tied to the active song context rather than abstract explanations.
d. Low & mid-fidelity prototyping

Sketches & early concepts

Low-fidelity sketch — early concept 3 Low-fidelity sketch — early concept 1 Low-fidelity sketch — early concept 2

In our lofi prototyping, we focused on the song selection and skill section screens to see how the flow would fit in with the current format of Ultimate Guitar. Then, we extended the final lofi prototype to include a performance evaluation for self-assessment and a final song performance to test the user's understanding of the song.

Wireframes & mid-fi

Wireframes and mid-fidelity screens

The media above shows the midfi that consists of different sub-skills for the user to choose from to practice the song. After the user chooses a subpart, they are presented with a screen that shows the user's progress and a button to move on to the next subpart.

e. User testing & final prototype

Testing approach & findings

Our testing approach consisted of interacting with users who had varying experience with the guitar. Our initial evaluations suggested that we have a more interactive format of the feature with country strum so the user(s) wouldn't have to play each beat while pressing a beat on the phone. Then, we leveraged a challenge section to test the user's understanding of the topic and their ability to apply the knowledge to the song.

Iterations

We made the following iterations to the final prototype:

  • Added a performance evaluation for self-assessment to the final screen.
  • Added a final song performance to test the user's understanding of the song.
  • Added a progress tracker to the final screen.
  • Added a feedback section to the final screen.

Final prototype in action

High-fidelity prototype walkthrough