Fine Arts Museums of San Francisco

Web-hosted audio amplifies the important stories behind artworks
San Francisco, California, USA
- Beautifully simple, intuitive audio interface supports visitors’ in-gallery experience
- Multilingual tours can be easily accessed from any device
- Built within our client’s existing CMS-powered website
- Detailed analytics insights facilitate continuous improvement
- Following the success of this project, Cogapp was pleased to be engaged by the museums to support their online ambitions into the future
The Fine Arts Museums of San Francisco (FAMSF), consisting of the de Young and Legion of Honor museums, make up one of the largest public art institutions in the United States. These world-class museums, situated in Golden Gate Park and Lincoln Park respectively, are home to popular exhibitions and unique collections popular with residents and tourists alike.
FAMSF’s mission is to tell stories about its art through a lens of inclusivity. Most artworks won’t receive an extended wall label in the gallery, so audio content provides the perfect opportunity to tell these compelling stories, inviting visitors to take a closer look at the works on display.
Teams at FAMSF take pride in producing high-quality, absorbing audio tours for their exhibitions. Audio tours were previously hosted on a third-party web app, which presented a number of issues to the museum. These included:
An inconsistent digital experience
No opportunity to help visitors discover related digital content
No process to keep permanent collection tours up to date
No way to gauge what was working well and what could be improved
No archive of past tours
Lack of context for tour artworks, there was no gallery label text
Building a brand new CMS-controlled audio tours feature directly within FAMSF’s website enabled us to address all these issues, and more.

Building a better online world for visitors
Audio tours are popular with a wide range of visitors, and provide good value; they make artworks more accessible and exciting, and create a deeper connection to the art by giving additional context.
Tours can now be discovered and accessed easily by anyone on the FAMSF website. Visitors looking for more in-depth information about any artwork within FAMSF’s collection will also find any relevant audio directly embedded on the artwork pages.
Hosting all audio within the FAMSF website removes friction from the visitor experience and provides multiple opportunities for people to discover other FAMSF content.
Accessibility
Accessibility is baked into the audio tour experience. We ensured that content editors are able to add transcripts to each of the audio elements to provide text-based alternatives for each of the audio files.
The components and UI are modelled to meet the full WCAG 2.2 A and AA success criteria. Our quality control processes ensure we check all work against these guidelines throughout development with a combination of Axe dev tools, manual testing (include cross-device and cross-browser testing), and screen-reader tests.
Search
It’s easy for visitors to find what they’re looking for within an audio tour.
The intuitive search on tour pages enables visitors to search by audio stop, artwork title or artist, and returns relevant results as you type.
We know that audio tours aren’t necessarily explored in a linear fashion. Visitors may skip stops, take alternative paths, or break for lunch in the middle. Our in-tour search helps visitors find what they need, regardless of the route they take.

Multilingual capability
Audio tours can be created in English, Spanish, Cantonese, Mandarin, and Japanese - catering for the most commonly spoken languages of FAMSF visitors. The FAMSF website is not fully multilingual, with this in mind we built multilingual functionality into the website in a ring-fenced, but extendable way. It’s easy to switch between available languages within a tour, and there’s a smooth transition to other pages. If there is a decision to make other areas of the website multilingual in the future, the approach we have taken ensures our work can be extended.
A tour can also include artwork labels. This is a big benefit for visitors who want to experience the gallery in their own language. Constraints over wall space mean that in-gallery labels are usually only available in English, but FAMSF can publish artwork labels on the website in multiple languages alongside audio, or independently. This enables visitors to find out more about artworks, whether it’s in their own language or using assistive technology.
Discoverability
Having launched the new website a couple of years ago with a different partner, FAMSF are keen to continue to improve and enhance the site. This project is Cogapp’s first project with the team in San Francisco and as such we were excited to orient ourselves with FAMSF’s audiences, their team, and their technology stack.
Having an audio tours feature within the main website rather than a third-party application means visitors can easily discover tours before, during and after their trip to the museums.
Previously, tours could only be reached by scanning a QR code. These codes will of course live on as an instant way to get to a particular tour. But visitors will now find a dedicated ‘audio tours’ area within the website, and FAMSF can easily promote audio tours in attractive ways using their existing website components. For example, to highlight a tour on the homepage or an exhibition page.
Web-based audio also increases the discoverability of other content.
As mentioned above, these new audio tours replace a third-party web app. In this previous app, visitors were not offered any onward journeys from their audio tour to the artworks or exhibitions themselves. Our new tour pages maximize opportunities to spark a visitor’s curiosity and allow them to dig deeper and learn more. Each audio item has a ‘View in collection’ link to take the visitor to the relevant artwork page. Each tour also features related content; the population of this content is automated by default but can be curated by the digital team to offer visitors an onward journey related to the exhibition, artist, theme, or anything else they choose.
Building a better online world for FAMSF
Flexibility
The museums’ teams previously suffered from a lack of control and flexibility over the content of tours. Previously, once a tour was published, there would be no further iteration or improvements. As a result, some permanent collection audio tours were so out of date that visitors who took them up would sometimes demand refunds, and visitor experience teams were reluctant to promote the tours. On the occasions when tours had to be promoted, staff had to spend time on workarounds such as printing out a current list of audio stops.
Our web-hosted, CMS-editable audio tour solution means that FAMSF admins can add or remove tracks from a tour in a matter of moments, making it easy to keep the permanent collection tours fresh.
Any audio item uploaded to the website can be used and reused in multiple places. This means that custom tours can easily be created for curators or the education team to support particular visits or programs. It also means FAMSF can test out new formats and other ideas for tours. FAMSF have total control over what tours are available on the website, so if they want to offer visitors the chance to experience audio from past exhibitions, they can easily do so.
CMS-managed audio also gives the opportunity for artworks to have audio, even if they aren’t part of a tour. A related piece of audio will automatically display on an artwork page if it’s connected using the artwork ID, reducing admin tasks for CMS editors so they can focus on creating value elsewhere.
Measurability
Analytics data from previous tours was limited and unreliable. This project needed to ensure that the success of audio and tours could be measured, so we prioritized an advanced analytics setup.
For each audio item, we are tracking impressions, clicks, completions, and progress. We’re also tracking progress through playlists and tours. This enables us to zone in on engagement, and pinpoint any dropoffs within the audio experiences so we can understand whether any changes are needed to keep visitors listening.
Additionally, impressions and clicks of the transcript and links within the audio player are all counted, which will reveal the extent to which visitors interact with each of them.
Custom dashboards in GA4 and BigQuery surface the statistics that are important to FAMSF, and help them make meaningful observations from all these measurements.
Creating an environment where everyone can do their best work
Discovery
During the discovery phase of any Cogapp project, we gain insights and knowledge about the space we are working in. We test our assumptions and develop our understanding of what success looks like.
This project had a strong starting point with a clear set of technical requirements. To help align our work with the bigger picture, we held stakeholder interviews with the FAMSF teams closest to audio tours and labels. This allowed us to dig deeper into what the new, web-hosted versions of these features needed to achieve.
When we summarised our findings, we understood what people valued most when it came to tours and labels, and we could clearly see the biggest opportunities for us to deliver features that visitors and staff would really enjoy. We also had a good awareness of the challenges involved, so we could plan for how to mitigate them.
If we were to boil down our key findings they are as follows:
For visitors, it is essential that the tours are visually appealing, easy to navigate, and catered seamlessly for accessibility needs and alternative languages.
For the tours to be a success, it is key that the FAMSF team embrace the new tours system. We needed to free up the team to focus on the creative elements of tour production rather than the logistics of publishing tours. Primary aims were to ensure it is easy to keep content up to date and fresh, and ensure authoring processes support their robust governance around content.
User testing
User testing towards the end of the project gave us some great insights to improve the audio tour experience.
The best way to assess whether what we’ve built works as well as we’ve intended it to is to get real people to use it. A smooth journey through tours was an essential outcome of this project, so we insisted on an extended period of user acceptance testing that gave the FAMSF team time to co-ordinate testing outside the project team. We were delighted that FAMSF were very up for this, too!
The key journeys to test were taking the tour in English, in another language, and using assistive technology. As a result of the testing we got some great feedback on fundamental elements of the tour page. For example, we needed to change the position and appearance of the language switcher to help people find it and understand its purpose. We needed to tweak the tour search to include even more non-latin characters from alternative languages. These changes were simple to make and had a huge impact - proving the value of user testing, which is something we always advocate for.
Bringing visitors closer to art
Audio tours are a great companion for museum visitors. They can be accessed by anyone and can be taken at the individual’s own pace. FAMSF’s audio tours provide insightful context that brings visitors closer to the artworks on display.
Our web-hosted audio tours have made the FAMSF experience even better. The new tours are accessible, multilingual and easy to navigate. FAMSF can promote tours from anywhere on their website, and the tours offer relevant onward journeys to visitors, increasing opportunities for discovery about artworks and artists, and enabling more people to enjoy content elsewhere on the FAMSF website.
We’re pleased to say that following the success of this project, Cogapp has been appointed to manage the entirety of the FAMSF website and we’re busy working on some exciting new projects with the team in San Francisco.
Fine Arts Museums of San Francisco Audio Tours
Find out more
We'd love to speak with you about our work, please get in touch.