We contacted our friends at Diabolical to pitch the idea of a new website.  The original website was quite outdated and in desperate need of a redesign.  We started our project with the owners of the record store to understand needs and wants for their new online space.
Brand Insight:
Adam started developing  the name and logo himself since he was 18 yrs old.
They have:
Youtube videos of a lot of past shows. 
Instagram videos. 
Records of the month - they use an image of record cover
Local band - they use an image of band photo or album
Explore:
Visual options and UX/UI for Adam, Alana and local band of the month. Keep content concise and easy to update. 
Moving image to visually demonstrate the atmosphere/essence of going to shows at DR.
Users:
Group looking at them just for records
Group just looking at them for shows. (majority)
I Started with wireframes based on the sitemaps we created to understand the content that was needed on each page.
Motion was topic discussed with the shop owners, Adam and Alana, they expressed their desire for motion to convey the feeling of visiting a record store. Above was an early iteration of using motion on the site. I tried to link it to the most fundamental core of their business, the vinyl records.
The graphic language I established was based off of the record buying experience as a whole. Here I show a view of the site components, the calendar contains multiple layers slightly staggered.  This calls back to the feeling of shuffling through a stack of vinyl LPs.

Another section of the site using the same layering graphics.  This section includes the upcoming concerts being held in the shop and the concert/band archive.

Diabolical Records is located on historical Edison Street in Salt Lake City.  Adam and Alana the shop others see Edison street as a part of their brand. Its location in reference to the rest of the city, the neighbors, and the nightlife.  I wanted the about page of the website to express the quiet, yet vibrant, personality of this street.
I started by taking photos with my phone from different angles on the street. However I wasn't able to get the full view of the city as I hoped. So I began to walk around the surrounding buildings paying attention to scale and size, keeping the small and secluded Edison Street in mind. I then started my drawing with the first exploration shown above. Below is my drawing of Diabolical records surrounded by Salt Lake City.

We used this illustration to introduce the about page with Diabolical as the main focus in the center of the web page. Again continuing the theme of layers, My friend Josh took the illustration that I had made, and added this parallax effect to the webpage.

A few custom icons designed Based off of the stores components, the open sign hanging in the front window, and the shop owners Adam and Alana. These two are a fundamental part of experiencing Diabolical Records so I had to include them in the illustrations. Below is a final illustration we chose to include on the homepage.

Here I show another illustration animation to promote a viewer to sell their records to the shop.

The Final Design
Arriving at the final was fairly easy because of the time spend on the small components of the sight first that later influences the layout of the site as a whole. Below are a few final designs at varying widths to ensure a responsive website on both desktop and mobile.
Back to Top