Some additional information in one line

Service Provided:

UI/UX DESIGN

SOUND MIXER DEVELOPMENT

E-COMMERCE WEBSITE DEVELOPMENT

CONTENT MANAGEMENT SYSTEM DEVELOPMENT

CUSTOM STRIPE INTEGRATION

Playbook

Playbook

Overview

Playbook is an online music education platform that teaches users how to play their instruments in a virtual and user-friendly environment. Its mission is to offer world-class mentorship to music learners via training sessions, improv courses, and song mixers. 

In 2020, Playbook came to ATAK to overcome the following challenges:

  • It didn’t have a proper website that showed its services and capabilities.
  • It needed a custom-built sound mixer that could be easily managed and utilized by students.
  • It needed an eCommerce plan to build out a subscription-based license element for schools. 

As a startup, Playbook needed to create a solid foundation and ATAK answered the call.

Playbook Homepage Design
Playbook Homepage Design

The Solution

We onboarded Playbook with a Strategy Day. From there, we developed a list of the obstacles we needed to overcome quickly:

  • Teacher- & Child-Friendly Interface
  • Site Speed for School Networks
  • Custom eCommerce Development for Teachers to Securely Provide Access to Students
  • Mobile Device Compatibility for Custom Mixer
  • Data Privacy and Security

Desktop and Mobile Friendly Playbook Page Design
Page Design – Desktop- and Mobile-Friendly

Our Process

In order to push things forward, we ATAK-ed the list. We tackled Playbook’s key obstacle, which was the creation and development of a sound mixer for users to easily use to learn how to better play their instrument. Our highly talented team of developers used Javascript to create a custom-built sound mixer from scratch that features a variety of different, separated instruments and master volumes that are combined to produce what sounds like a single audio track. We developed the mixer in a way that allows users to manually manage all the volume levels of each instrument so that they can play their instrument along with the song should they want to mute the player’s specific instrument. For ease of use, we made sure that everything was user-friendly on the back-end of the website to allow both the users and the Playbook management team to manage their tracks and music content on their own.

Playbook Sound Mixer Web Design
Web Design – Song Selections and Custom Sound Mixer

From there, we dove straight into website development with their lead designer. We took their original design and organization, building out content and imagery for Playbook’s WordPress website. During this phase, we made sure to build custom-coded site pages that amplify each capability that Playbook offers to better communicate its full-service offerings. We also ensured all design elements of the website were aligned with each other, creating Playbook’s fun, coherent, and unified brand image. 

Once the sound mixer was ready for eCommerce, we connected the mixer to the storefront. We were able to build out custom features in a subscription-based type of eCommerce framework wherein users can select individual or group license packages. Because Playbook’s target market was mainly educational institutions, we specifically created a subscription that allows teachers to choose how many licenses they would like to purchase. Our system allows teachers to see the price points of licenses for a minimum of 30 students to a maximum of 100 students. For ease of calculation, we made sure that our system automatically calculates the rates for the users so they can instantly see the price differences of each license.

With Playbook’s site refreshed and its eCommerce platform ready for use, we continued optimizing its website for organic search. Our analytics team increased site speed and optimized the site for mobile and search engines to turn https://www.thisisplaybook.com/ into a B2B lead-generating machine. Today, we are happy to announce the site is live and serving schools around the country.

 

Playbook About Us Page DesignPage Design – About Us

Next Case Study

Bottom Gradient