A Site for Sound

Sound Advice Hollywood website redesign

Sound Advice is an audio marketing studio in Hollywood creating content for the biggest brands in media and entertainment.

When I met its cofounders in early 2020 they were concerned about generating new client leads after COVID-19 wiped out their primary method - word of mouth. They needed a way for people to find them online and their existing website wasn’t cutting it.

Sound Advice Website designed circa 2009

Challenges

Poor user experience

Internal issues

Solution - Design for a defined core audience: media marketing executives.

Design Process

Phase 1: Strategy

Before we could start designing I needed to understand two things clearly:

  1. The internal needs of Sound Advice
  2. The external needs of potential clients

Armed with this information we could now asses the old site and determine what needed to change to better serve both parties.

The Sound Advice team needed an attractive visual overhaul with an intuitive backend that allowed them to focus on great content.

I examined the existing site, what it was doing and where it fell short. Next, I met with the team and outlined desired changes. A critical element of a successful site would be their ability to maintain it themselves. To make this possible I sorted content into two categories: dynamic and static. Dynamic content would employ a content management system, using pre-styled elements for repeat content like audio spots.

Marketers wanted critical info at a glance to instill confidence and start a conversation.

If it takes them a second to look for what they need they're already gone. Critical info:

Content Architecture

Site-map comparison after restructuring to align with content strategy

A new website structure based on identified user needs provides essential information in one scrollable page. Supplementary pages contain additional information.

Low-fidelity wireframes used to refine content structure

Phase 2: Visual Design & Branding

Until now appearances hadn't been a priority, but their audience demanded otherwise. We agreed to start fresh, retaining key brand assets like their logo and primary orange.

Original Sound Advice Home page

I created a few visual directions that could appeal to both the audience and Sound Advice as a company. The team is known for their pizzaz and humor, as well as their professionalism. That needed to come through in the graphic design of the site.

Direction 1: Hi-tech - Sophisticated with a dark cinema theme and fine details. While we liked the professionalism, it lacked an essential friendliness.

Sound Advice visual direction 1: Hi-tech

Direction 2: Billboard - Punchy and loud with impactful type and imagery. The boldness and conversational tone worked well, but it didn't feel welcoming.

Sound Advice visual direction 2: Billboard

Direction 3: Startup - Here we found the perfect balance of bold and friendly, with large scannable typography and fun graphic elements like squiggles and offset frames that added personality.

Sound Advice visual direction 3: Startup

Subtle hues and shades complement the primary orange and plenty of white space provides a fresh, welcoming environment. Anyone would enjoy living here.

Sound Advice brand - logo
Sound Advice brand - colors
Sound Advice brand - type scale

Next, I created high-fidelity wireframes in Figma which would be the final step before moving to Webflow. I defined as many elements as possible at this stage to assist a smooth transition to code.

Sound Advice high-fidelity wireframes/mock-ups

Development

Screens designed in Figma, translated to Webflow

Development was done in Webflow without writing a line of code... almost. I'll get to that.

To be continued...

Back to blog