SoundsKool eCommerce Website. How We Built a Flagship eCommerce Website

Scroll this

Introduction

SoundsKool Musical Instruments, the premier music retail chain in Cambodia, commissioned Mäd to create an eCommerce website.

This increases the number of available retail locations without the usual hassle that brick-and-mortar stores require. (Sounds pretty cool to us.)

At Mäd we love music, because we are decent human beings. So this was an irresistible opportunity to help share one of our key passions across an entire nation.

Of course, like every (worthwhile) project, this was not without its challenges.

The more technical challenges that were faced on this project are covered here. Aka, all the hard work behind the scenes.

The client doesn’t even have to consider many of the different options and approaches, because that is what the team is paid to do!

That’s right, we’ll even do the worrying for you. 

The Challenge

There were numerous challenges in this project. Some were technical, and the rest had something to do with launching a large eCommerce operation in a developing economy that is still in its 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. Mäd 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 focused. SoundsKool doesn’t have an in-house technical team, the end users should still have a world-class experience.

SoundsKool’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.

They aren’t the tech guys. We are. This clearly meant that Mäd needed to create an eCommerce environment that could be as hands-off as possible. But we couldn’t compromise standards for the end user experience either.

This 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 are young mobile users who are inexperienced with eCommerce, in a market without 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. Users on slower connections can still enjoy the full web experience and, most importantly, enjoyably purchase online.

Our Approach

One by one:

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

Our research for inspiration started with yellow websites across the internet, 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.

The SoundsKool website would 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 SoundsKool brand so memorable.

The Opportunity to Cross-Brand

This is important because SoundsKool does not sell their own product range.

As distributors and retailers of other brand names such as Yamaha, Roland, Aria, and Casio, there’s a big opportunity to cross-brand.

These big name brands also need room to breathe and have their showcase.

As a result, the images on the category pages are square, and that the related product navigation buttons hint at the logo.

In the end, the website is easy to navigate, allowing the user to access every category with one click of a button. At the same time, it’s 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 focused. SoundsKool doesn’t have an in-house technical team, the end users should still have a world-class experience.

Working with companies that don’t have in-house technicals team always possess unique challenges.

A five-minute job for our experienced front-end designers might take an inexperienced in-house staff member an entire day.

As Simple As It Could Be, But No Simpler

Given this, we decided to completely lock down the underlining code base and server from the SoundsKool team. They could operate in the abstracted environment of an easy to use CMS that has a simple 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. 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.

An impressive stack of technologies makes up the website, while the hassle of keeping everything running is kept away from the client.

How we did it:

  • CloudFlare: We used the CloudFlare Content Delivery Network to dramatically decrease load times by caching as many requests as possible. A Web Application Firewall increased security to keep the bad guys out, and also enabled an encrypted connection to the end user.
  • InstantClick: The next page of the website intelligently loads before the user has even clicked on it, to make sure that navigation feels instant. Clever, huh?
  • Image Auto-Optimisation:  We built a system that automatically resizes and optimises media for the web. Soundskool will never ever even have to think about it.
  • Serving Images and Scripts from a subdomain: All media and script files are on static.soundkool.asia, allowing mobile devices to download everything in simultaneously (instead of queueing downloads.) Automatically done for every image and script, this dramatically speeds up the web experience.
  • Finely Tuned  Cloud Server: We chose a dedicated Singapore-based cloud server with a generous amount of RAM and two top of the line Intel CPUs to power this website. SoundKool can continue selling, no matter how popular their website becomes. NGIX was installed as the front end web server, typically associated with significantly more expensive projects. An Apache server handles the backend. Installing Memecache increased the speed.  And the icing on the cake? A 24/7 monitoring systems automatically monitors the entire server.

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 done poorly, this can mean that mobile devices suffer a sub-par experience.

That is simply unacceptable. Everyone, regardless of the device they are using, should be able to have an awesome user experience.

Data showed that 92% of users in this market would visit this site via their mobile phone, probably via a 3G connection.

This target market is also highly inexperienced with eCommerce. We decided to leverage their experience with apps such as Facebook and Instagram. We also incorporated their key features to make the SoundsKool digital storefront feel familiar.

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

The Result

The result of all this work speaks for itself.

A beautiful, well thought-out eCommerce website, the flagship site in its industry and market. The ROI for the client on this project has been awesome, with a large improvement in student sign-ups and online orders.

Scroll Up