Djembe DB

Djembedb is a platform browse and discover hand percussion grooves and patterns. At the beginning of 2021, driven by Corona-induced boredom, I bought a west african drum, a Djembe. I started learning hand percussions with a self taught, YouTube powered approach, but I soon found myself questioning the many shortcoming of this method. Among them: lack of clear notation, difficult discovery process, challenging experience of skipping back and forth in the video to understand what’s happening.

I asked myelf “how hard can it be to build a digital tool to serve the needs of a beginner player?” and saw this as an opportunity to explore the world of React JS. I set myself to design and build a product that could target newcomers without a traditional music training and in 2 months bootstrapped a functioning web app to prove my vision of simplicity and usability.

Check it live ->

Designing a notation system for the digital era

Hand percussion music has and historycal lack of academical training, a lot of its knowledge is passed on verbally and approaches changes from culture to culture. Because of this the ecosystem of its notation systems is a varied and fractured one.

With the goal to provide a better experience for newcomers I studied the existing frameworks, and designed a visual language that would fit mobile screens and leverage the digital tools we have at hand.

Accessibility and animation as staples

Animation is used to support the user in their learning process, is designed to be minimal and entertaining and build with GSAP framework to maximize performances on old and new devices. To foster inclusivity and provide accessibility I implemented keyboard controls and reader support

White and dark theme for readability under any light

Classical notation palette is easy to read but hard to look at in dark environments. Dark theme (white on black) is harder to read but does reduce eye strain in low-light conditions.

To provide the best solution in both situations the app features an easy toggle to switch between the two palettes.

Reaching out for feedback

To collect feedbacks and insights I reached out to communities on Reddit and Discord, where engaged users provided great value through polls and direct interviews.