The look and feel of music.

The San Francisco Conservatory of Music needed a brand and wesbite redesign to distinguish it from its peers on the East Coast. The resulting identity system and site is uniquely SF. Vibrant, forward-looking, and connected to a rich music and culture scene. Read the Mule case study or visit the live site.

SFCM homepage

San Francisco is alive with the sound of music.

The foundation of the new SFCM brand is a delightful and dynamic animated logo designed by my colleague Andy Davies. Graphic lines with the energy of live music build to a crescendo, revealing an abstract take on the Golden Gate Bridge.

As the designer behind the rest of the visual identity and website, this was a great note to start off on. (I like puns, and I won’t apologize for it.) I also got to jump into After Effects myself to create playful riffs on the logo, including variations that celebrate Karl the Fog, SFCM’s annual carnival, and SF Pride.

San Francisco’s vibrant music scene—campus is right around the corner from SF Jazz, the Opera, and Symphony—is one of SFCM’s key distinguishers (especially when you consider winters at an East Coast conservatory). Beyond representing the city in the logo, San Francisco vibes are also infuse into the color palette, which complements our “Golden State” yellow with an iconic red-orange and blues and lavendars students would find on hand-painted bodega signage and painted ladies as they explore their new city.

SFCM.edu navigation
Comprehensive navigation was essential to explaining SFCM's vibrant offerings.

With a breadth of opportunities for students, live programming for the community, and a large ensemble (see, I can’t be stopped) of talented faculty to highlight, navigability was a key concern for the new SFCM site.

A mega menu helps flatten the site hierarchy and surface important content from deeper in the site. It also means the most important actions on the site—requesting program information and applying—are never further than a hover away.

Clickable pre-headlines give context to content regardless of the path you took to it (unlike traditional bread crumbs) and provide an easy way to pogo through the levels of the site.

Calls to action on the SFCM site

Vibrant color washes on background imagery brings a sense of life and fun that students won’t find at other conservatories. The tone of the photo and copy direction we created for SFCM is an exciting promise that at SFCM students can create their own vision of a successful music career.

Related pages module
There are no dead ends in the design system. Every page ends with new discovery.

One of the guiding principles of the information architecture for this site was “No dead ends.” With as much to explore as SFCM has to offer, there is no reason a prospective student should reach the end of a page without finding something else that catches their eye. (Okay, unless that reason is they’ve started the application process!)