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.
Challenges
Poor user experience
- The old site was unattractive. These guys are experts in audio, but the web is a visual medium. My goal: make Sound Advice look as good as they sound.
- Outdated HTML/CSS was created before smartphones and was virtually unusable on a mobile device. Pinching and zooming around a desktop site on your phone is not acceptable in 2020. They needed a modern, responsive solution.
- Bad audio listening experience: samples were played from an MP3 on a blank screen.
- There was hardly any information about them. How will people get to know and trust them?
- Sound Advice has an incredible list of major clients that weren't prominently displayed!
Internal issues
- Years of hard work was buried in bloated lists that didn’t showcase their latest/best.
- Raw code backend made content editing/updates a hassle.
Solution - Design for a defined core audience: media marketing executives.
- Quality graphic presentation to impress visually oriented clients. Updated branding and a design system provides a cohesive visual style. A website is like a house, if it’s not pleasant to be in, you don’t want to spend time there.
- Prominent list of important clients to establishes more authority than the best copy-writing.
- An updated site structure contains minimal pages and prioritizes accessibility.
- A modern, responsive layout delivers an optimal user experience on every screen.
- Focused CMS-driven portfolio to showcase only recent/best work.
- Dynamic SoundCloud integration for an engaging listening experience backed by key artwork.
- A content management system and the Webflow Editor lets the Sound Advice team update content independently. No bloat!
Design Process
Phase 1: Strategy
Before we could start designing I needed to understand two things clearly:
- The internal needs of Sound Advice
- 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:
- Experience, expressed as a prominent client list (logos)
- Acclaimed audio samples on the home screen so they can jump right in
- Information about the team
- Easy ways to get in touch from any page
Content Architecture
A new website structure based around identified user needs provides essential information in one scrollable page. Supplementary pages contain additional information.
Phase 2: Visual Design & Branding
Again, this was our starting point. We agreed to start fresh, retaining only the original logo.
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.
Direction 2: Billboard - Punchy and loud with impactful type and imagery. The boldness and conversational tone worked well, but it didn't feel welcoming.
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.
Subtle hues and shades complement the primary orange and plenty of white space provides a fresh, welcoming environment. Anyone would enjoy living here.
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.
Development
Development was done in Webflow without writing a line of code... almost. I'll get to that.
- Translated design system from Figma
- Recreated desktop page layouts
- Created optimized responsive layouts for 5 display scales.
- Built interactions for elements like buttons.
- Created a content management system for dynamic content like audio spots and team members.