Case Study: Atomic Rose
Atomic Rose is an up-and-coming Honduran Indie/Dream Pop Band making strides in the international scene with a recent debut in the Spanish Mad Cool Festival. The aim with this web development project was more centered around capturing the essence of the band through the visual elements present in the design all the while taking steps to ensure that UX elements and code optimization were not neglected. The result? An optimized, visually appealing and interactive showcase of the band’s identity.
Web Design Process
Usually, when embarking on a web development journey, the first step is to create the organizational framework for the website in order for development to follow a structured approach. While this might ring true when the website in question is for a corporate brand and certain functions or database structures must be prioritized over design, this is the exact opposite when dealing with a creative project.
When undertaking the task of creating a website for a band such as Atomic Rose, the artistic design process takes the lead and we must begin our journey by establishing a uniquely original identity through the visual elements chosen for the project. Thus, the first step we took was scheduling a meeting with the band to understand what makes them unique and what they wanted to communicate to their fans and talent scouts.
After taking the necessary time to understand the band’s vision, it became clear that we had to lean into several visual elements that were already present in their unique branding. We were provided with many photos from a recent photoshoot they had booked which was characterized by long exposure shots that created a sort of ethereal look; as if time was standing still. After not only analyzing the visual content but also listening to their music, we decided to mix these long exposure shots, vinyls, grainy backgrounds and old tv frames for a paradoxically modern retro look.
What is our goal?
First and foremost, the goal of a website is to strengthen credibility and build an online presence. For a band, this might not be as important but it is still one of the main reasons to create a website. After all, a website visit is the first thing on the agenda for promoters, show coordinators and industry professionals alike. Adiditonally, it is crucial to be able to redirect traffic to streaming platforms, showcase merch, enable fans to stream previews of music, and to announce releases and upcoming events.
UI Elements Creation
After establishing a clear understading of the band’s goal, it quickly became apparent that not only had the creative process been slightly unconventional, but that the customer, or in this case fan journey would also be quite unique. Over the years we have created strategies whose ultimate goals are to drive web traffic from other sources like social media and print advertising, but in this case the opposite was true. In fact, we had to drive traffic away from the website and towards streaming platforms, social media and physical venues. In order to do so, we had implement several integrations with spotify, instagram and youtube.
Retro TV Video Player
One of the main elements that the band requested was a video player to showcase their latest releases and drive traffic to spotify and youtube. After a brainstorming session, we decided upon a retro tv frame with a transparent background that contained a their latest video playing on repeat.
Spinning Vinyl Music Player
Within the music section that contains all of the band’s releases in cronological order, we decided to create a spinning vinyl music player. The cover art for the album or single was used for the Vinyl sleeve and a spinning record that moves towards the right when hovered over was added behind it to simulate an old record. We also added a modern looking video player to create the modern retro look we sought.
Fully Responsive Event Calendar
Our next task was to design a simple and intuitive event calendar for fans to be able to consult prices, locations and calendar dates for events. In order to add this functionality to the website, we created a calendar which has a list view and calendar view that can be swicthed along with an event page which contains information about the venue such as the location, links to event website and an integration that allows you to add the event directly to your google, outlook or icalendar.
Additional Features
On top of all these UI elements that were chosen and tailored to cater to the band’s needs, we also implemented special widgets that allow for the integration of spotify playlists, instagram feeds and image galleries along with a customary contact form for interested parties to be able to contact the band for inquires about live shows or collaborations.
Challenges
We encountered many challenges along the way; among them, creating a cohesive styling throughout the whole project which proved to be a bit harder that we first thought. We had to tweak many elements and create many CSS classes that were unique to this specific project, as opposed to using UI libraries. However, the biggest challenge by far, was creating the transparent tv video player.
When tackling this specific issue there was a lot of trial and error. First, we attempted to create separate elements for the tv and the video and we created a superposition through different z index hierarchies. This proved futile because it caused the elements to behave erratically across different devices, so we moved on to the next solution. We then decided to treat the video as one element and incorporate the tv frame image within the video. This involved extensive research around different video formats and the concept of alpha channels in order to find the best solution for quality and compression while retaining transparency.
Even after deciding that the best approach would be a webm video file with VP9 codecs, this too posed a problem, because certain browsers on apple devices have no support for aplha channels on webm files. Even so, we believe that we arrived at the best possible solution. We were forced to compromise on file size but after implementing a javascript function that identifies the browser a user is utilizing by way of the user agent object, we were able to serve user with webm or mov files depending on their browser of choice.
All in all, this was an ambitious project which led to our team gaining a lot of new experience along the way while being able to deliver a visually unique final product.
