Audio Media Grading

Product UX/UI Branding

Site design/build and brand refresh of the emergent audio grading platform of renowned DJ and new owner, Steve Aoki.

ROLE

Guro Design Project

Principal

CONTRIBUTION

Brand update
Logo refresh
Website design and build
Media label designs

Overview

I was excited to once again jump into a music related project like LaneOne, and also related to collectibles like PWCC. The company was a recent aqcuisition and was in dire need of a rebrand. The product update would primarily focus on the homepage and media submission pages, with collections and static pages being the secondary priority.

Brand Refresh

The Color Palette

Little Red Corvette
#e04328
RGB: 226, 68, 41
CMYK: 6, 89, 96, 0

Paint It Black
#212121
RGB: 33, 33, 33
CMYK: 72, 66, 65,73

Red Red Wine
#c82307
RGB: 159, 39, 22
CMYK: 24, 100, 100, 22

Kiss From a Rose
#faeeee
RGB: 254, 237, 235
CMYK: 0, 7, 4, 0

The direction was to maintain the record graphic and update the logotype and text with a modern and fresh take. The overall scope of the update was to showcase the AMG brand and its products in a modern and professional way establishing credibility. I came up with a baseline design and moved it into browser asap as launch dates were closing in. The content provided was as detailed as a napkin drawing, so there wasn't much to work with.

The Homepage

I opted for a graphic representation of the media cases rather than a realistic rendering as it seemed to highlight the media and labeling better. Because all available album art was flat I ended up rendering them isometrically by piecing together found images of album spines and cd and tape cases. In the highlight section that followed the hero I created a more realistic styling of the case using a vector format so it was scalable to different media types and also transparent so we could efectively layer it on any background. I also developed coded labels for each media type as well as a holographic emblem for autheticity. The 'Why grade?' section was a clear and concise value proposition for the product, highlighting the essentials, while the module beneath showcased how easy the submission process was.

Media Submission

The existing media submission page was a simple form, no graphics and convoluted in displaying selected options. I solved for this by adding a cart sidebar that progressively updated and tallied as paid features were added. The media image would also update as the display type was selected. The sidebar scroll locked and followed you down the form, always in view.

AMG preferred keeping Magento as the commerce and CMS platform. The existing baseline templates for this platform were not very perfomant. I found after research that the theme, HYVA, could be fully customized and had the speed that would alleviate performance issues. Integrating it would come with it's share of hiccups, but was necessary to future-proof the site.