Cinema-Sonic

 
 

Cinema-Sonic is a Seattle-based music and audio production company, specializing in creating high quality orchestral recordings for film, games, commercials, and TV. 

I was hired to create their visual brand strategy as well as design their website. 

 
macbook,-iphone-c-s.png
 

My Role

I was a one stop shop for this project

  • UX design, UX writing and UX Research for their website, including prototyping, usability testing.
  • Visual design & branding (logo, all print materials and digital assets).
 
 

Cinema-Sonic is an small agile group of musicians, producers, and audio engineers, who came together to create a new type of production company. They mentioned wanting their web presence to match their internal focus on musicianship, which is a contrast to their competitor's focus on expensive gear.  "Gear is easy, but what makes us special is the quality of our ears and the caliper of our musicians."   

STAKEHOLDER Goals

  • Create a website and visual design branding before the GameSound Convention in Los Angeles.
  • Create a streaming portfolio of past work in both audio and video formats.
  • Focus placed highly on orchestral services.
 
 
 

The USERS

Cinema-Sonic's ideal users are indie game developers, independent movie producers and producers of TV & commercials. By concentrating on newer producers to the industry, the thinking is that the users are less likely to have strong allegiances to another audio production company and that these users will then adopt Cinema-Sonic as "their own" audio group.  User's are interested in "the Feel of the sound," creativity of writing and quality audio production. User's are incredibly invested in their "baby", and want a small hands on company to help them finish all the details with an individualize and curated approach. 

USER Goals

  • To easily navigate through the website, finding information about services needed. 
  • To be able to listen to sample audio, and sample video.
  • To be visually & auditorily delighted in the experience.
  • Easy contact and quick response time to inquiry.
 
 
 

FLOWS

Services flows, provide users with education about each service, all ending in an opportunity for the user to contact Cinema-Sonic via the "Tell us about your Project" page.

 
 
user-flow1---c-S.jpg
 
 

COmpetitive RESEARCH

Most of the other high end audio production company websites I researched had huge lists of Gear: microphones, mixing boards, outboard gear, instruments and down to the tiniest minutia of gear. This is definitely the driving distinction that Cinema-Sonic wanted to divert from.  They offer the same services, but as the stakeholders said "We can record anywhere, borrow any gear we might not have, but it's not the gear that makes the music. It's the musicianship and the ears."

Take away: Website should provide a personalized approach with a focus on musicality, while still educating and describing the services offered. 

 

 
 

SITE MAP

 
fwR0kdCyS4iL7HXt5IHi2g.jpg
 
 

Early Wireframes

 
RgiWNJMZTI2u20MKV75wbQ.jpg

Early Site Map

 
DPkWvRANScWaZsPhLD8E2A.jpg
 

 

WEBSITE FEATURES    

  • Streaming video portfolio: Stakeholders wanted to be able to update the playlist in the future, so we created a vimeo playlist that syncs to the website.
  • Streaming audio portfolio: Again, the team is able to easily update this portfolio by adding songs to their soundcloud playlist
  • Services page: Description of what services are provided. clearly spelling out all the types of services offered, with a link to audio examples as well as inquiry page. 
  • Team members: This page links to the bio pages for each member in the Cinema-Sonic team.
 
 
Artboard 3.png
Artboard 4.png
 
 
 

VISUAL DESIGN 

Cinema-Sonic wanted the imagery and visual design to invokes a vintage audio / cinematic feel.  

  • I develop a logo. 
  • Created social media pages and associated digital banners and profile imagery.
  • Printed material for GameSoundCon: business card, 3x5 card advertisements, letterhead, promotional banners.
  • Created a responsive website with parallax scrolling. 

 

 
Cinema-Sonic-style-page.png
 
 
Screen Shot 2017-11-14 at 6.20.53 PM.png
 
Screen Shot 2017-11-14 at 6.21.22 PM.png
Screen Shot 2017-11-14 at 6.17.34 PM.png
 
 
 photo: Dai Ross Photography

photo: Dai Ross Photography