JOYFUL NOIZE
Designing a scalable platform that empowers creativity through play for music education client
Overview
MY ROLE
UX Designer
Stakeholder interviews, alignment workshop,
wire framing, prototyping
TEAM
1 - UX Researcher
1 - Visual Designer
1 - UX Design Director
1 - Project Director
1 - Visual Design Director
1 - Project Manager
TIMELINE & STATUS
10 weeks
Handoff for client fundraising
SUMMARY
Soul Science Lab (SSL) combats inequity in music education through their accessible hip hop songwriting curriculum, Joyful Noize.
Interning at consultancy BlinkUX, I led the UX design for envisioning SSL’s new platform, consolidating three applications into one, by defining strategy, prototyping five differentiating features, and providing a roadmap to guide future development.
The new features were well-received by students and the client, and the product roadmap is instrumental in helping the client kick off their fundraising process.
✵
HIGHLIGHTS
A scalable music production platform that empowers students
to create original hip hop songs through the power of guided play.
Context
Envisioning a platform to learn hip hop music in schools
A genre students resonate with
Hip-hop is underrepresented in schools, despite being highly relevant to students, especially Black and Brown youth. SSL’s Joyful Noize is an accessible curriculum that integrates hip-hop into classrooms, fostering creativity, technical literacy, and cross-curricular learning.
Maximizing access and impact
Praised by teachers and students, Soul Science Lab is ready to elevate the Joyful Noize curriculum for broader impact and access. SSL came to us to envision its future so they can begin securing funding for development.
❂
PROJECT GOAL
Create key flows for an interactive music education platform so SSL can secure the funding necessary to develop the final product.
Problem Space
Current reliance on third-party tools is limiting for teachers, students, and the business
Currently spanning 3 platforms
Limitating for the classroom
and the business
The Joyful Noize curriculum, a 1-4 hour workshop, guides students in creating hip hop songs through multiple platforms: Teachable for videos, Google Slides for activities, and Soundtrap for music production.
Distracting and inaccessible
For students, navigating between three platforms can be distracting, making it harder to stay fully engaged in the learning experience. For teachers, the scattered tools complicate the teaching process and is not accessible to all teachers.
Limits scalability and impact
For SSL, updates to third-party platforms require frequent adjustments to the curriculum. The one-time purchase model also preventing updates from reaching current users and missed opportunities for recurring revenue from loyal educators.
♛
THE CHALLENGE
Envision a scalable and all inclusive music education platform for SSL's current hip hop curriculum
Research
Platform needs to be engaging and flexible with a beginner friendly music production tool.
"Fun to use at school and at home"
Success to stakeholders means that students are learning about this platform in schools but are engaged enough to use it in their own time.
This meant exploring ways to engage with the curriculum like gamification or bonus materials outside of the curriculum
Referencing gaming and social media platforms helped me explore ideas around promoting engagement like unlocking materials and side-quests.
Freedom to learn at their own pace
Research with teachers informed us that flexibility to customize the learning experience helped students learn better.
This led us to consider how to simultaneously preserve the narrative arc of the lesson structure while making it easy for students to explore other material
I drew inspiration from top e-learning platforms on how storytelling is infused throughout the learning journey.
Breaking down industry standard music production tools
Stakeholders emphasized the need for a custom music production tool that simplifies learning and translates to more advanced tools.
This led us to explore how the tool could be integrated seamlessly within lessons and the curriculum.
Analysis of existing production tools helped to prioritize our design of simple features that teach music concepts over advanced capabilities.
Concept Strategy
Prioritizing the student learning experience to demonstrate potential impact
Alignment with stakeholders
While student collaboration, the teacher’s experience, and profiles were important, we prioritized student learning experience to best demonstrate impact to future investors. We designed the core platform lesson structure around the current curriculum materials.
Differentiating key features
We generated 50+ ideas with BlinkUX and the client, selecting key features for this engagement that would differentiate this platform and offered other ideas for future development.
Interactive Demos
Custom music production tool in a side by side learning environment allows students to learn by doing
Unlocking for Creation
Unlocking musical assets for further music creation incentivizes students to engage with and complete lessons
Musical Challenges
Ways to engage with the material outside of the lesson allows students to learn through play
Quick Reference
Easily access and build on previous material or assignments for ongoing learning
Integrating features into a
new user flow
I audited the current materials to design a lesson flow that could accommodate the different types of media such as videos, instructions, examples, and the new music workstation
1. Browsing all lessons
Students will explore all lessons on the main page and start a lesson
2. Lesson step by step
Each lesson has multiple steps that walk students through examples, activities, and assignments
3. Unlocking musical assets
Students will receive music samples or assets related to the lesson they just completed to use in future creations
1. Complete challenges in the workstation
Students can create works for challenges in the workstation, a simplified digital audio workstation
2. Resources in the platform
Students can use music samples from the library in their creations or access any prior videos for reference.
Design
Design decisions driven by research
Design goals
➤ Sturctured Exploration
Providing a path but not restricting student exploration of the material
✿ Engaging Throughout
Ensuring each part of the experience is fun and exciting
♥ Easy to Learn
Offering digestible learning paths to build fluency in an approachable way
Interactions
Recommending an order while allowing room for exploration
Modal over locking lessons
While it was important to stakeholders to enforce the recommended lesson completion order as it is designed, they placed even more emphasis on allowing students to develop their own interest and option to explore any lesson so we adopted a recommendation modal that prompted students to follow the order but ultimately gave them flexibility to try the lesson.
1. Progress indication
Shows you the recommendation of lessons to complete before this lesson and which of those you have already completed.
2. Flexibility to still start the lesson
Ability to bypass the modal and check out the lesson allows students the freedom to explore the lessons in any pathway they desire.
Make it pop - adding dynamic and immersive visuals
Carousel menu
I opted for the annimated carousel card design for a more immersive visual experience. In testing, students found the carousel annimation fun and engaging but had difficulties finding a specific lesson if it was 2nd or 3rd in the carousel order
1. Grid/Carousel view toggle
We iterated to add a grid view that would allow students to see all of the lessons in each section at a glance.
Energetic color and typography
SSL's visual brand focused on having a grounded and retro look and feel that represented the founders, but not necessarily the students they were serving.
1. A vibrant update to the color palette
A brighter color palette makes the whole experience feel more fun and alive.
2. Variable typeface to match the music
This typeface has multiple width and weights, mirroring the rhythm and energy of hip hop.
♛
STUDENT FEEBACK
“The aesthetic of everything feels welcoming, wholesome, and it attracts me to want to scroll through these.”
A layout that is easy to follow and apply to all lessons
Interactive Demo
1. Accomodating more videos
Some lessons have up multiple reference videos so a smaller button design to expand the video is more accomodating.
2. Keeping instructions visible
As videos expand, keeping the instructions present will be helpful for students to reference as they complete the activity
3. Progress toggles always visible
Fixing the 'back' and 'next' toggles to the bottom provides more continuity as the sidebar houses more materials.
Delivery
Final experience - A step by step learning interface that enhances the current curriculum
All in one platform combining various material mediums
We designed 3 lesson flows that covered all of the types of curriculum materials SLL has in their current system. This addresses the original probelm of these materials existing across multiple third party softwares.
Interactive Demo
Simultaneous video instruction and activity enhances guided hands-on learning experience
Integrated Workstation
Play and create to build fluency in digital music toolsPlay and create to build fluency in digital music tools
Quick Reference
Easily access and build on previous material or assignments for ongoing learning
Opportunities to learn outside of the lesson
We explored two additional opportunities for students to practice what they learn in the lesson.
Challenges
Engaging activities to extend learning beyond the lessons
Unlockable Content
Rewarding progress with new challenges and assets to drive ongoing engagement
♛
STUDENT FEEBACK
“I like the app a lot… I would definitely use it because it’s a fun way to learn. And it’s not just a learning app, you can also create things. For most learning things, I would do just for school. But this is the sort of thing I would also do at home, on my own free will”
Additional concepts to explore in the future
The fun doesn't stop there!
In our research, we also uncovered many insights about the value of student collaboration, the benefits of student identity, as well as the stakeholder's interest in exploring possibilities with AI.
Due to time constraints, we prioritized the main lesson flow and features focused on learning. However, we were able to create some sketches on additional areas for SSL to explore in the future.
1. Collaboration between students
Real-time or asynchronous collaboration in the create space. A space for sharing completed work and receiving time-stamped feedback
2. Generative AI
AI generated learning content for lesson support, music assets as starting points for creation, and visuals to accompany created works
2. Artist profile
Showcasing achievements and artist profiles to foster ownership and identity
Reflection
A huge success!
Impact
Happy Client
This project provided the client with invaluable insights from teachers and students, allowing them to refine their current materials and better understand their platform's potential. The work not only helped them envision a future direction but also raised critical questions to guide their strategy. Equipped with a strong foundation of research, design concepts, and polished materials, the client is now prepared to confidently pitch their platform to investors in the education space.
Opportunity for future projects
The client was so impressed with our work that they expressed interest in partnering with us for future design projects and additional support, such as engineering resources to bring the designs to life. This demonstrates the strength of our work in building trust and fostering long-term client relationships.
Project Takeaways
Scoping and prioritization
In consulting, time is limited, so it's crucial to work closely with clients to identify and prioritize the most impactful design elements. Tools like priority circles and experience frameworks help ensure we deliver meaningful outcomes within the project timeline.
Proceess artifacts can help clients in the future
Artifacts like user research insights, design audits, and concept explorations are valuable not just for informing the final product but also as resources that clients can reference in future work beyond our engagement
Articulating design decisions
Articulating design thinking isn’t just about strategy; it’s about every detail. This project pushed me to clearly explain the reasoning behind every design choices ensuring that each decision aligns with the overall design goals
