Derrick's Music

Website Design

TL;DR 

We worked with Derricks Music to refresh and update their website, working with them to define their requirements and develop a powerful custom web platform that allows users to easily purchase event tickets and albums.

Project Overview 

Derricks Music were previously operating through a custom website built by Ballyhoo in 2011. We wanted to give this website a visual refresh, and ensure that it was responsive for mobile devices. 

In the back-end, we wanted to make use of current techniques to make the site more efficient and also also add more flexibility to the system, particularly to allow admins to list multiple ticket options for an event and multiple format options for an album. 

Who Are Derricks Music? 

Derricks Music is a cultural landmark based in Swansea, and has been at the heart of the music scene there for as long as many people can remember. In 2019 they celebrated 50 years of bricks and mortar trading.

We've worked with Derricks Music for over a decade, first developing a custom event ticket locking system for them back in 2008. Since then we've worked to maintain their website and add new features as necessary, including implementing new website designs and, at one point, an entirely new custom e-commerce system.

Project Brief 

Derricks Music has been operating through a website first built by Ballyhoo in 2011 - budget restrictions meant that we were only recently able to give the site the attention it deserved. Due to the age and ongoing development of the site over a decade, there were several issues to overcome:

  • With many additional features added over the years, the site was bloated;
  • The design was no longer fit for purpose;
  • We needed to focus on making the website responsive for mobile devices, and;
  • The code needed to be as efficient as possible for current and future functionality. 

Our Proposal 

Based on discussions with the client, we identified the following deliverables for Derricks Music:

  • Conduct a branding exercise to formalise the identity of Derricks Music and set the tone for web design;
  • Create intuitive pathways for users to find what they are looking for and make their purchase, while also keeping the site fluid for the discovery of new music and artists;
  • Develop a robust custom website platform to form the foundation for current and future development, and;
  • Design a responsive website that spotlights the Derricks brand identity whilst giving artist artwork room to shine. With 76% of users now visiting the site on mobile devices this was imperative.

The new Derricks Music website needed to perform technically to provide a seamless purchase experience for users but also do a lot of the hard work for music lovers looking to find new artists and experiences to enjoy.

Our ultimate goal is that Derricks Music, as a cultural landmark, will provide an online hub for the community to see what’s new and happening in the South Wales music scene as well as facilitate venues’ and artists’ outreach.

Design

Brand Guidelines

Derricks Music is a well recognised and much loved brand in the Swansea community - their logo is instantly recognisable and has been much the same for decades. However, we didn’t have a high resolution or vector version of this logo available and there was no brand identity other than the logo itself.

We were keen to formalise the Derricks branding and recreate all necessary logo files before proceeding with the current project. The signage on the Swansea store had recently been updated to a black version of the logo on a yellow background, so this formed the basis for documenting the brand identity.

We created some variations of the logo (including options for a logomark) along with complementary fonts and a colour palette. The resulting brand guidelines document can be used by Derricks beyond this project for internal use or when commissioning further design or print work.

UI & Web Design

The previous website was very dark in colour, using three-dimensional elements and textures which now feel outdated.

For this iteration of the site, we decided to opt for brighter and cleaner elements - ensuring that we kept the distinctive and bold colour combinations of the brand. A striking mural which had been created on the side of Derricks’ Swansea premises to celebrate their half centenary provided amazing inspiration, and a snapshot of the mural itself forms an abstract background for the website’s homepage hero elements. 

The contrast of black and yellow is a significant feature of the Derricks Music branding so this has been utilised throughout the website design, toned down with white and calm blues to convey key information and divide elements. Album artwork and artist imagery is given prominence throughout to ensure customer recognition facilitates the sales funnel.

Technical Overview

In many respects the Derricks Music site is a standard e-commerce website where users can select what they want to purchase and continue to checkout - at least that’s how it appears to the end user. 

Where this site differs from your usual shopping website is the inclusion of powerful additional functionality which provides admins of the site with extended abilities beyond standard e-commerce to:

  • Carefully limit how many tickets of each type can be sold and even limit the number that can be purchased in each transaction (we’re looking at you ticket touts)
  • Set published and release dates to allow admins to pre-load events and albums due to go on sale, and to allow the pre-sale and reservation of items
  • Allow customers to collect their tickets from the event venue, Derricks Music’s bricks & mortar store or have them posted out to them.
  • Add multiple dates to events, span tickets across multiple dates (e.g. for festivals) and provide tiered pricing for ticket type (e.g. seating/standing)
  • Intelligently up-sell relevant tickets for events when users are exploring albums, and up-sell relevant albums when users are exploring events
  • Promote local venues and the events they’re putting on, solidifying the relationship with Derricks Music and the businesses that are the lifeblood of the music industry

Additional considerations have also been made to provide failsafes to ensure events and limited edition albums are never oversold.

Site Structure

Navigation

We cleaned up the structure of the website, removing the Enquiries and News sections which weren’t being utilised (but keeping the Latest News ticker - a feature that staff can use to easily promote news in a few words). We also wanted to move from phrasing ‘Tickets’ to ‘Events’, with a view to reinforce the relationship between Derricks and local venues. 

‘Venues’ is a new addition to the site which lists all the local venues Derricks tickets for and promotes, along with current events taking place at each venue respectively.

Site Search

Our research told us that the search functionality on the website was popular, however the search results were not engaging. To tackle this, we created a more prominent search bar in the header to perform a universal search of the website and improved the functionality and result layout. In addition, more in-depth search features have been added to the main pages of the site, allowing visitors to search by keyword and order results alphabetically or by price. In the case of Events, users can also search by date range and venue.

Newsletter Subscription

Derricks Music has a regular email newsletter, featuring the latest releases, being sent to over 10K subscribers. We wanted to include a prominent newsletter subscription form throughout the site which we hope will increase the sign up rate by reducing the number of steps and making the signup more obvious. Subscription CTAs are also included during the checkout process when users add their personal details.

E-Commerce Features

Featured Status

Derricks Music can pick popular or newly released tickets and albums to appear randomly on the homepage hero image, as well as choose ‘featured’ venues. Throughout this project, we wanted to give more focus on the venues events were taking place at - thus building a function that allows admins to “feature” venues on the homepage too. Visitors can quickly see which events are coming up for that venue or promoter, and also click through to see full details.

Cross-Selling

The site automatically displays associated events and albums relating to an artist at various points throughout the site. On Album pages, for example, users are shown any upcoming events by the artist along with other album titles in stock. On Event pages, users will be shown all stocked album titles by the artist as well as any additional event dates and locations.

Stock Management

We employed some basic stock management on this site as some items are only available in very limited quantities. Once stock levels reach zero an item should still be listed on the website for the benefit of search engines but clearly marked as “out of stock” and purchasing should be disabled. 

To avoid adding on costly live integrations to tally with what’s being sold in-store, admins have been given the ability to record any shop purchases on the website system to ensure that the site reflects the number of items in stock as accurately as possible.

Stripe Integration

It was vital that we provided a slick checkout process with a secure and reliable payment system so Stripe was our first choice. The integration is clean and solid with customers never having to leave the site to complete their transaction. Stripe also provides administrators with a neat interface to monitor and manage payments, including processing refunds and managing fraud prevention rules. 

Further Development 

We already have a few feature concepts that we would like to create in future phases of development. These include Venue and Album Barcode Scanning and Seating Plans to give customers more flexibility and streamline processes for everyone involved in events - customers and promoters included.

How Can We Help?

If you are in need of a new website, a revamp for your existing website, development to work responsively or anything related to websites and the internet in general then feel free to get in touch. Any member of the Ballyhoo team will be happy to help and can be contacted by telephone on 0121 222 5780, email to hello@ballyhoo.co.uk or via the contact form on our contact page.

Contact us

Send us a quick message and we'll get right back to you.

We aim to respond to all messages within 1 working day.

Accreditations

Feefo logo Google Partner