Whisper & Company

Music eCommerce Website Development

Introduction

Whisper & Company were commissioned by SoundKool Musical Instruments, the premier music retail chain in Cambodia, to create a website that would act as digital storefront, essentially increasing the number of available retail locations, without the usual hassle that brick and mortar stores require. 

At Whisper & Company, we love music, and so this was an irresistible opportunity to help share one our of key passions across an entire nation. 

Of course, like every project, this was not without it’s challenges…

 


 

The Challenges

There were numerous challenges in this project, some technical, and some were more to do with launching a large eCommerce operation in a still-developing economy that is still in it’s infancy when it comes to buying and selling online.

So, let’s begin.

1. Taking an already established (awesome) brand, with tight brand guidelines, and transferring that look and feel to the web.

SoundsKool had already invested heavily in their brand, and the results were awesome. Whisper & Company needed to maintain, or exceed, this standard for the digital side of the operation. This meant working within the tight brand guidelines, and yet still unleashing our creativity to create a memorable experience. 


2. Creating a fully functional, flexible, and scalable eCommerce platform for a business that is not technology focussed, and doesn’t have an in-house technical team, but still allow the end users to have a world-class experience.

SoundKool’s team, quite rightly, wanted to focus on doing what they do best, delivering high quality musical education, advising musicians on their instrumental purchases, and providing a wide selection of original leading brand musical instruments, for the best possible price. This clearly meant that Whisper & Company needed to create an eCommerce environment that was as hands off as possible, but without compromising on our standard for the end user experience, which is the key value that we bring to the table to help our customers become, or maintain, their market leader position. 


3. Making the site extremely user friendly, fast, and mobile centric.

The target market is young mobile users who are inexperienced with eCommerce, in a market that doesn’t have the internet speed that we’re used to in major locations such as London, Singapore, and San Francisco. This required continuously reviewing every step of the build process, to make sure that users on slower connections could still enjoy the full web experience and, most importantly, were able to successfully and enjoyably purchase online.

 


 

Our Approach

Let’s tackle the challenges one by one, and discuss our approach to each of them.

1. Taking an already established (awesome) brand, with tight brand guidelines, and transferring that look and feel to the web.

For this project, we immediately started our research on yellow websites across the internet, to seek inspiration, while also finding examples of where the colour yellow was used inappropriately.
We found many examples that we thought abused the strength of the colour yellow, and we made a point not to repeat this mistake.

So, early in the project a decision was made that the SoundKool website was not going to be predominately yellow, but instead focus more on the white and black aspect of the brand, with generous hints of the yellow colour and the square motif that make the SoundKool brand so memorable. This is important because SoundKool do not sell their own product range, but are distributers and retailers of other brand names such as Yamaha, Roland, and Casio \[check with Gabi.], and so these big name brands also need room to breathe and have their showcase. 

This is visible in the details like the fact that the images on the category pages are square, and that the related product navigation buttons hint at the logo

This decision was taken to ensure that the website would be easy to navigate, allowing the user to access every category with one click of a button, while still making it clear that SoundKool is *both* a school and a retailer. 

2. Creating a fully functional, flexible, and scalable eCommerce platform for a business that is not technology focussed, and doesn’t have an in-house technical team, but still allow the end users to have a world-class experience.

Working with companies that do not have their own in-house technical team always posses a unique set of challenges. What might be a five minute job for one of our experienced front-end designers, might take an inexperienced in-house staff member an entire day. Given this fact, we made the decision to completely lock down the underlining code base and server from the SoundsKool team, and keep them working in the abstracted environment of a easy to use CMS, that needed to have a visual way of interacting with pages and making changes. 

Our choice for this project was a mixture of Wordpress, with the WooCommerce and Visual Builder extensions. This meant that once we had built the styles and templates for the site, the staff could easily deploy new pages and keep everything looking awesome. 

On top of this, we created an easy to use excel template to import the 1000 or so products that SoundKool stock into the website. 

The entire website is built on an impressive stack of technologies, but the hassle of keeping everything running is completely abstracted away from the client.  Without sharing too many of our in-house know-how, here’s a breakdown of some of the ways we managed to achieve this. 

  • CloudFlare / We used the CloudFlare CDN (Content Delivery Network) to dramatically decrease load times by caching as many requests as possible, while also increasing security by implementing a WAF (Web Application Firewall) to keep the bad guys out, and also enabling an encrypted connection to the end user.
  • InstantClick / We intelligently start to load the next page of the website before the user has even clicked on it, to make sure that navigation feels almost instant. Clever, huh?
  • Image Auto-Optimisation / Again, because we wanted to take the workload away from the SoundKool team, all images uploaded to the website are automatically resized and optimised for the web, because this is not something that adds value to the business if the team spends their time on it.
  • Serving Images and Scripts from a subdomain / We host all media and script files on static.soundkool.asia, to allow the mobile devices to download everything in parallel, instead of queueing downloads. This can dramatically speed up the website, and it’s automatically done for every image and script.
  • Finely Tuned  Cloud Server / We chose a dedicated Singapore-based cloud server with generous amount of RAM and two top of the line Intel CPUs to power this website, to ensure that SoundKool can continue selling, no matter how popular their website becomes. We installed an NGIX front end web server, something that is typically associated with significantly more expensive projects, and an Apache server to handle the backend. Memcached was also installed to further increase the speed.  And the icing on the cake? The entire server is automatically monitored 24/7 by our systems and status updates are published every fifteen minutes on our http://whisperand.co/statusStatus Page and updates to the latest versions of all software are automatically deployed if tests are successful, so security and best practices can be maintained for years to come.


3. Making the site extremely user friendly and mobile centric.

Nowadays designing a website is not really about designing *one* website, but multiple versions of one website, for many different device sizes. If handled improperly, this can mean that mobile devices are treated like second-class citizens, and have to suffer a sub-par experience. 

At Whisper & Company, that’s simply not acceptable. We believe that everyone, regardless of the device they are using, should be able to have the same awesome user experience. 

The main challenge here, was that our aggregate client data showed that 92% of users would visit the site via their mobile phone, probably via a 3g connection. This target market is highly inexperienced with eCommerce, and so we decided to leverage their experience with apps such as Facebook and Instagram, and incorporate some of those key features to make the SoundKool digital storefront feel familiar. 

We solved this challenge by continuous user testing with members of the key demographic, and a constant effort to make things as simple as they could be, but no simpler.

 


 

The Result

The final result is that we managed to create the leading music shop website in the country, and one that leapfrogs international and regional musical instrument retail websites in terms of design, user friendliness, and functionality.

We wish SoundKool the best start with their journey into the world of eCommerce, and we will always be behind the scenes, supporting them in spreading our joint passion for music across the country.


Sounds Good? We Think So!

Get in touch today to explore how we can make your brand look awesome online.

All done. A digital rockstar will be in touch soon regarding your project.