Album Art Exchange Website Project Share: Ballyhoo Score Awaiting client review n/a Date Published 14 September 2022 Reading Time 5-Minute Read Website design enabling a global album artwork community to share their passion. Project Overview In a situation very different from 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. Who is 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. 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. 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 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 the genuine user experience for those who legitimately wanted to view and download artwork. We achieved this successfully by developing a sophisticated system that 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 that pulls album and artist information alongside each album displayed. Monetisation As Album Art Exchange provides 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 a 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.