Warp Records
25th Anniversary

UX / UI DESIGN · FRONT END DEVELOPMENT · DATA ETL

Personal Project
2014
Project Overview
Warp Records is a British independent record label founded in 1989, being the home base of many influential electronic music authors such as Aphex Twin, Autechre, Squarepusher, Boards of Canada, Bryan Eno and more. In 2014 the company celebrated its 25th anniversary. As an old-time fan of the label, its artists and the subculture they represent, I wanted to create some interactive piece showing the superb work these people have produced through the years.
_
I worked on this project a few hours every weekend for about a month, guided by the curiosity of finding
hidden jewels in Warp's website, and as an opportunity for me to freely experiment and (hopefully) improve my design and coding skills. I enjoyed it a lot :)
Project screenshot
Timeline Visualization
Javascript, Angular, D3
The UI's main element is a timeline stacking all of Warp releases cover images, grouped by month. The timeline is projected in a 3D space with pretty tight camera movement constraints. The idea is to navigate it as it was a simple scroll (forward/backward in time) yet providing a sensation of depth, travelling in space.

A side panel list and search box (left) provides an easy access to particular artists the user might be interested in. When an artist is selected, an informative side panel (left) shows all the available information about him/her/them: a bio/description, links to social network profiles and full list of releases. Additionally, the artist's releases in the main timeline are highlighted and linked visually with connective lines, representing the artist's historical trajectory within the label.

Selecting a particular release (either on this panel or in the main timeline) shows yet another panel (right) with its details: release name (and link to the official website), artist name, release date, track list and cover image. Also, if available, it show additional media such as video footage, audio samples, etc.
Initial tests and exploration
As I couldn't find a data source I could use right ahead, I started by writing a web scraper script to get all the contents I needed from Warp's website. This took a while since the HTML code was not consistent accross all pages. Once I had the data in a strctured format, I proceeded as I typically do in this kind of project, playfully plotting the data in different ways to see if anything interesting popped up. I love this stage of tinkering with an open mind as there's always little treasures behind every corner.
See below for some screenshots of early tests.
Final version
Besides the goal of creating an engaging experience when presenting the massive amount of talent published in the label's history, I felt it to be very important to provide easy access to discover more about the artists and their work. For that purpose, once I was satisfied with how the timeline worked, I added the artist and release details panels with external links to Warp's website, YouTube, Soundcloud, Twitter, etc... as well as integrating all available media within the app itself.
I was pretty happy with the final result. You can watch a video demo below.
FacebookTwitterInstagram