Hooktheory
Making Music Theory Click for Everyone
Hooktheory
Making Music Theory Click for Everyone
Hooktheory is a music theory platform that helps users of all levels to understand and create music through interactive tools, visualizations, and a vast library of popular songs analyzed by user-made chord progressions and melody.
Hooktheory is a music theory platform that helps users of all levels to understand and create music through interactive tools, visualizations, and a vast library of popular songs analyzed by user-made chord progressions and melody.
Duration:
3 weeks
Duration:
3 weeks
Team:
4 UX/UI Designers
Team:
4 UX/UI Designers
Role:
UX Researcher & Lead UI Designer
Role:
UX Researcher & Lead UI Designer
Location:
Desktop
Location:
Desktop
Read time: 20 minutes
Read time: 20 minutes
Overview
Overview
Led the UI design team in a 3-week sprint to establish the foundational design system, enhance information architecture, and develop a scalable visual identity for the music-focused platform Hooktheory.
Collaborated with the client 1–2 times per week to align on research findings and design iterations. The goal was to balance user-centered solutions with core business needs, ultimately improving user retention and increasing conversions from new users to paid subscribers.
Led the UI design team in a 3-week sprint to establish the foundational design system, enhance information architecture, and develop a scalable visual identity for the music-focused platform Hooktheory.
Collaborated with the client 1–2 times per week to align on research findings and design iterations. The goal was to balance user-centered solutions with core business needs, ultimately improving user retention and increasing conversions from new users to paid subscribers.
The Challange
The Challange
Problem
Problem
Aspiring and hobbyist musicians want a user-friendly, modern platform that enables them to create and learn music regardless of skill level. They need intuitive navigation, a clean interface, and clear tools to support both personal growth and teaching others.
Aspiring and hobbyist musicians want a user-friendly, modern platform that enables them to create and share music regardless of skill level—without intrusive upselling or clutter. They need intuitive navigation, a clean interface, and clear tools to support both personal growth and teaching others.
Solution
Solution
Design an intuitive, engaging website experience that encourages exploration through improved information architecture, navigation, and layout. Guiding users seamlessly from curious beginners to committed, paying customers.
Design an intuitive, engaging website experience that encourages exploration through improved information architecture, navigation, and layout. Guiding users seamlessly from curious beginners to committed, paying customers.
Takeways
Takeways
As this was our first time working directly with a client, this project was a valuable introduction to the complexities of balancing user needs with business goals. Starting from the ground up required us to wear multiple hats: strategist, researcher, and designer. The process taught us how to:
Translate open-ended goals into actionable design priorities, focusing on the highest-impact pages that drive user engagement.
Establish the groundwork for a flexible design system, ensuring consistency across components while allowing room for iteration.
Ensuring that business goals and user needs became symbiotic allowing them to compliment each other.
As this was our first time working directly with a client, this project was a valuable introduction to the complexities of balancing user needs with business goals. Starting from the ground up required us to wear multiple hats: strategist, researcher, and designer. The process taught us how to:
Translate open-ended goals into actionable design priorities, focusing on the highest-impact pages that drive user engagement.
Establish the groundwork for a flexible design system, ensuring consistency across components while allowing room for iteration.
Ensuring that business goals and user needs became symbiotic allowing them to compliment each other.
These ideas guided both research and design choices as we pinpointed friction points in the user journey.
Research
Research
If you've ever wanted to pick up a guitar, or learn to play the piano, it may seem like a daunting task. "Where do my fingers go? Where do I even know where to start?" You may watch a youtube tutorial on your favorite song but once music theory comes up it's like being back in calculus.
It's rare that music theory doesn't feel like a daunting task that can be learned over night. Even during my time in music school I struggled to understand many of the concepts that were taught.
If you've ever wanted to pick up a guitar, or learn to play the piano, it may seem like a daunting task. "Where do my fingers go? Where do I even know where to start?" You may watch a youtube tutorial on your favorite song but once music theory comes up it's like being back in calculus.
It's rare that music theory doesn't feel like a daunting task that can be learned over night. Even during my time in music school I struggled to understand many of the concepts that were taught.
User Goal: having a tool to help the frustrations of music theory
Business Goal: increase user retention and increase the conversion rate from novice user to paid customer.
User Goal: having a tool to help the frustrations of music theory
Business Goal: increase user retention and increase the conversion rate from novice user to paid customer.
Revolutionary product
Revolutionary product
Hooktheory stands out as a uniquely powerful tool in the music education space. Users not only relied on it to learn, but actively integrated it into their creative workflows. Across interviews, participants expressed deep appreciation for its capabilities. However, recurring friction points, emerged for both new and experienced users, signaling opportunities to evolve the experience without compromising its core strengths.
Hooktheory stands out as a uniquely powerful tool in the music education space. Users not only relied on it to learn, but actively integrated it into their creative workflows. Across interviews, participants expressed deep appreciation for its capabilities. However, recurring friction points, emerged for both new and experienced users, signaling opportunities to evolve the experience without compromising its core strengths.
“I want to build my music skills, even if it’s not my full career”
“I want to build my music skills, even if it’s not my full career”
“I want to be able to easily create new music and teach others regardless of my skill level.”
“I want to be able to easily create new music and teach others regardless of my skill level.”
“I want a layout that doesn’t feel like you’re trying to constantly sell me something.”
“I want a layout that doesn’t feel like you’re trying to constantly sell me something.”
“I want an intuitive layout with easily identifiable icons with a more updated look.”
“I want an intuitive layout with easily identifiable icons with a more updated look.”
Competitive Analysis and Heuristic Evaluation
Competitive Analysis and Heuristic Evaluation
As a next step, we conducted competitive and comparative analyses of similar platforms to evaluate how they structured their offerings and engaged their users. This research focused on key dimensions such as target audience, product purpose, UI design, learnability, educational features, and community engagement—providing valuable insights to inform our approach to information architecture, interface design, and overall user experience strategy.
As a next step, we conducted competitive and comparative analyses of similar platforms to evaluate how they structured their offerings and engaged their users. This research focused on key dimensions such as target audience, product purpose, UI design, learnability, educational features, and community engagement—providing valuable insights to inform our approach to information architecture, interface design, and overall user experience strategy.
1
Information architecture
There were a lot of repeat information that needed organizing and condensing.
2
Rebranding
The colors and font styles were needing a refresh. Everything felt dated and some things felt juvenile.
3
Inclusivity
A lot of the information is presented to professionals and does not engage the novice. The novice is a whole group that could be new customers.
4
Intuitiveness
The placement of a lot of the content, TheoryTab, was not easy to find.
Synthesis
Synthesis
What do users need?
What do users need?
New Users needs a clearer, more intuitive way to learn chord structure, explore song ideas quickly, and organize their creative work.
New Users needs a clearer, more intuitive way to learn chord structure, explore song ideas quickly, and organize their creative work.
Jordan needs a clean, trustworthy platform that supports creative freedom, offers flexible ownership options, and makes it easy to discover and learn from niche music.
Jordan needs a clean, trustworthy platform that supports creative freedom, offers flexible ownership options, and makes it easy to discover and learn from niche music.
Updated Site Map
Updated Site Map
Our proposed new site map is a more streamlined navigation structure designed to serve both Hooktheory's existing users and newcomers visiting for the first time. Carefully considering which item functions as a product or a feature, and how best to communicate that Hooktheory is not only a provider of powerful music creation tools but also a valuable educational resource that enhances users’ musical knowledge.
Our proposed new site map is a more streamlined navigation structure designed to serve both Hooktheory's existing users and newcomers visiting for the first time. Carefully considering which item functions as a product or a feature, and how best to communicate that Hooktheory is not only a provider of powerful music creation tools but also a valuable educational resource that enhances users’ musical knowledge.
Ideate
Ideate
We don’t believe originality means starting from scratch.
We don’t believe originality means starting from scratch.
Originality comes from studying what’s come before—patterns, ideas, interactions, and culture. Remixing them into something more thoughtful, useful, and relevant. Like producers digging through crates, we explore existing systems, interfaces, and visual languages to find what’s worth reshaping.
Originality comes from studying what’s come before—patterns, ideas, interactions, and culture. Remixing them into something more thoughtful, useful, and relevant. Like producers digging through crates, we explore existing systems, interfaces, and visual languages to find what’s worth reshaping.
Lofi & Testing
Lofi & Testing
Crafted to better communicate Hooktheory’s mission, our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Crafted to better communicate Hooktheory’s mission, our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Crafted to better communicate Hooktheory’s mission. Our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Usability Test
Usability Test
Due to time constraints we were only able to complete a moderated test with one of Hooktheory’s current users. However, we did complete several unmoderated test with new users that completed 6 tasks.
Due to time constraints we were only able to complete a moderated test with one of Hooktheory’s current users. However, we did complete several unmoderated test with new users that completed 6 tasks.
Here are the results
Here are the results
87%
of participants successfully completed tasks.
87%
of participants successfully completed tasks.
50%
drop off rate on the last task due to our error.
50%
drop off rate on the last task due to our error.
100%
success rate
(not including the human error)
100%
success rate
(not including the human error)
Design
Design
With these findings in mind, I redesigned areas that needed further improvement while adding features to enhance the educational experience.
With these findings in mind, I redesigned areas that needed further improvement while adding features to enhance the educational experience.
Sidebar navigation
Sidebar navigation
Addition of search functions
Home Banner to showcase updates, new features or products.
Home Banner to showcase updates, new features or products.
Icon buttons
Icon buttons
Smaller content layout for each song
Smaller content layout for each song
Full audio and chord progressions
Full audio and chord progressions
Freedom to explore before committing
Condensed navigation and improved names
Emphasis on product image
Color
Color
Text Styles
Text Styles
Typography Used
Roboto Semi Bold 64
Roboto Light 64
Roboto Light 48
Roboto Bold 38
Roboto Medium 20
Roboto Regular 20
Roboto Regular 18
Typography Used
Roboto Semi Bold 64
Roboto Light 64
Roboto Light 48
Roboto Bold 38
Roboto Medium 20
Roboto Regular 20
Roboto Regular 18
Next Steps
Next Steps
Conduct more usability testing to gather better insights on how to refine the new UI, while ensuring we attract new users and meet the needs of current users.
Conduct more usability testing to gather better insights on how to refine the new UI, while ensuring we attract new users and meet the needs of current users.
Conduct more extensive user research to better understand how to balance the needs of new and existing users on the Hooktheory website.
Conduct more extensive user research to better understand how to balance the needs of new and existing users on the Hooktheory website.
Conduct research how to position Aria as an AI tutor that guides users, rather than an AI that writes songs for them.
Conduct research how to position Aria as an AI tutor that guides users, rather than an AI that writes songs for them.
Enhance content by integrating Theory Book insights across key pages to give insight to the meaning color codes.
Enhance content by integrating Theory Book insights across key pages to give insight to the meaning color codes.
Develop Tab Theory Profile Algorithm for personalized suggestions when users are logged in.
Develop Tab Theory Profile Algorithm for personalized suggestions when users are logged in.
Redesign UI for Hookpad/VST plugin to match the updated look of Hooktheory website
Redesign UI for Hookpad/VST plugin to match the updated look of Hooktheory website