MyDentity Custom Drum Builder

Transcription

1 MyDentity Custom Drum Builder mydentity.mapexdrums.com Industry Music / Retail Partner Bit-Wizards P.O. Box 937 Fort Walton Beach, FL USA Vincent Mayfield mayfieldv@bit-wizards.com x101 Goals KHS Musical Instruments is one of the world s top full-scale musical instrument manufacturers. KHS has many brands of instruments including Jupiter, Mapex, Hercules, Walden, Majestic and Altus. Through extensive market research, KHS identified an opening in the market of drum kits and developed a plan to allow consumers to build and purchase custom configurations through their Mapex brand. They needed a web application that would allow users to easily configure their own kits by choosing from a large selection of drum types, sizes, and finishes. The ability to create the kits would not be enough though; this needed to be a complete experience for their consumers. To build a complete custom experience, the application was not only required to provide a wide array of options to the user, it needed to do so in a fully interactive manner. The consumer would need to be able to select the drums they want and arrange them on a stage. Arranging the pieces needed to include the ability to position, layer and rotate drums, quickly swap drums, add pedals and cymbals and even change the stage itself. Aside from just setting up the positioning of the items in the kit, they also needed to be able to select and change the shell and hardware finishes and have the application automatically update the drums on the stage. All of this functionality was still not enough for a complete experience as the consumer needed more options to have full control over the end product. The ability to choose custom bass drum heads as well as adding additional hardware needed to be available. A simple, streamlined system of purchasing the kits also had to be present. Aside from the customization aspects, there was also a need to allow consumers to be able to save their kits, share them through social media, and locate participating dealers through a geo-location based search. In the end, all of these requirements would compose a complete, engaging, fun experience for drum kit consumers and position the Mapex brand as an industry leader and innovator.

2 Challenges The first challenge in developing this application was storing and displaying all the images and data that would provide the ability for users to have complete control over their custom configurations. After identifying all the different drum types, the different sizes for each type, the number of shell finishes and the number of hardware finishes it was determined there are over 500 million possible kit configurations. This meant there would be a large quantity of images and a robust platform would be needed for storage as well as a quick and efficient way of retrieving and swapping images. Separate from the images, the actual data is managed through an on-site instance of Microsoft Axapta and this needed to seamlessly sync with the web application. KHS also required an authentication component for the website that would allow users to login in order to save and retrieve kits, share via social media and initiate a purchase. Bit-Wizards and KHS did not want to overwhelm the user by asking for an extensive amount of data so it had to be kept simple and require only a small amount of information. However, at the time of purchase, additional information needed to be gathered in order to contact the consumer and identify a location for shipping. Sharing via social media presented a challenge as well. Social networks work by allowing only text and a single image in a given message and since a custom kit would be composed of multiple images positioned on top of each other, this presented an obstacle. Bit-Wizards had to find a way around this without creating composite images and storing them on the server, bloating the storage quota with single, temporary files. The purchase process brought a couple additional challenges to the project. The first was the need to dynamically create an invoice or parts lists with correct prices based on custom logic from the choices in the kit as well as composite images of the kit. This invoice had to be printable and available as a PDF download as well as attached to the auto generated s after a consumer requests a quote. The second challenge was developing a geo-location based search to allow a consumer to locate participating dealers within a given radius of a zip code. Aside from the requirements and challenges in providing the solution to the end user, KHS also needed a robust platform for the application to allow full management of the content and data. This platform needed security, allow for quick and easy updates, and also provide all of the control necessary for KHS to be self-sufficient with the application moving forward. The final encompassing challenge was to identify a solution that not only provided all of the requirements and experience, but would work across platforms and devices. An interactive solution like this typically lends itself to a Flash or Silverlight application, but a lack of support from mobile devices eliminated these options.

3 Solution "For the development of the MyDentity online customization tool, we had a fairly aggressive wish list. We needed a simple and intuitive interface that would enable our customers to experiment with a large array of design parameters quickly and with minimal effort. While competitor versions focus on capability, we focused on simplicity. We added the challenge of allowing the customer to share their creation through social media and make their purchase through a network of offline independent retailers in a non-integrated sales channel where transactions between consumer and dealer, and dealer and supplier, are not easily or electronically traceable. Bit-Wizards was able to deliver a tool that not only accomplished those immediate goals, but gave us a fully flexible platform that will enable us to keep the MyDentity dynamic and scalable." Mike Robinson, Director of Marketing, KHS America Bit-Wizards developed a solution using Kentico CMS 6.0 as the content management system for this project. Kentico provided the authentication mechanism, data management interface and integration with Windows Azure and SQL Azure, all necessary for the high availability and high performance requirements of the project. Kentico was also the perfect choice to solve the need for KHS to be able to fully manage the application and be self-sufficient after the project completion. Bit-Wizards chose to leverage many Windows Azure components to address the issue of having such large quantities of images and data and the need to store and retrieve them quickly. The web application is deployed into a large Windows Azure instance that connects with a SQL Azure database, and also leverages Windows Azure storage and the Azure CDN (Content Delivery Network) for the images. This complete solution solves the need for high availability while performing at the highest level under any processing load. It also provides instant scalability and eliminates the need for KHS to manage servers and hardware. For solving the need of a highly interactive and fast user interface that gives a user complete control over creating fully customized configurations from dynamic data, Bit-Wizards leveraged the jquery Javascript framework in conjunction with ASP.NET and AJAX (Asynchronous Javascript and XML). The jquery code was written to handle all client side functionality; including the ability to select, move, rotate and layer the items on the stage. Dynamic parsing of image source attributes, based on user selections, provided the ability to quickly swap out drums and finishes without changing the position of the items on the stage. AJAX gave Bit-Wizards the ability to perform server side functions without disrupting the client side elements by causing full postbacks. In order to save the details of a user s kit to the database which includes the selections, positions, rotations, and layering, Bit-Wizards serialized the data using JSON (Javascript Object Notation). This allowed all data for a configured kit to be stored in a single column in the database. Upon retrieval of a saved kit, it was simply deserialized and put back in place on the stage.

4 To solve the issue for the need of single composite images for sharing on social networks and via , Bit-Wizards again leveraged the JSON serialization and passed it to a custom.net image handler they developed to combine the images into one. This image could then be sent as an array of bytes, as opposed to storing it on the server, improving performance and reducing the storage costs for KHS. When it came to purchasing options, Bit-Wizards developed a custom solution, again using jquery, and a.net PDF generator for the invoicing. They also leveraged Kentico s engine to handle the delivery of s to the required parties with the generated PDF as an attachment. Bit-Wizards also wrote custom stored procedures that query a database of zip codes with geo-coordinates to handle the dealer locator functionality. As for achieving the sync of data with the on-premise Microsoft Axapta instance, an SSIS package (SQL Server Integration Services) was written and installed that syncs data from the existing database to a table in SQL Azure. Bit-Wizards then developed.net code to compare that data against the existing data within Kentico and add, update and delete as necessary. This process is developed to run as a scheduled task or on demand. Result The end result was the exact, complete and interactive experience that KHS desired. The application gives the consumer the complete power to create a fully-customized drum kit and initiate a purchase at price points far lower than other drum manufacturers. The custom drum tool was on display at the 2012 NAMM (National Association of Music Merchants) conference in Anaheim, California where it won 2 prestigious Best in Show awards and positioned Mapex for a Company to Watch award. The site launched publicly on March 1st, 2012 and received over 23,000 unique visitors in its first month. Within the first 6 weeks, users created and saved over 4,000 unique kits and shared over 1,400 of them through Facebook, Twitter and . The program is still too young for hard sales analytics but an analysis of the trends, early data, and market response shows that it should far exceed KHS initial goal for gross sales for the first year.

5 Technologies ASP.NET 4.0 Windows Azure Windows Azure Storage Windows Azure CDN SQL Azure SQL Server 2008 R2 SQL Server Integration Services (SSIS) ADO.NET Visual Studio 2010 Microsoft Axapta Kentico CMS 6.0 jquery JSON AJAX Expression 4 HTML5 Key criteria for selecting Kentico CMS Kentico was chosen as the CMS for this project for many reasons with the primary reason being its support for the Windows Azure platform. This project needed the highly available, highly performing environment that Windows Azure, SQL Azure and the Windows Azure CDN provide. This ensures consumers are always getting the best experience possible with no interruptions. Kentico s robust framework and features also provide tools that simplified the development. The built-in security, authentication model, and web parts effectively handle the needs for user registration and logins. Kentico s engine keeps the task of distributing s during the purchase process quite simple. Also, data controls, such as repeaters, were used heavily throughout the project and saved significant development time. Kentico also provides the perfect UI and management capabilities that allows KHS to quickly and easily manage content, data, and settings moving forward. This is important as it empowers KHS to be self-sufficient thus, saving them time and money by eliminating the need for a development staff.