Detroit Institute of Arts
The Detroit Institute of Arts holds a collection among the top six in the United States, respected for it's diversity and notable acquisitions such as Diego Rivera's Detroit Industry fresco cycle, and the first Van Gogh painting to enter a U.S. museum collection. The DIA partnered with Purple Rocks Scissors to redesign their website to reimagine how their collection was displayed, make visit planning easier, and more accurately depict their work in the community. I led the design of this project.
Vision
The final product began with a clear vision defined during the discovery phases of the project and visits to the DIA. This vision was summarized by the following three areas of focus.
Beauty
We cultivated an inspired aesthetic with an elevated usage of an established brand, space for art to speak for itself, and details that brought the grandeur of the DIA into the digital space.
Access
Planning for WCAG 2.0 compliance provided fantastic opportunities to innovate and create beautiful, functional solutions that reach people, exposing them to the wonder of DIA’s collections, space and programs.
Renewal
Beneath the veneer of a cultural institution lies the raw dynamics that shape it. Often the people, places and practices that are so vital to a museum’s identity play fall into the background, but we created a dia.org that incorporate an entirely new community section into its information architecture, tying the museum to it's Detroit roots and better informing the tri-county area about benefits and events available to them.
Visual Design
We re-thought the digital application of Pentagram's brand identity, starting with the type system built from Celeste and Kievit. We prioritized lighter weights in order to give the entire composition an airy, elevetated feel.
We built a new digital palette from the DIA's primary blue value, selecting compelementary neutrals and adding a new set of off-white colors that added hints of lavendar to the layout—a complementary touch the the sparing use of the signature brand color that brought depth to the minimalist design.
Motion struck a contrast between grandeur evoking reveals for imagery and quick, functional slides for hover effects.
Card hover states hit multiple points of recognition and style.
Key Moments
ART FOR EVERYONE
Reimagining the collection as a public gallery
Over 60 thousand works of art. Stakeholders in provenance, conservation, research, and the general public. Thousands of data points and taxonomies housed on a separate platform with it's own API.
Our team met a complex challenge with DIA's digital collection infrastructure, but rom the beginning, we knew the collection was the heart of this experience. We set out to create a place where the public could engage with this incredible collection, its beauty, and its history.
Our solutions included a robust search function that can sift through thousands of works by practical parameters and help users discover through recommended queries, or pinpoint their destination through smart auto-complete.
We also built an inspector tool that simulates the gallery experience, with an expandable tombstone nd the ability to easily zoom in and out to take in every little detail.
The collection grid is the primary viewer of art at the DIA, allowing users to dive deeper into each individual piece. Design details, such as a consistent container with fitted images make the grid aesthetically pleasing and orderly, while each artworks' detail page showcases the work sans distraction.
ROOTED IN DETROIT
Community front and center
The DIA is funded by a millage paid by Wayne, Oakland, and Macomb counties in Michigan. Residents the tri-county area receive free admission in addition to other benefits, making it essential to hightlight community in the site's information architecture just as much as ticket sales. We added a new section of the site for community, letting local residents know all about the benefits, learning opportunities, and events available to them. We also redesigned the calendar to be more clear, functional, and helpful.
VISIT PLANNING
Making it easier to visit the DIA
Visit planning is essential to any cultural institution's website. Our mian priority for this redesign was access—make key information shine and get rid of anything that doesn't help users get to or around the museum. We created an interactive map, visit planning page, and a series of informative amenities pages that not only gave an overview of logistics, but also a much deeper feeling of what it is like to be there.
Key results
49%
increase in time spent exploring DIA’s online art collection
50%
increase in traffic to plan a visit to DIA
58%
increase in traffic to DIA’s events and calendar