Scroll Down
Project Title
Kids Guitar Dojo
Role
JAMStack, Next.js, Prismic, Supabase, Clerk, Stripe, Prisma
Date
September, 2024
Client
Rocket House Productions
The Brief
Our client approached us with the goal of revamping the online presence of their children’s guitar course—a unique and successful learning experience. The course had previously been offered online, but the user experience fell short. Having tried platforms like WordPress and Thrive, the client found them too templated, disjointed, and lacking the fun, engaging atmosphere they envisioned. One of their main goals was to introduce an element of gamification to make the learning process more enjoyable for young students.
Solution
After extensive research and discussions to fully understand the product and its requirements, we leveraged our experience in game design to create a custom Learning Management System (LMS) tailored to the client’s needs.
Marketing
Our first task was to overhaul the public-facing marketing site. We knew that understanding and highlighting the uniqueness of the intellectual property (IP) was key. The primary audience—parents—needed to be convinced that this course was not only fun but highly effective in teaching guitar to children. We wireframed the entire site, ensuring the user journey facilitated successful conversions, and showcased the distinctive nature of the course.
The Course
One of the standout features of the course is its physical materials, such as the instructional book and fretboard stickers. To complement these, we built an engaging digital experience using video content. Based on proven learning systems, we added a layer of gamification, including achievements and scoring, to keep students motivated.
We replaced the traditional, vertical course navigation with a fun, interactive 3D scene, where students ‘climb’ up a fretboard—a journey inspired by popular games like Candy Crush and apps like Duolingo. As students reach milestones, they unlock downloadable rewards. Points are awarded for completing questionnaires and practice lessons, and a leaderboard encourages students to revisit lessons and improve their skills.
Privacy and User Management
With a target audience of children under 13, privacy and account management were top priorities. Parents or guardians create accounts on behalf of their children, ensuring that personal data is protected at all times. We implemented a fun onboarding process for both the guardian and the student, generating playful names and avatars via a simple questionnaire, all without collecting sensitive personal information.
Development
The site was built using Next.js, with Prismic CMS chosen for its easy-to-use, component-based structure. The client was particularly thrilled with how simple and fast it was to manage content, especially compared to their previous experience with WordPress. The speed, performance, and usability far exceeded anything WordPress could offer, and the client expressed how they wished they had made the switch sooner.
The site is hosted on Netlify, and for authentication, we opted for Clerk, which provided a straightforward integration. Stripe was selected for secure payment transactions.
For the LMS dashboard, we created a fully custom build, using Supabase and Prisma as our database providers, integrated seamlessly with Next.js. This architecture allowed us to deliver the system in record time.
The client was extremely happy with the final result. They were particularly impressed with how we addressed their frustrations from previous platforms and brought their vision to life—an engaging, fun learning experience that reflects the uniqueness of their course.