Redesigning our website with AREA 17.
I’m happy to announce that we’ve just launched our website redesign. In selecting a firm we were looking for a team that could bring excellent design and strategy skills to the table and, also, a firm that would take our lead in engineering specifications, and would open source code and knowledge about the project. It took us a lot longer than we anticipated to find the right match, but the choice was clear when we landed on AREA 17.
Here’s a run down of our main objectives and the broad brushstrokes of how we handled them. Kemp Attwood from AREA 17 will expand in greater detail in posts that follow on the Barnes publication.
Telling the story of who we are.
First and foremost this is what a website should do effectively. Going into this process, we knew where our challenges were lurking. People had an idea of who we were — a collection of masterworks of impressionist and post-impressionist work installed in a unique setting — but there’s a larger story and we needed to be doing an effective job of helping illustrate it. It’s true — the Barnes has an enormously influential art collection, but we’re also a museum with a changing exhibition schedule, a teaching facility, a place where dynamic public programs happen, spaces that can be used for event rentals, an arboretum — the answer of who we are is a very complex “all of those things,” but our old website was mostly only reinforcing one thing — the collection.
We restructured the site to put different types of activities forward — notice the homepage works to highlight three varied things, but just three so we can maintain a focus. We also worked to bring certain aspects of our activities together and, as a result, we’ve consolidated “exhibitions” and “programs” into an area called “What’s On.” This helps foreground all types of activities equally while generating cross-traffic among them. The same thinking is behind the “go further” areas across most pages of the site — while this is somewhat expected in sites today, it was critical given our goals.
You’ll also see threads of our audience development strategy at work in the new design. In “What’s On” you’ll find a series of filters with labels like “free” and “family” and “social” — all of these represent ideas we might not be immediately known for, but in bringing forward enable audiences to discover us in new ways.
It’s also worth noting that many people are confused by our name — The Barnes Foundation — and wonder…do we give money to others? Well, we don’t— a grant giving organization is the one thing we’re not, so even though the formality of our full name remains, you’ll find we refer to ourselves more informally across the site as, simply, “The Barnes.”
Putting visitors first, ahead of staff needs.
This was the hardest thing to wrap our collective heads around — as a staff, we always want the website to reflect what we do and how we do it, but this makes little sense to visitors. While our tendency is to structure the web in a way that reflects the internal workings of the institution, visitors need very different things especially in how they navigate. One of our biggest goals was to see through the eyes of visitors and re-think all menus and site navigation toward that end.
The easiest way to see this is in our old top navigation….
…and comparing it to the new top nav.
But, you’ll also find visitor driven thinking in other places, too. There is always a want from internal stakeholders to put everything on the website just because it’s infinitely expandable, but our challenge was to create a focus — a minimalist and highly curated one — and stick to it. As a result, we’ve thought a great deal about reducing density and complication while offering people more focused information. This is easily seen in the “Plan Your Visit” section where you’ll find collapsable choices with specific information based on how you plan arrive — by car, public transit, or bike — or how you’d like to use the museum — what services, how many in a tour. All need to be here, but we’ve reduced the density and designed the page to hide the things you don’t need while giving you the things you do.
Notice, too, every section has a large text to call out a main idea. Every section, in both its navigation and subsequent text, also pitches to specific audiences.
This kind of focus required a lot of discipline during the redesign process, but, even more importantly, will be critical to continue as we move forward into growing the site.
An immersive experience.
If you’ve ever been to the Barnes you know what an immersive experience it is — the building and grounds envelope you, the galleries are installed to do the same. The use of full bleed images is another thing that’s standard practice on the web; our redesigned site takes full advantage of this trend because this is aligned with our goals. If you look closely, there are also subtle design decisions made to use immersive imagery to help create a visual hierarchy within the site. Take a look at our exhibition pages, where the images are even larger and compare to an event page. This design language gives more weight to our exhibitions than our programs — something that is needed — but both still display a weighty and immersive feel.
Additionally, we asked AREA 17 to think about “every page as a landing page.” This is important on the modern web where social sharing often lands you at a place within the site, not at the home page. As a small org, we can’t build a microsite for everything — we need clean, immersive, and clear landing pages for everything — as if any page could function as its own microsite…without it being one. A17 really delivered here and the event and exhibition pages easily demonstrate this.
Ditching templates for modules.
If there’s anything groundbreaking about the site, I think this is it. All of our pages are modular with modules able to be used on almost every page. No longer are we working with the rigid structure of templates. We now have a series of options and pages are built in a modular fashion that’s very fluid.
We’ve got a run book in suggested use cases, so we don’t muck up AREA 17’s design, and we get to glide forward. This idea builds on things we’ve seen in the commercial sector where “build-your-own” hosting engines like Squarespace, SplashThat, etc., utilize this kind of thing. I’ve just never seen the concept used for a site of this size and in a cultural application.
A practical CMS choice.
For all the technologists out there this may be where you find disappointment, but it’s an important part of our story because it illustrates the size of our organization, the needs of our project, and the want to keep our technical staff at a minimum. We’ve seen a lot of orgs head toward cultural-specific CMS implementations like GLAMkit — cheers to all of you — but we felt it was better to go with something more mainstream. We were much less concerned about open source for the sake of open source and, instead, we focused on finding something — open source or not — that had decent adoption, good support, and would be fairly solid for the next few years. Wordpress was out for security issues alone — enough said. We ended up with Craft sitting on AWS and we’re still feeling good vibes about our selection.
End to end — from our first kickoff meeting to launch — the entire process took us seven months. That said, it took us five months to find the right firm. In looking back this was the most important step in the process.
I hope you can see the results in AREA 17’s work — we sure do.
