covers

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.

Homepage-min
Exhibition
Search

Vision

DIA-CONTENT-EDIT-207

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

t3sBtnWg-min

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.

MnmbdnvA-min

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. 

Frame-80-min

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.

calendar-min

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.

screencapture-dia-org-events-mosaic-concert-let-good-times-roll-2023-02-08-09_47_08-min
comm-min

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. 

map-min
visit-min
dining-min

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

IMG_4445-min
IMG_2881-min