Behind our redesign for the Barnes Foundation
--
When we were approached by the Barnes to redesign their website we couldn’t have been more excited to work with them. Not only were we huge fans of the museum, but the more we engaged with Thom Collins (Executive Director and President) and Shelley Bernstein (Deputy Director of Digital Initiatives and Chief Experience Officer), the more we were inspired by their vision to reinvigorate the experience of the Barnes—and their recognition of the role design and technology can play. If you’ve been following along, you’ll have read about the Barnes’ forthcoming wearable and how they are rethinking museum collections online. It wasn’t just these refreshing initiatives that impressed us, but the user-centered, data-driven approach that supported them. Our ethos was aligned and we just had to work with them.
Fast-forward seven months: the site is now live and we’re thrilled with the result. Shelley has already shared a fantastic overview of how the redesign exemplifies the Barnes’ shift in strategic focus. In this post, we go behind the scenes of the design process that got us there.
Getting started
Those who have visited the Barnes have experienced the zen-like beauty of the grounds and minimalist perfection of the building itself. Inside, the bright expanse of the foyer is juxtaposed with the intimacy of the collection rooms, and the use of materials throughout the building is exquisite. This sophistication stood in stark contrast to the website, which was dense and unfocused.
We knew wanted our redesign to reflect the singular nature of the Barnes. Thankfully, we had two great jumping off points — the museum’s rich character and a vibrant visual identity created by Pentagram. By pairing a liberal application of whitespace with full-bleed, outsized artwork and imagery, the new site brings the visceral experience of the website closer to an actual visit. In support of the aesthetic direction, with each design decision we asked ourselves if any element could be removed or focussed, such that the overall effect is a “purity” of information and design. We limited the number of options on the homepage, we reduced the main navigation (tucking less-essential critical pathways under a secondary menu) and designed the user experience to make it easy for visitors to scan all available options before diving deeper on a specific object or topic of interest.
While it was essential that we breathe new life into the website, we were equally excited by the Barnes’ objective to treat the project as foundational to the future of their digital communications and platforms. Their need for an extensible design system aligned perfectly with the evolution of our UI Toolkit and modular design approach.
Going modular
There’s something going on under the hood of the new website that might surprise you: the majority of the site is comprised of just three main templates. There are of course a few custom, one-off pages, but the rest of the site uses just a few building blocks. The key: each of these three templates can be modified with a number of modules.
The ever expanding universe of devices (think smartphones, tablets, laptops, desktops, TVs, consoles, etc.) has made simplicity, efficiency and flexibility in design, build and content production more imperative than ever before. Recognizing this challenging environment, the Barnes looked to AREA 17 to create a foundational design that could be seamlessly extended to future digital projects and give the staff a great deal of flexibility in authoring content that consistently looks good across products.
The best way to achieve that was to design and build a “modular” design system. Up until recently—and likely due to our five hundred-plus years worth of experience with the printing press—the digital industry has used the physical “page” as a metaphor for thinking about how it builds websites. As an industry, though, we are now thinking on a sub-page level and crafting interfaces that combine content and functional elements into distinct, reusable modules.
So while the website itself is ultimately comprised of web “pages,” in order to create a flexible and easily scalable design system for the Barnes to manage and publish content, we focused on creating the parts and defining how those parts come together to form “pages.”
At the most basic level, this meant building a toolkit of elements such as buttons, forms, and content that that can be assembled into modules. These in turn can further be composed in a particular layout to form templates. These templates can then be applied to different content to form public facing web pages.
Our modular system for The Barnes includes:
- UI elements: basic elements such as buttons, bulleted list, form fields, etcetera
- Modules: a combination of of UI elements for a specific purpose, i.e. a slideshow,
- Compositions: a recipe for combining modules to build partial or complete pages
- Templates: representative designs for common page types, i.e. landing, listing, article/detail
The goal of the process is to define the distinct and reusable components that comprise the system, while the main challenge is to know when to reuse a module for similar content or functionality and when to create a new one. Avoiding a duplication of modules serving similar purposes makes it easier for teams to know which module to use and ensures the integrity of the design system across the multiplicity of devices.
Thus, a modular approach allows an agency like us to create and produce consistent and flexible user interfaces a lot more methodically. Even better, modular design makes it a whole lot easier for clients and product teams to weave together content into beautiful pages in the present and to scale their platforms in the future.
This isn’t Tetris
A common misconception about modular design is that all modules can be combined with any other module into an infinite array of possibilities. No, modular design is not exactly Tetris. Elements and modules cannot be combined any which way but loose. To use another analogy, in the same way that ingredients require a recipe to make a great meal, content modules require compositions to ensure good design.
The modular design approach means that rather than designing the entire website, the designer is responsible for components that the client will assemble into the pages of the site. This puts the onus on the agency to provide guidance on how to choreograph the design elements into beautiful pages and on clients to learn and internalize the principles of the design system. And the more complex the content and the design, the more important these guidelines become.
For The Barnes, we created guidelines that define simple rules for how modules can be best arranged together and also illustrate the ways in which the system can break. At the heart of the design system is the Exhibition and Event template which has nearly unlimited content possibilities — below, is a the relevant section of our guide with the recommended approach to constructing these pages.
UI Toolkit
It’s one thing to design a modular system, quite another to make that modular system available to other developers to maintain design consistency across multiple projects.
The UI Toolkit is an internal website that serves as documentation for the UI of a specific web property. It is a visual representation of the CSS styles with its associated code snippets. The UI Toolkit is meant to show all the “options” available to a developer with easy access to its associated code.
For The Barnes, we used the UI Toolkit extend our design for the main website to the store and it is currently in use by another team for the collections website.
Looking ahead
Successful projects happen when clients recognize the principles we’ve applied in creating their design system and work to ensure that the composition of pages happens according to those same principles.
The Barnes has proven an incredible partner throughout the design and development process, pushing us to create an ever-more flexible design system — one that has the ability to uphold the intended design as they administer the pages of the website.
