Screen Shot 2017-04-23 at 10.21.56 PM.png

San Francisco Ballet

Engaging new audiences through digital storytelling

Responsive.001.png

Engaging new audiences with artful storytelling

Overview

San Francisco Ballet is America's oldest professional ballet company. Presenting more than 100 performances annually, the Company has achieved an international reputation as one of the preeminent ballet companies in the world.

San Francisco Ballet came to Method with an antiquated web presence that limited their ability to engage with existing patrons and attract new audiences. We created a new digital experience to increase ticket sales, clarify and articulate the company's story, and foster broader awareness to the art form of ballet.

Outcome

The new website launched in September 2016. Initial analytics showed an increased conversion rate of 30%, with mobile transactions increasing 420%.

Awards 

Platinum A' Design Award for Web Design 
Finalist in Fast Company's Innovation by Design Awards 2017

Project Details

Client: San Francisco Ballet
Timeline: 8 weeks
Date: 2015
Studio: Method
sfballet.com
 

Contribution

Interaction design
Content strategy
Visual design
Design documentation

 

Method case study (Video)

 

Flexibility through a modular approach

To accommodate the Ballet’s repertory, holiday, and touring seasons, the website needed to easily adapt to distinct content needs throughout the year. We created an extensive series of content modules that leverage rich media to create an immersive, cinematic experience to draw in potential patrons. The SFB team can stack these modules to create larger content stories for the overall season as well as individual performances, leading to increased audience engagement and ticket purchases.

 

Home page comprised of stacking content modules can adapt to different needs throughout the year (video)

 4 of the 50+ module types created

4 of the 50+ module types created

 Modules used by SF Ballet to create performance detail pages, providing deeper context & driving ticket purchases 

Modules used by SF Ballet to create performance detail pages, providing deeper context & driving ticket purchases 

 

ticketing designed to build anticipation

The new ticketing process is organized into stages to help build excitement for the big performance. Some of the stages include: specific seat selection with sightline previews, opportunities to attend educational events before the performance, or to donate to the organization. Together, these stages enrich the ballet experience for patrons.

 

Top bar contains dynamic breadcrumbs that update as a user makes selections and serve as navigation through the process (video)

 

New content Speaks to diverse audiences

The new website serves as an entry point for learning more about ballet as an art form & increasing audience engagement. We focused on catering to different levels of knowledge, from first-time ballet attendees to life-long ticket holders. We also expanded the content development to include a wide range of subject matter, such as choreography, music, costumes, and set design. Now there's something for everyone to explore.

 
 The new Explore section gives SF Ballet a platform to more deeply engage with patrons through educational articles, videos, and collaborator profiles

The new Explore section gives SF Ballet a platform to more deeply engage with patrons through educational articles, videos, and collaborator profiles

The Artists section highlights the ballet's diverse group of directors, dancers, and musicians (video)

 Patrons can explore the legacy of the company through an in-depth History section and Repertory Archive

Patrons can explore the legacy of the company through an in-depth History section and Repertory Archive

 

Process

MODular Template structure

We created a framework for constructing pages with the content modules by identifying the core purpose of each page. This framework helps SFB scale our designs to other pages needed in the future while keeping the site cohesive. 

 
 Wireframes constructed with content modules & based in our page templates

Wireframes constructed with content modules & based in our page templates

 

TICKETING FLOWS

One of the biggest challenges of the project was creating a ticketing system that accommodates for SF Ballet's wide range of ticket packages as well as individual ticket sales.

 
 Sketching the various ticket package flows

Sketching the various ticket package flows

 Exploring the many instances of the dynamic breadcrumbs

Exploring the many instances of the dynamic breadcrumbs

 Purchase flow diagrams delivered to SFB and development partners, along with detailed design specifications

Purchase flow diagrams delivered to SFB and development partners, along with detailed design specifications

 Purchase flow diagrams delivered to SFB and development partners, along with detailed design specifications

Purchase flow diagrams delivered to SFB and development partners, along with detailed design specifications