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.
Sound Player #
One request was a sound player. My first task was to work out how we could do this with a static site. Using Front matter on releases the Speedy Admin could upload a sample mp3 for any tracks and then I looped through the releases to create a playlist. The player is quite a simple affair using a smattering of javascript.
Ecommerce #
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
My Role
- Design
- Front-end Development
Tech Stack
- Jekyll
- Siteleaf CMS
- Github Pages
- Snipcart
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)
Twitter
Threads
Instagram
LinkedIn