TL;DR
We developed a powerful custom web platform that allows the album art community to share and download super-high-quality image files, with a focus on security and discoverability.
Who are Album Art Exchange?
Album Art Exchange is a US-based, niche community website that allows users to upload images they have produced by scanning album artwork at high resolutions.
Typically, users will make edits such as tweaking colours and removing imperfections created by the scanning process to ensure the images uploaded are true to life.
As well as uploading scanned images, Album Art Exchange allows users to rate and comment on the artwork uploaded, and most importantly, users are able to download any images they’d like to use personally.
The rise of the Internet of Things has given us the ability to play music across many devices, but high-resolution screens show up every pixel and imperfection.
Album Art Exchange attracts people who are passionate about music, and art. Many album covers are artistic accomplishments in their own right – and, understandably, users may want to download high-quality album artwork to replace standard low-quality images, or even no image, on their devices. Apple, for instance, places a musical note icon instead of an album cover when music has not been purchased directly from iTunes.
By downloading album art and uploading it to their music collection, users transform their devices into high-quality music artwork collections to enjoy alongside their tracks.
“Dedicated to collecting and sharing meticulously scanned and edited album cover art, for those of us who are ridiculously obsessive about such things.”
Project Overview
In a situation very different to how we usually win clients, as regular users of Album Art Exchange, we got in touch with the owner when we noticed the website was broken to offer our help. The company had had a negative experience with their previous freelancer and wanted to work with a reputable team who would cater to their needs, so it was great timing.
The website contained nearly half a million high quality images, with a large amount uploaded daily, so we had a lot of data to contend with. As well as the massive amount of data, it was not stored in an efficient or logical format – there were a lot of imperfections due to the neglect of the previous developer. As a result, the data required a large-scale migration to a more efficient and structured format, making it one of our most challenging projects to date.
Design
When designing the website, our main aim was to keep the look and feel of the website as simple and clean as possible, making it easy to use and allowing the artwork speak for itself. To achieve this, we decided to keep only the essential functionality visible at all times, with additional functions and information only becoming visible when needed.
A key element of the design is a dual theme option which lets users to switch between a dark and light colour scheme, allowing them to view the artwork in its best setting – a dark image will be easier to see on a lighter background, and vice versa. It turns out we created a very early version of dark mode, something which has now become the norm across many websites and devices.
- #HTML5
- #CSS3
- #JAVASCRIPT
- #WORDPRESS
Bespoke System Development
Album Art Exchange has a mass following of loyal users (over 32,000 at the time of writing), so has been built to handle significant levels of traffic – the site usually experiences tens of thousands of pageviews each day.
Security
Competitors are known to have crawled the site and stolen many pieces of artwork, including the rare album covers, so security was a great concern for Album Art Exchange. However, although we needed to up security, we did not want it to affect genuine user experience for those who legitimately wanted to view and download artwork.
We achieved this successfully by developing a sophisticated system which monitors access to all images, showing a watermarked version if the user isn’t logged in, or if we suspect they are actually a bot. This is effective as it allows real users to bypass this by proving they are a real human and logging in, whilst also improving the security of the entire website.
Desktop Only
In order to keep the cost low, we did not make the website responsive. This was an acceptable compromise as over 90% of visitors accessing the website were on desktop devices. There’s a temptation to go responsive on every website but we must let the stats inform this decision, particularly where budget is limited.
Autocomplete Search
We implemented an autocomplete function within the search bar in order to make it as easy as possible for users to find what they’re looking for, which is essential for such a huge database.
Wikipedia Integration
To add value for users, we have implemented a Wikipedia integration which pulls album and artist information alongside each album displayed.
Monetisation
As Album Art Exchange provide a free service, the site is completely self-funded. In terms of monetisation to raise cash for costs and development, we’ve incorporated integrations for Amazon and Google AdSense.
Amazon Sales Commission
An Amazon integration has been implemented which will show the related albums to buy when the user is searching for a specific album cover. If the user is to click through to Amazon from here and then make a purchase, Album Art Exchange will earn commission on the sale.
Google Display Ads
AdSense is also being used on the site to show Google display ads. The ads are placed unobtrusively in a side pane or within the content in order to retain high UX. This alone has been able to generate a steady monthly income to fund further development.
Since launch, we’ve seen 54 million website users on the Album Art Exchange website, demonstrating the benefits of user-centred design.
Based on website statistics for time periods from launch until June 2023.
- #Wikipedia Integration
- #Amazon Integration
- #AdSense Integration
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 295 5352, email to [email protected] or via the contact form on our contact page.
Contact us
Send us a quick message and we’ll get right back to you.