home

about us

programs

toolbox

get involved

merch

Support Us

Programs

Check out the fun things Building Beats offer!

Explore Our Workshops

Our curriculum strengthens digital literacy and integrates life, leadership, and entrepreneurial skills so that your students can move through the world with the digital skills and confidence needed to succeed this school year and beyond.

Music Production

Students learn digital music making from scratch using song arrangement, basic music theory, sampling, writing, and recording.

Learn More

DJing

Students learn live DJ skills, music history, track blending, set building, audience adaptation, and equipment technology.

Learn More

Podcasting

Students learn podcast production from scratch, and skills including ideation, interviewing, recording, and audio engineering.

Learn More

Music Coding

Students learn interactive coding during drum patterns and melodies, as well as song structure using Javascript.

Learn More

Be a Better Music Educator

Empower the next generation of musicians and creators with our digital technology-focused curriculum, lesson plans, and immersive professional development opportunities.

Curriculum

Check out our Teachers Pay Teachers page to purchase our custom lesson plans, activity sheets and resources - tried and true in our classes!

Learn More

Professional Training

We specialize in training K-12 teachers how to utilize digital technology to teach music production, podcasting, DJ’ing and music coding.

Learn More

home

about us

programs

toolbox

get involved

merch

Support Us

Get Involved

Your support helps us make a lasting impact.

Donate

Our Impact

10,000+

students

working with us

15,000

hours

teaching in the classroom

65+

events

hosted by our student DJs

140+

community partners

Make a Difference

Wanna support a student every month? You can give as little as $5 a month to support a student in our workshops. Your gift is tax deductible.

Learn More

Fundraise for us

Fundraise for us by throwing an event, donate proceeds, pledge your birthday, start an online fundraiser, or check for company charity matching.

Learn More

Events

Join us at our exciting events and see our mission in action: Donuts are Forever, and student events.

Learn More

Work with us

Building Beats is always looking for passionate and dedicated individuals who reflect our Core Values to join our team.

Learn More

Our Supporters & Partners

Music Education Service

62.74%

Decrease in task

completion time

Role

Product Designer

Client

Building Beats

Timeline

Summer 2024

Team

6 Designers, 1 PM

Overview

Building Beats is an organization that empowers underserved youth through DJing and music production. They equip young people with tools to succeed in school, career, and community.

Problem: The current website has content overload, preventing users from finding information.

Goal: Create an user-friendly website that effectively communicates the client's mission and services while ensuring ease of navigation.

Results

The redesigned website decreases task completion time by 52% and increases task success rates by 39%.

Understanding Business Goals

We ensured alignment with product goals by communicating with our client promptly.

Understanding goals & challenges

Gathering branding guidelines

Weekly meeting and async communication

Constructing pain points

Translating Goals into Product Requirements

Based on our initial client meeting, we noted some areas to focus on:

Streamlining resources and feature overload

Improving navigation

Designing and implementing a learning management system (LMS)

Setting up the foundation within WordPress

Understanding the User

We conducted a preliminary user testing with the original Building Beats website, asking participants to engage with the website as key users: workshop coordinator, educator, or donor.

This approach helped us uncover usability issues, areas of confusion, and specific places of the website that worked well or needed improvement.

Below are quotes from user interviews summarizing insights from the affinity & empathy maps.

“Just looking at the menu options, I do not think I can find the workshops”

Navigation

“It would be nice if there was clear, distinct categories. I would stop at the first page if I didn’t know what I was looking for because I wouldn’t even know there are more pages”

Navigation

“The amount of text on the For Educators Homepage is overly wordy and I had to read twice to understand”

Information overload

“The subscribe newsletter paragraph is hard to read. There is low contrast with the background”

Accessibility

“When picking up a course, time frame and learning objective, skill level are important”

Information overload

Website Audit

We also conducted an internal website audit to identify UX and UI issues, diving deeper into what user interviews taught us, potential improvements, and strategies for content reorganization.

Low contrast text

Inconsistent placement

of information

large amount

of scrolling

Colors that don’t show up

anywhere else on the website

Awkward interaction: clicking the description

container leads to no action; instead clicking

the image below opens up a new page

💡 Key findings from user testing and website audit

We also conducted an internal website audit to identify UX and UI issues, diving deeper into what user interviews taught us, potential improvements, and strategies for content reorganization.

Information Overload & Disorganized Content

Overwhelming amounts of information and cluttered layouts made it difficult for users to find key details quickly.

Navigation & Inconsistent UI

Inconsistent button styles, text sizes, and navigation elements caused confusion, weakening the overall user experience.

Accessibility Issues

Accessibility issues such as low contrast text, all-caps and small fonts, posed challenges for users with visual impairments.

Refining the Information Architecture

We started by refining the information architecture (IA) to address the overwhelming number of tabs and content. Using the original site and research insights, we mapped the structure to identify user confusion. We split into teams and developed IA models and user flow maps for key actions (e.g. finding a workshop, donating), helping pinpoint navigation bottlenecks.

The final IA included eliminating redundant content, categorizing specific tabs under appropriate sections, and reorganizing the visual hierarchy of each tab.

Information Architecture

Designing & Iterating

We created low-fidelity wireframes with a focus on content hierarchy, call-to-actions, visual consistency and appeal, and informative content.

💡 A closer look at the bbWorkshop page:

Version A

Version B

bbWorkshop lo-fi

Version A

hero image consistent with other pages & home

leading overview about this page

testimonials to help users feel confident

too much content for each workshop

same layout design taking up the entire page

Version B

concise Workshop Offering section

different sections nicely spaced out with different layouts

testimonials to help users feel confident

Explore Other Workshops section to reduce user’s need of navigation

Mid-fi & Hi-fi

After rounds of critique and feedback from our client, we moved on to medium-fidelity and high-fidelity wireframes. During this stage, I continued to develop my designs while following a design system, and finally moved onto prototyping to prepare for usability testing

bbWorkshop hi-fi

Design System

Our design system was inspired by the colors on Building Beats’ logo and its mission of empowering youths through music. We decided to use lively & playful colors as well as contemporary typography.

Colors

Neutral

Brand

Typography

Headers

Font Name

Size

Weight

Use

Header1

Fjalla One

60pt

regular

page titles

Header2

Fjalla One

48pt

regular

titles of sections

Header3

Fjalla One

32pt

regular

card titles

Nav Bar

Header3

Fjalla One

32pt

regular

nav(upper)

Bodys

Font Name

Size

Weight

Use

Body 1

Body1

Urbanist

16pt

regular

paragraphs

Body 2

Body2

Urbanist

18pt

regular

paragraphs(test)

caption

Urbanist

14pt

regular

descriptions

Buttons

Fjalla One

16pt

regular

buttons

Cards

Testimonials

“...to be a good music producer and also I learned to be a great pro at it...”

Music Production Student

DEVONTE

“...to be a good music producer and also I learned to be a great pro at it...”

Normal Cards TBD

Buttons

Primary

Hero

Secondary

Tertiary

Learn More

Hero

home

about us

programs

toolbox

get involved

merch

Support Us

Music Production

Digital music making, music theory, sampling, writing & recoding.

The button can be deleted

How to change the background image on the fill section on the right panel?

Forms

Contact form

Page

Width: 1512

Add a black background to sections you want to highlight or separate

Testing

We tested our prototype with 21 users who have a music background by asking them to complete specific tasks, think-out-loud, and provide suggestions.

“This [nav bar] was very nicely organized. The titles were very good. I think it was very straight forward for me to find them very quickly”

Navigation

“Still not looking professional because it has multiple colors, multiple fonts, which make it inconsistent"

Inconsistency

“The white background looks bare and on cheaper side. There’s too much white space on the sides”

Whitespace overuse

To tackle this, my team utilized a RACI matrix strategy to implement an internal design critique system, and we did an UI sheet activity to finalize the design system.

Figma to Wordpress

I began transferring the designs to WordPress. Transferring static designs to Wordpress while maintaining specific details was difficult. I utilized different resources for this process: Elementor, UIChemy, and other third-party plug-ins for implementing the LMS.

A closer look at the bbWorkshop Page:

bbWorkshops

After school residencies and masterclasses to inspire and support students

Explore Our Workshops

Music Production

Students learn digital music making from scratch using song arrangement, basic music theory, sampling, writing, and recording.

Learn More

DJing

Students learn live DJ skills, music history, track blending, set building, audience adaptation, and equipment technology.

Learn More

Podcasting

Students learn podcast production from scratch, and skills including ideation, interviewing, recording, and audio engineering.

Learn More

Music Coding

Students learn interactive coding during drum patterns and melodies, as well as song structure using Javascript.

Learn More

What Our Students Have Made

programs

bbWorkshop

bbLeaders

bbForTeachers

BuildingTeams

DJ Service

resources

Guided Courses

Curriculum

Toolbox

Complete Guide

music sample

GET involved

Donation

Fundraise

Events

Work with Us

501(C)(3) #00-0000000

info@buildingbeats.org

37 North 15th St #210
Brooklyn, NY 11222

Subscribe for our Building Beats news letters

Empowering Youth Through Digital Literacy and Creativity

Building Beats is committed to being a solid, reliable resource for creativity and motivation for youth. We do this by providing Digital Literacy Programs to youth in underserved communities.

We offer in school and after school residencies and masterclasses to inspire and support our students and partners.

Ready to bring our workshops to your students?

Get started now and empower your students with exciting and educational experiences!

Fill out our form and one of our team members will be in touch.

Music Production

Digital music making, music theory, sampling, writing & recoding.

programs

bbWorkshop

bbLeaders

bbForTeachers

BuildingTeams

DJ Service

resources

Guided Courses

Curriculum

Toolbox

Complete Guide

music sample

GET involved

Donation

Fundraise

Events

Work with Us

501(C)(3) #00-0000000

info@buildingbeats.org

37 North 15th St #210
Brooklyn, NY 11222

Subscribe for our Building Beats newsletters

Have questions about enrollment?

Name:

Email Address:

Phone Number:

NEW YORK, NY

Message:

Send

Explore Other Workshops

DJing

Students learn live DJ skills, music history, track blending, set building, audience adaptation, and equipment technology.

Learn More

Podcasting

Students learn podcast production from scratch, and skills including ideation, interviewing, recording, and audio engineering.

Learn More

Music Coding

Students learn interactive coding during drum patterns and melodies, as well as song structure using Javascript.

Learn More

Ready to bring our workshops to your students?

Fill out our form and one of our team members will be in touch.

Get started now and empower your students with exciting and educational experiences!

multiple

CTA’s

What Our Students Learned

“...music is not as scary as you think. and there is no such things as perfect.”

Music Production Student

“...the steps and stages of how to build a music from the beginning”

Music Production Student

“...to be a good music producer and also I learned to be a great pro at it...”

Music Production Student

About This Workshop

Students will learn digital music making from scratch using song arrangement, basic music theory/structures, sampling, writing, and recording.

In-Person & Remote

Residencies & Masterclasses

Workshop Outline:

Lesson 1: Introductions, Norms & Introduction to Soundtrap

Lesson 2: Intro to Recording & Practice

Lesson 3: Creating a Vox Pop

Lesson 4: Creating an Audio Postcard

Lesson 5: Podcasting Overview, Part 1

Lesson 6: Choosing a Topic, Part 2

Lesson 7: Planning the Story, Part 3

Lesson 8: Brainstorming Sounds, Part 4

Lesson 9: Brainstorming Sounds, Part 4

Get Started

Equipment Needed:

A computer, Chromebook, tablet or phone with access to the internet

Google Chrome (the most optimal browser)

Zoom or Google Meet (remote only)

Headphones

testimonials to encourage users to apply

outline colors to elevate branding

clear outline of workshop content

3 Key Users

Leveraging insights from these sources, we focused our website revisions on three key user groups: music educators, workshop coordinators, and the general public.

Music Educators:

Our research showed that music educators prefer resources with strong foundations for continued learning. By considering time, objectives, skill levels, class size, and free samples, we streamlined resources for easy selection and integration of lesson plans.

Workshop Coordinators:

Through preliminary user testing, I found that workshop coordinators prioritize credibility and student feedback when selecting workshops for their institutions. So I included detailed workshop outlines, student testimonials, and ensured a seamless process for addressing enrollment inquiries.

General Public:

Aligned with our client’s vision to equip underserved youth with life skills and empower them in music production entrepreneurship, we aim to amplify Building Beats’ impact by engaging the public through donations, fundraisers, events, or volunteer involvement.

🚀 Results

Due to time constraints, we couldn't conduct a final round of user testing. However, mid-project testing revealed that users were satisfied with the new navigation and design, finding it easier to locate resources compared to the original site. Following the website redesign, users experienced a significant improvement in overall navigation and usability. The average time to complete key tasks, such as finding workshop offerings, was reduced by 62.74%, with task completion times across the site decreasing by an average of 52%. Additionally, task success rates were increased by an average of 39%. These metrics highlight the success of the redesign in creating a more efficient, user-friendly experience.

Design and Feature Highlights

We focused on engaging marketing, streamlined content navigation, learning management software integration, and resource organization.

Engaging Marketing

First, one of the key features we focused on was the meaningful and engaging marketing of building beats products, especially curriculums for music teachers & workshops for teaching artists.

We highlighted key information that customers want to know before committing, like program information, timeline, student work, and testimonials.

Streamlining Content Navigation

Using our information architecture, we consolidated many pages and tabs from the original website to a more streamlined content organization of pages in our redesigned nav bar. Additionally, on our home page, we made sure to minimize the scrolling of the home page.

Pre-Summer

Our Redesign

LMS Integration

Finally, our last design highlight is integrating the learning management software directly on BB platform to integrate teaching artist training for workshop leadership directly under BB.

Research Focus

During the initial phases of our project, we strategically scoped out opportunities to streamline resources and optimize user interactions. This process was informed by in-depth research, including a thorough website UX audit, competitive analysis, and preliminary user testing.

Testimonials

Feedback included praise for the design being “well divided” and “much neater,” with users describing the pages as “clean” and “easy to navigate.”

The client has expressed their satisfaction with these improvements, noting that the new site structure simplifies finding key resources and that they are pleased with the updated design's aesthetics. The client, Jess, specifically stated

“We are super impressed with your work, and the Building Beats team is very excited to roll out this new look in the future. We are very proud of how much you all accomplished this summer.”

Future Improvements

We hope to conduct another round of user testing with our live designs on Wordpress. We also want to polish the website’s responsiveness as well as the interactivity, elevating engagement.

Reflection

I feel super rewarded and proud of what my team and I have created throughout one summer!

As a completely remote project, my teammates are from various places in the US. We work in different timezones yet always meet weekly for internal and client meetings, and sometimes additional work sessions. We stay proactive on our communication platform Slack. I’m grateful of how collaborative and supportive everyone is. More specific takeaways below.

✨ Users can have vastly different opinions

While analyzing what users have said in usability tests and interviews, I learned users have a diverse set of opinions and aesthetics. Some users like how the white space on our pages make the website look modern, while others think it makes the website seem empty. I discovered that not all feedback should be acted upon, as design decisions need to align with the overall vision and objectives of the project, rather than trying to satisfy every individual preference.

✨ Teamwork and communication

Working remotely is hard. However, my team made this experience invaluable. Staying proactive and practicing empathy is key in both design and collaboration.

✨ Balancing design goals and client satisfaction

Because we only have 10 weeks to complete this project, I was worried about client satisfaction. Our client came with a clear problem as well as openness for additional improvements. We made sure we were in the same direction as our client, whether it is through weekly client meetings, written feedback, or slack messages. At the end of the project, we included a tutorial video of how to make edits on WordPress in our handoff documentation.