Collection Barnes Foundation

A new way to browse an art gallery

Finding the concept, generating ideas. 
The first step of the project was to present the design team a wide range of possibilities. 
See the picture above? Here are some sketches: an immersive wall of images, exploration by current rooms of collection, a search engine with random words... I even imagine an art searching by picking some emojis. 
We can see some initial research on visual filters inside: this is the idea we kept. 
Each idea was presented for both desktop and mobile devices. 
first exploration images

First explorations on mobile: visual filters, sorting by museum's room, and...
I wasn't lying about the emojis!

Selected Concept 
The idea is to encourage users to browse the Collection through visual filters of their choices. That way, they can discover Art with familiar elements in terms of lines, light & colors.
When an artwork is selected, we can play with a "less or more similar" slider. 
That way, we replicated how Albert Barnes created his ensembles in the museum : not linked by date, or geographic origin: just with visual relationships. 

This is the actual page when you select an artwork.
If you move the slider, you can see more or less similar pieces of Art.

From Collection to Details Page
In terms of interaction flows, we wanted to do "Something simple to use, like Pinterest".
How can we move forward exploring the details of some piece of art? 
What's the interaction between a "Details Page", the "Collection Page" and the Home with visual filters? 

One of the main question was how to interact with the Lightbox? 
Should we save the Lightbox for the Details Page, or maybe it's for the selection of the artwork? 
With the help of sketches and prototype, we decided to go with option 2. 

Some Interaction flows on how to navigate from the Collection to Details Page

Thinking about filters
When the main flow was designed, the big challenge was the filters system itself. 
Which visual elements to choose? And how to pick different elements in the most simple way?
Lines for example: they can be horizontal, verticals, curved, straight, cutted... We could also talk about spaces (narrow to deep), lights changes...

For each type of filters, there is a different logic. Some might work by a simple selection. For others it could be a multiple selection. Or a slider selection.  For colors, we might want to select a single color, or a palette. Or create our own palette. 

Through some iterations we opted for the most intuitive options in each field. This step was fine-tuned in the graphic design phase. 

Early stage sketches on filters states

Mobile friendly experience
We were thinking about the mobile since the very beginning.
We wanted people from every age (and background) to be able to play with this tool and discover art in another way.
Having something easy to use and non frustrating on mobile devices was mandatory.

Those are actual screens of the filters system on a mobile device

From first choices to final design
We worked together with Maxime, Area 17 Paris Art Director, on the project. Discussing every idea, every change on each iteration. 
As we were on a tight deadline, I wanted him to be fully comfortable with the initial choices before jumping in graphic design phase, to avoid another round of back & forth interaction design decisions.

For once, you don't need to be a "connoisseur"
to enjoy browsing an online art collection. 

more projects