Derricks Music Website Project Share: Ballyhoo Score Awaiting client review n/a Date Published 2 September 2022 Reading Time 9-Minute Read We created a powerful custom web platform, allowing users to purchase event tickets and albums online. Project Overview Derricks Music was 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. The Technical Details 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. #HTML5 #CSS3 #STRIPE #JAVASCRIPT #TWIG #SASS 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. Outcomes Derricks Music are really happy with the website and it’s new functionality – allowing customers to have a seamless experience and shop tickets like never before. Since launching in October 2021, the website has received increased levels of traffic, with visitors spending over 20% more time on pages compared to the previous year. What’s more, bounce rates are lower due to the website being mobile responsive – with the number of mobile users increasing by over 130%, compared with the previous year, and transactions tripling.