Speedy Wunderground - Making music with the Jamstack
Speedy Wunderground is a label which started on February 25th 2013 with the release of “I Go Out” by Steve Mason & Emiliana Torrini. Comprising of Dan Carey, Alexis Smith and Pierre Hall, they have been releasing some amazing tunes over the last 6 years.
I had the pleasure of building their website way back then and it was most definitely showing its age and lacked any real functionality. A stop gap that lasted too long you might say. Luckily Speedy Wunderground were keen to revisit their site and improve the ecommerce aspect, they also had a few ideas about previewing tracks. Alexis and the team gave me a blank page to define the tech stack and with that in mind I suggested going with an approach that would minimise security issues and future updates.
The Tech Stack
We decided to go with Jekyll, a Static Site Generator (SSG) using Snip Cart to enable ecommerce and Siteleaf to allow the Speedy Team to update new releases themselves. This stack also meant we could host it on Github pages allowing easy development updates via Git.
With the Stack sorted we worked together to plan out what the site needed.
- A Basket/Checkout
- Responsive for all devices
- Shop Categories
- The website should be simple and easy to use bioth for the user and the person using the admin.
- A music player would be good.
- Focus should still be about the label and each release as we don’t have artists signed to us.
The Concepts and Build
As Speedy Wunderground had already released 3 Compilations it made sense to reference the design elements. The site was planned to launch alongside their Year 4 release, which was using black and white and the use of a 45 degree line was a constant.
Dan really wanted to incorporate some grainy photomontage that had also been used in some marketing.
Working with this I came up with a couple of quick Sketch concepts but got into the browser as quickly as possible so we could work together with a working prototype. This made it incredibly easy to make changes and try out colours and roll overs/animations.
What the client said
“I cannot speak more highly of Sush Kelly. He has been essential in the development and maintenance of the Speedy Wunderground website. Incredibly efficient and always there to offer useful creative input where needed. His knowledge and design has given us something we are incredibly proud of, that is easy to use and more importantly - looks great! “ - Pierre Hall - Marketing Manager”
Payment and basket functionality is handled by SnipCart. This is a great solution and can be applied to any type of site. The products template contains data attributes that are passed across when you click on the buy button. All the heavy lifting and credit card details are handled by Snipcart, possibly the easiest e-commerce functionality I have implemented!
The addition of Snipcart means there is load more transparency about the sales the site is making. The easy to use admin means the client can add merch or releases with relative ease.
The fact that the site is static means no plugin updates or databases to hack so it is a really low maintenance site that is quick to load.
Admin for the Client
Jekyll is super easy to build and deploy for a developer but what about Pierre updating his releases going forward? Enter Siteleaf - a solution that gives a standard web based admin interface for static sites.
Setting things up is as simple as connecting to a repo and then Siteleaf can understand Front matter fields to give a slick UI for the administrator.
Who was involved?
- Website - Speedy Wunderground
- Client - Dan, Lex and Pierre
- Front-end Development
- Siteleaf CMS
- Github Pages
April 2019 - Initial discovery work - understanding collating the required functionality, agreeing intended work.
May 2019 - Design concepts.
July 2019 - Main site build, addition of ecommerce and sound player.
September 2019 - Final sign off, launch and training.
Need help on a digital project?
Drop me a note at firstname.lastname@example.org or find me on and