Museum Shop Website

WHILE WORKING FOR THE Art Institute of Chicago | 2017–2018

The Art Institute of Chicago has a shop that carries products with the same unique tastes and values as the works within the museum. While the shop has two physical locations within the museum, a large percentage of sales occurred through the shop website and print catalogue.

In 2017, the shop decided that it would phase out it’s catalogue and reinvigorate its assortment to reach new audiences. This pivot aligned perfectly with our new Art Institute of Chicago website redesign, enabling us to create visual alignment while providing enough time to research the e-commerce landscape and strategically craft the new shop web experience.

visit site

 
product_page.png

The new shop website mirrors many aspects of the new Art Institute website—generous negative space, big images, and quick-search terms for browsing the assortment that align with the aesthetic values of the shoppers. While we were able to use the design and functionality of the Art Institute website as a jumping off point, we wanted the shop to have it’s own distinct feel, and to conceptually challenge ourselves into thinking about how the values of our museum should translate into an e-commerce experience.

 
 
homepage.gif

A main tenant of the site was getting shoppers to seeing product sooner. This meant having an accessible product stream immediately on the homepage, as well as having narrative-focused banner ads that reveal content and product teasers before advancing the user to another page.

These banner ads are a manifestation of one of the more informative insights from our strategy: stories that highlight the maker’s process or the museum shop’s exclusive relationship with the maker were the biggest appeal for shoppers. This strategy permeates several areas of the site, including an “Exclusives” page in the main nav that surfaces all of the products you can only find at the Art Institute of Chicago’s museum shop.

Another area this is prominent is on the product page itself. If there is a related story—about the maker, the artistic inspiration, or the trend which the product aligns with—it appears adjacent to the product. Clicking through to the story, shoppers can read more about the topic and see all of the related products immediately on the page.

 
 
feature_post.png
 

process

The museum shop website was once considered decisively separate from the museum. However, with its evolution, its strategy changed into trying to integrate as much as possible to be seen as adjacent to the prestige of the museum and it’s iconic collection.

The website had been designed, built, and maintained since it’s inception by a local agency called Webitects. Webitects’ nimble team acted as our development partners on the project, while our team—specifically, myself and Director of Experience Design Michael Neault—owned the new design.

See the starting point of the museum shop website below:

 
homepage.png
product_page.png
 

While we had often had the opportunity to bring our expertise to experiences that were digital and highly narrative, we very infrequently face challenges that have the quantifiable return of investment that can be seen in the design choices of an e-commerce site.

The context for the museum shop makes it an interesting subject for research. Shoppers had an intensely personal connection to the shop, mostly evident through the incredibly heartfelt comments that can be found on the product pages across the site.

 

 Barb, you are literally  killing me.  I am so incredibly endeared.

Barb, you are literally killing me. I am so incredibly endeared.


 

So, we did a deep dive on who the shoppers were. The shop had been collecting exhaustive data for years, revealing a crowd that was skewed older (with the greatest percentage of shoppers over the age of 60) and often projected their support for the museum—and the arts as a whole—into their shopping experience.

We defined a strategy that would help us grow our audience with younger segments, while not isolating our core shoppers. While this had implications for how the site would look and function, it also revealed that the admiration for visual art as the obvious overlap of the thresholds of our shoppers.

strategy.jpg

Coming out of our strategy research, we decided that we could roll out a new design incrementally, allowing us to programmatically experiment with different functions while we waited for the final Art Institute of Chicago website designs to be settled.

 
 An evolution of the shop website, from Summer 2017 to Fall of 2018.

An evolution of the shop website, from Summer 2017 to Fall of 2018.

 

The first phase of the shop redesign was addressing all of the most urgent design and user experience issues and starting to line up the workflow to accommodate what would be the new design. New art direction was issued to product photographers while the shop adjusted their content strategy.

With the final Art Institute website designs in place, we leveraged our new digital design system to bring consistency across the two sites. The visual design decisions were communicated to our Webitects through Sketch files and thorough design documentation, such as this comp that demonstrated the composition, styles, and spacing as the page was scaled responsively.

 
_guidelines_object.png
 

This documentation, and the dozens of hours of subsequent VQA, were the most diligent work that I had ever done on a visual design project. In order to anticipate how the design would be implemented, I needed a thorough understanding of how Webitects was planning to build the site. Similar to the Art Institute website, the content was considered atomically, with modules of content that had different scales and manifestations throughout the site.

specs.jpg

In the end, the vigor that was brought to the shop redesign paid off, as I was able to use the site design as the first extension of the design system as defined by the Art Institute website. The intuition I gained on the brand language would pay off as we made updates to the main website, allowing me to spot inaccuracies and effortlessly reference other areas of the two sites to use as precedent for updates.

The shop now has it’s own visual identity, manifested through the shop website and documented to use for future design needs, whether in print or environmentally within the shop. The shop now visually complements and aligns with the museum’s identity, allowing those who feel connected to the Art Institute to bring a the spirit of the Collection home with them.

brand.jpg

team

The shop team is lead by Kirstie Lytwynec, Vice President of Retail, and supported by Sarah Raettig and Anne Chernik. Sarah and Anne particularly have gone above and beyond to educate themselves on the ins and outs of digital design best practices while knowing their customers best.

Josh Andrews was the project manager for this project, who balanced it elegantly with the behemoth that was the Art Institute of Chicago website.

Executive Creative Director of Experience Design Michael Neault provided direction and leadership on how to navigate and communicate an e-commerce project through the lens of a museum.

Webitects, and specifically Design Director Nick Rougeux, were incredibly thorough, responsive, optimistic, and encouraging. They will continue to maintain the site with the Shop team.