Is it possible for a website to breathe? Can it expand and contract in response to the content it’s delivering? How can it provide an experience that is parallel to, and at the same time profoundly different from, visiting the physical site it complements? SFMOMA’s Design Studio set out to answer these questions as we created the online embodiment of our new identity. This article describes the thinking behind the website’s design and our aspirations as we move forward.
The previous iteration of sfmoma.org was almost ten years old, and its approach to content—and its outdated backend system—no longer supported the institution ideologically or organizationally. Having just finalized the design of the museum’s new visual identity, we were eager to translate our brand concepts, such as “welcoming,” “open,” and “surprising,” into the digital space.
After research and discovery was finalized, analytics reviewed, and visitor journey maps completed, we felt we had a solid understanding of how we wanted to engage with our online visitors. The site needed to reflect a new approach to content, one that evolved alongside the development of our new identity.
The design process began with our backs to our computers: sketching with pen on paper. This allowed us to develop concepts and approaches and evaluate them without the distraction of visual elements like our custom typeface and color palette. This initial phase left us with a set of guiding principles that we would refer to throughout the design process, and served as the basis for what would eventually become our user interface.
- The visually dynamic program of the museum takes center stage
- Translate the concept of openness into an approach that provides clarity and focus
- Present varying types of content sequentially to provide multiple perspectives while allowing the viewer to focus fully on whatever most interests him or her
- Assume that visitors will scroll, given the evolution of the web and the pervasiveness of mobile platforms
- Maintain a play between peace and energy
- Offer multiple paths of discovery without being overwhelming
- And, because we felt like it: make the search box REALLY big
Our new visual identity was easily translated to the digital space, and the home page became a cinematic portal to the contents of the website and the museum. With large, moving images and pared-down navigation, we prioritized user experience with an aim to provoke curiosity. Pure and simple, eye candy invites you to explore further.
The new sfsmoma.org homepage
Ask a person on the street what they might see at SFMOMA, and nine out of ten will say “exhibitions” or “art,” so it made sense that those pages would take prominence and embody the attributes of our overarching conceptual and visual approach.
On our Exhibition pages, large, seductive images fill the window, setting a mood that immediately draws in the visitor. As visitors scroll to learn more, the main image moves to the background, enveloped in a “fog” that begins to emerge from below. Variations in visual depth create a peaceful tension: differentiating types of content while at the same time providing focus.
Did you say “fog”? Yes, we did. Fog is a part of life here in San Francisco and we felt compelled to integrate it into the site. Images are submerged in or emerge from fog as a mechanism to reveal or obscure them. Fog and other city climatic conditions have influenced both the physical and the digital SFMOMA: they are defining elements of the new building’s architecture, a visual metaphor on our website, and the inspiration behind the new institutional color palette of grays, white, and warm red. Our minimal approach to color on the new sfmoma.org foregrounds the rich colors of the collection and program.
The design and content of our Artwork pages exemplifies the museum’s obsession with objects and the people who make them. These pages display artwork images at a size that was previously impossible, as well as jumping-off points to carefully selected content. This is just one example of how online visitors experience our collection in a way that is parallel to, but very different from, a visit to the physical galleries. This approach also helps mitigate what we’ve come to call the “tyranny of the related,” which can easily fatigue users browsing a website that offers deeply connected material without context about why that content is related.
And what better way to communicate the breadth of our content than through a full-screen, filterable Search? We created a robust filtering system that allows the visitor to drill down not only by categories such as “artists” or “exhibitions” but also by decade, color, medium, and size. As you refine your search with filters, you will see a sentence progressively written out at the top of the page that reflects the criteria of your advanced search.
Our aspirations were to design a site that offers the best possible user experience through superior navigation, large and inviting images, and a subdued and refined user interface. We are only in phase one of this goal, and hope that you will keep coming back to see how sfmoma.org evolves as we iterate and respond to the changing needs of our visitors.
