Personal Project   

Objective: Branding/Web Design

About: Personal project which focused on designing a more user friendly website for Audio Technica.

Creative Process

How can you sell product with a user hostile site?

As someone who enjoys music and audio equipment, specifically headphones, Audio- Technica is a company that interests me the most with their value and variety of product options. The problem with their site from a UX perspective, is that it is difficult to navigate. Below is their current website as of June 2017.

Initial Sketches

When coming up with a frame, I wanted to create it with the intent of mobile first. This included many block elements that could house product shots and additional info. Not only did I want it to be mobile friendly, but simple enough that a prototype could be created quickly by a web designer.

Layout & Imagery

The initial blocks were transferred over digitally, but was altered to fill the full container of the page for the homepage. Banner images were created, and each "block" on each webpage can easily be taken apart as if it was LEGO bricks stacked on top of each other. Thankfully, Audio- Technica has high-resolution product shots readily available for anyone to download to use. I took advantage of these assets for almost all of the imagery.


When it came to finding the appropriate typography for the site, I wanted something bold that would attract visitors to click and find out more info which would hopefully lead to a purchase. On the previous site, you had to jump through hoops just to even locate a product page. Sans-serif was the way to go, and I used fonts from the Roboto, Moon, and Franklin Gothic family to create a hierarchy that was pleasing to the eye and only highlighted the important info.


The current site lacks color, with the occasional blue and orange popping up time to time on the site.  I incorporated a teal swatch to replace the blues and oranges, and incorporated it as an accent color with black being the dominant color. It gave the site life, and made the current site look like an advertisement taken from the last page of a newspaper.