Mike Smick UX Sketch Sub Page Image

Brian Peck Voiceover Project

Project NameBrianPeckVoice Website Redesign
TaglineProfessional voiceover marketing site
Project SummaryCreate a new website for Brian Peck to match his personality and to highlight his works all on a single dynamic page.
ClientBrian Peck
Date or TimeframeAugust 2018 – October 2018
Tasks & ResponsibilitiesLogo design, site wireframe, high fidelity mockups, obtaining content, copy editing, site development / grid, implementation of various media players, redrawing some graphic content, implement smooth logo crawler, analytics
PlatformsWeb
Design Tools / UX MethodsXara, Photoshop, Bootstrap
KPIs / AnalyticsUnique visits, email clicks
Team / CollaboratorsMike Smick, Brian Peck

Brian is somebody I’ve known for many years. He has been doing voiceovers and commentating for many years in television, radio and sports. We discussed his latest website design. He had a multi-page site for years but saw the benefit of paring it down to a single page and combine the media and demos all in one place.

Creative and Development Process Notes

We discussed the overall feel he wanted. Brian has a target audience for a lot of his work based on the persona of his voice and his character variants. He wanted to ensure he was playing to those strengths in the atmosphere of the site design. Particularly his affinity for surfing and beach life he needed to be present as a reflection of his laid-back voice persona. Unlike many clients, Brian had colors and imagery he was after so those discussions he brought to me before I needed to query him. It was just coming together with an organization of the content pulled together into sections that made sense.

  • The orange and blue color scheme and logo treatment that resembles the “Santa Cruz” brand. Thankfully a font was readily available to use to make a treatment.
  • Audio and video clips, arranged in a simple accessible way.
  • Logo scroller needed would be another dynamic visual on the page. Because of his work in TV production, the scroller made for a reflection of that and showing the different companies he worked for is an establishment of credibility.
  • Contact is going to be via email. Getting right to the point, no special contact forms, no popups, just click and the email client opens with subject and body pre-filled.

Even though this is a single page, and a static HTML one at that, it still presented challenges to put in the media content, leveraging modals and simple playback, when a new clip was played, any previous clip would automatically end their playback. Also the scroller was probably the best one I could find at the time that I needed to rejig for logo content that would loop with a comfortable equi-space at each go ’round.