SFJAZZ

Overview

Founded in 1983, SFJAZZ is the largest non-profit jazz-presenting and educational institution on the West Coast. They present over 300 performances each year at the SJFAZZ Center located in San Francisco.

SFJAZZ's site was rigid, non-responsive, and did not translate the excitement and experience of attending a performance at their center. Their mobile site was clunky and provided a disconnected UX and brand experience from what visitors saw on desktop.

My Role

As the UX/UI designer on the project, I was involved in the discovery process to help identify goals for the new site and understand challenges on the current site. My team and I traveled to the SFJAZZ Center to conduct 2 days of discovery workshop sessions that would help inform our UX and UI decisions.

Data and Insights

A patron survey that received over 500 responses had been previously conducted and provided some of the following information:

• 57% of patrons said "Yes” to having viewed the SFJAZZ website on a smartphone or mobile device.

• 30% said that the time and day of the week of the performance were “Very influential” in their decision to attend. 40% said they were “Somewhat influential.”

• 56% of patrons said that their familiarity with the genre/style of music performed was “Very influential” in their decision to attend. 33% said it was “Somewhat influential.”

This information indicated that mobile definitely needed special consideration when improving the site experience. The responses on what influenced performance attendance helped inform filters that were included on the site’s calendar page.

Design

Leveraging elements from the SFJAZZ brand such as color, typography, and patterns, I developed a design system that was bold, loud, and energetic.

Because the style of music was so influential in a patron’s decision to attend a performance, I provided components that would allow the SFJAZZ team to highlight significant pieces about an artist and their background. The ability to pull in video and music was also important not just in helping with decision-making, but potentially exposing visitors to an artist they may not have heard before.

I also provided a dynamic content component that can pull performance cards from a series collection in their CMS. This was helpful in allowing SFJAZZ to cross-promote offerings and doing so with less manual labor.

Calendar

Presenting the large breadth of events SFJAZZ holds each year in an easily navigable manner was a challenge I addressed within the design of their calendar page. Patrons are able to drill down to what matters to them via a series of helpful filters. SFJAZZ was interested in finding ways to incentivize membership to non-member visitors while browsing through their offerings. I highlighted statuses within performances such as "members only" to create more interest in learning about member benefits.

Navigation

Their navigation was designed in a way that would allow the SJFAZZ team to curate and highlight pages from different sections of their site, driving users to the latest and greatest content.