Behind our redesign of The Fondation Cartier’s website
In their unique light-filled glass building, The Fondation Cartier pour l’art contemporain organizes a program of exhibitions based on either individual artists or themes. They also commission work from artists, hereby enriching an important art collection.
A little over a year ago the people at The Fondation Cartier approached us. They wanted to enhance their online presence. Additionally they wanted to show their acclaimed collection of artworks on their website, for new audiences to enjoy. It consists of works by artists as diverse as Balthasar Burkhard, Wim Delvoye, Gary Hill, Patti Smith and David Lynch.
Given our expertise with clients in the fields of arts and culture, Base appeared a perfect match. Needless to say we were excited to start working with a cultural institution as renowned as The Fondation Cartier. Even more so when we learned about the challenges that lay ahead…
Getting started
As with any new client, we started out with a series of workshops and research on the project’s goals and target groups. Once we had these mapped out, we were able to better understand the needs of the The Fondation Cartier and its audiences.
And they were plenty: the website was outdated, a pain to edit and its performance was subpar. There were also too many disconnected online platforms under the umbrella of The Fondation Cartier: website, ticketing, e-shop, satellite websites and social media. So without going into too much detail, we quickly realized that we had to create a more coherent digital presence for The Fondation Cartier to support one of its main goals: inviting new audiences into a dialogue about contemporary art.
One thing was certain: by opening up their art collection online, they would reach new audiences, far beyond France. However, most of them would never visit their beautiful building in Paris. That means that even more than before, the website would become one of the main touch points between brand and public. And so we wanted it to be memorable, similar to the unique experience people currently have when visiting their building.
Visiting an exhibition at The Fondation Cartier in Paris is a special experience. The unique glass and steel building full of light, the garden, the music, the art… We wanted to echo that experience with the design of the new website. (Jacques Letesson, Managing Director)
Challenging the institution’s visual identity
One of the first things we did was pushing The Fondation Cartier’s existing visual codes a bit. The logo is set in Baskerville, but we preferred to use a serif typeface that performs better on screens. We opted for Bell, which is close to Baskerville.
Additionally we wanted a sans-serif that pairs well with Bell, and that remains very legible in small sizes on screens. Knowing that a custom font would give The Fondation Cartier a more distinct look, we designed FCartier. We made it a very readable screen typeface, but still added humanist elements: curves to make it more arty, French, feminine and generally less neutral.
The custom designed typeface, alongside Bell, gives The Fondation Cartier a refreshed personality and helps creating a more coherent online identity.
As you can see from the slides above, we also introduced a purplish blue as a new key color and a cute but neutral face. It’s the front of the brand new chatbot. You got that right: a chatbot!
A chatbot as your personal guide
Part of The Fondation Cartier’s commitment is to make contemporary art more accessible. For that they go beyond the usual. To give one example: for their exhibitions, they try to find people that are closely connected to their topics. These experts then act as mediators, welcoming visitors and engaging them into a dialogue.
As The Fondation Cartier has always promoted curiosity, creation and discovery, we decided very early on to experiment and push the boundaries of what cultural institutions do on the web today. We decided to create a conversational interface as a layer on top of the website.
That is why today, upon arrival on Cartier’s new website, you are greeted by a fully automatic chatbot:
In a way the chatbot is The Fondation Cartier’s online mediator: it answers all common questions and helps you discover the world of the foundation. It makes the relationship between art center and audience more personal, and ushers the intimate gallery experience into the digital world.
But the chatbot also provides a new way of experiencing a website that will still be familiar to many, as most young people nowadays spend more time in messaging apps than they do on social media or by surfing the web.
We conceived the bot as an ideal guide. We wanted it to be welcoming and visitors to feel at ease with it. We made it simple, helpful, involved with users’ requests and at times, slightly witty. (Clara Lalix, copywriter)
(In order to keep the focus in this article, we will write a more in-depth article about how we went from initial idea to first chatbot prototype in a later post.)
Creating a more coherent digital presence
The next thing we did to address a core problem, was design a more logical and coherent navigation flow for visitors of the different Fondation Cartier websites. Whereas before, people had to find information about an exhibition on the main website, then search for that exhibition again on a separate ticketing site, we unified that user journey. You now just go to the exhibition page on the main website and buy tickets there. It makes more sense.
Another example: rather than having just icons linking to their social media channels on the home page, we blended that external content into the website. One example is the Deezer and YouTube modules we designed: we now allow visitors to directly play audio snippets and videos about an exhibition or artist on the main website. It creates a much more complete experience.
Including this content from social media was of course also a way to create a bridge between the website and the very active communities surrounding it.
Settling on the information architecture
Obviously, we revisited the old information architecture. Once we had drafted a first rough site structure we were happy with, we used Treejack to test it. We love this tool as it lets us test a website navigation directly with users, without the influence of visual design. We tested in both French and English, then iterated based on the results of those tests. It finally led to the information architecture we have online now.
We tested different versions of the design and information architecture with the website’s target audiences. It helped us take informed decisions based on real data instead of our own ‘designer gut feeling’. (Delphine Volkaert, designer)
This is important because of course a website is a practical tool as well. Tests like these help us make sure people find the right information quickly. If anyone wants to learn about an artist, visit an exhibition, or attend a live show, they are able to find details immediately, no matter what situation they are in.
Now that we had an information architecture that had proven its worth, the next big step was the content. But content needs structure first.
Content needs structure
Especially for big institutions like The Fondation Cartier, a good content structure is mandatory. A solid structure makes sure content relations can last for years beyond the initial website they serve, and may be reused through many different channels if needed.
Just to give an example: a good content structure would allow the communications team to send out a newsletter showcasing the five latest commissioned artworks from female artists. Or it could make it easy to query the database to display all sculptures that have yellow in them. Connecting content in meaningful ways like this could eventually fuel an open API which would even allow others to make interesting connections with the content. It’s a solid foundation to build upon.
Our developers took weeks to figure out the most meaningful content structure. We mapped it, discussed it and challenged it, then set up Craft CMS to allow the communications team at The Fondation Cartier to enter content following that structure.
Linking content with the chatbot
And that brings us to the internal mechanism of the chatbot. We have to admit that this idea of a helpful visitor guide was easier said than done. It’s proven to be quite an ambitious challenge. Most bots online today are very limited in scope: ordering pizza, showing you nearby restaurants, comparing products on an ecommerce website, that kind of stuff. The scope of The Fondation Cartier’s chatbot goes pretty wide though.
It took us weeks to first schematically map, design, then code the conversational interface. This was a huge adventure into a very new technology. (Quentin Delcourt, developer)
The chatbot’s brains are fueled by our content structure. Its internal mechanics are mostly managed by Dialogflow. We custom developed the connection between Craft and Dialogflow. That’s a lot of geek speak to basically say that the editors at The Fondation Cartier only have to update their content in once place: Craft CMS. The website will then obviously reflect the changes, but the bot will take note of them immediately as well. No need to educate it on the matter separately.
Both Base and the team at The Fondation Cartier have worked together to great extent to educate the chatbot, a process that will continue indefinitely. For now, you can see the bot as a smart and deeply enhanced search functionality. It’s sometimes a bit clumsy but every conversation will make the bot smarter and improve the user experience. (Morgane Van Oncem, project manager)
Visual design in Sketch
Once we had the structure, real content examples, functionalities, typefaces and the color palette all set, we started designing random possible website components to experiment with the visual mood. Just like visiting The Fondation Cartier’s building in Paris is a light-filled and spacious experience, we wanted the website design to breathe space and light.
An elegant light color palette for certain module backgrounds helps trigger the right mood. The colors will subtly evolve based on seasons and time.
Occasionally throughout the website we use a blur effect to layer content on top of other content. Like when you zoom in on an artwork or when a visitor starts a conversation with the chatbot. It reminded us of looking through the windows of the glass building.
True to the spirit of the building — open, transparent, immersive — the website can be experienced as a walk through the spaces of the The Fondation Cartier. (Delphine Volkaert, designer)
We designed a big amount of responsive components in Sketch, based on real content. Most of the pages you see on the website today are built fully modular. It allows the team at The Fondation Cartier to add content to the website in an editorial way: they can pick and order website modules in different varieties based on the types of content they add. It gives editors a lot of flexibility within a controlled design system.
Inclusive design
Fondation Cartier pour l’art contemporain believes that contemporary art is for everyone. And we believe the same about the web. So we designed and built this website as inclusive and accessible to everyone as possible.
Blind people or others who use assistive technologies to browse The Fondation Cartier’s website, will find it easy to navigate and find the right content. Color blind or partially-sighted users will be able to digest the content easily. So will keyboard users. And everyone else. We don’t want anyone to feel left out.
We worked together with web accessibility expert Roel Van Gils to ensure the website is fully WCAG compliant. While developing, we tested daily with screen readers and assistive technologies. (Maxime Palau, developer)
Progressive enhancement
As we coded with an approach of progressive enhancement, we ensure the website is usable on all kinds of devices and in different circumstances. People using older mobile phones, adblockers, unreliable internet connections or even text browsers, will be happy to have quality access to The Fondation Cartier’s online content.
We start with basic semantic HTML and layer newer technologies on top of that to enhance the visitor experience. This enables us to make the content accessible in all kinds of circumstances. (Lou Verdun, developer)
Because we wanted as much people as possible to get access to The Fondation Cartier’s content, we went the extra mile in supporting older browsers. Together with our high accessibility standards, it made us reconsider some JavaScript plugins and libraries we had been using for years. Either because they weren’t inclusive enough, or they rendered content inaccessible on older browsers or devices.
Halfway into the project, we decided to change the CSS layout engine. With the project growing bigger, applying any simple visual change had us wait more than 10 seconds to see the changes. We couldn’t go on with this. The engine change nailed it down to a reasonable 2–3 seconds. It influenced the front-end development pace for weeks, but we still believe it was worth it. (Steve Piron, developer)
Launch is just the beginning
After all this hard team work at Base, we’re very happy to launch the new website for Fondation Cartier pour l’art contemporain today. It took us well over a year from the initial meeting until launch, but it was a fantastic journey.
In some ways, the launch of a website as big as The Fondation Cartier’s feels like the end of a project. But in just as many ways, it’s only the beginning. In the coming weeks and months we will continue to work together with the great team at The Fondation Cartier to further educate the bot, test the usability of the website, and unify the art institution’s digital ecosystem.
