Art Institute of Chicago Online Store Redesign


Back again for another set of rapid prototyping, this time for an intense two weeks developing an e-commerce site.

To gain familiarity both with e-commerce sites, contextual research, user testing, and the software Sketch, our class at General Assembly UXDI was tasked with doing a redesign of a museum store website. The end-goal was to have a medium-fidelity prototype of a website after two weeks. I was really excited, feeling that I could bring some insight to the project with my background in museums. But I also knew I had to be careful- familiarity can breed blindness.

So to stretch myself I picked an art museum instead of a science museum- the Art Institute of Chicago to be exact. Voted best museum in the world (heck yeah!) by Trip Advisor in 2014, it’s an impressive institution close to my heart, and it deserves a store website to match.

Unfortunately. . . it currently doesn’t have one.

Why would I sort by book color?

The current site is cluttered, feels like a relic from the early 2000s, and doesn’t showcase items in a way that makes them seem enticing, luxurious, or even special. Which is a problem when what is being sold is - by definition- a luxury.

So: redesign time.

Contextual Research

To learn more about the shopping habits of museum store goers, I observed and interviewed customers and staff in the Contemporary Store and Flagship Store. My goal was to watch and map shopping behaviors, talk directly to customers, and meet with the folks who knew these shoppers best: the museum store staff.

I ended up with a lot of birds eye-view sketches of dwell times that looked like this. The circles and lines represent a 60-something-year-old man who moved from t-shirts to exhibit guides to jewelry to general art books. The takeaway? People aren’t going in with an idea of what they want- they are waiting for something to appeal to them.

After interviewing the sales staff and shoppers, I had a few takeaways:

  • Roughly 50% of those making purchases in-store are members, according to staff- and some of those members were in the process of popping into the store from off the streets to see what was available as we spoke. This is a strong community, folks.
  • According to staff, the stores are set up to tell a narrative tying back to the museum exhibits, with sections of impressionist, contemporary, and featured exhibit items.
  • Based off of browsing behaviors, people aren’t going into these stores with an idea of what they want- they are waiting for something to appeal to them. Or, as the holiday season approaches, something to appeal to them as a gift for someone else.
  • Customers were completely unaware that there was an online store. Additionally, many were unaware that there was another store around the corner.
  • Postcards were the biggest purchase in-store. Online, staff informed me that customers bought the larger items that they did not want to carry around with them for the rest of the day.

1:1 Interviews

The art student and her art books.

I interviewed three people total: two people in an informal environment and one online through Skype. One was a lapsed Art Institute member and older retiree, one an Art Institute student and active museum-goer, and one an out-of-town tourist who had recently visited Chicago.

Some salient quotes:

“The store reflects the place, and it’s a place of one-of-a-kind things.”

“The museum is a collection of time shown through art.”

“Having things close to you that are beautiful- there’s value in that. And there are a lot of beautiful things in the museum and shop.”

“As I’m looking [at online store items] I’m just fantasizing about having a nice home that would have nice things in it.”

Consumer Research

I went online to see what had been published about online shopping. While I had uncovered interesting data at the store locations, I was hoping there were studies published that had broader implications. I was in luck: I came upon an article from PricewaterhouseCoopers* that had interviewed 7,000 people worldwide about their online shopping habits. The article I found delved deep into a concept called multichannel shopping.

In order to support the customer shopping experience, making sure these basic convenience measure are met is important. Image credit*

Multichannel shopping, according to PwC, is a couple of different activities:

  • Choosing the correct channel to fit a purpose, i.e. shopping online to due to time constraints, or clothing shopping in-store to confirm the best fit of an item.
  • Buying goods from the same retailer, but doing it across more than one channel, i.e. researching a product online before picking it up in-store.
  • Using a number of different channels to make a purchase. “73% of US respondents report that they research online when buying clothing, footwear, toys, and health and beauty products (vs. 60% globally). In other words, online research doesn‘t just lead to online purchases, it‘s also critical in leading to purchases through other channels and in driving traffic to physical brick and mortar outlets.” (4).

So how to make a convenient website that took into account the museum image, the brick and mortar store, and multichannel shoppers?

Insight#1: The museum brand garners trust and loyalty.

Design Principle: Stay true to and uplift the brand

In practice: I chose to bring the look of the main Art Institute page to the online museum store. In my sketches and initial wireframes I pulled the header and color palette of the museum main page, and mimicked the side panel navigation and general layout for branding purposes. Additionally, I believed this would allow for easy navigation back to the main museum site.

Art Institute museum website
Initial museum store homepage sketches

Insight# 2: Purchases through the museum store and online are seen as an extension of the museum.

Design Principle: Communicate art through the everyday, high-quality design and beauty within reach. Help visitors envision themselves surrounded by museum quality art.

In Practice: Use immersive photographs on most pages to steer users to collections. These immersive photos would be images of items in a home setting, to help the user imagine living surrounded by museum quality art. Ex: an image of a tasteful living room filled with prairie style art and decor.

Additionally, verbiage should underscore the value of the items. Ex: “Unwrap a masterpiece. Shop gifts”

Insight #3: Shopping in the store and online are currently silo-ed experiences for users, and do not support a multichannel retail approach.

Design Principle: Break the silos and build bridges. Unify the brand and the user experience through the website supporting in-store shopping and the museum experience, making the store more accessible for repeat visitors.

In Practice: First I had to identify the silos, and then brainstorm how the store website could support each one. The silos are in gray below, and my thoughts in green.

There’s a lot of bridge building to be done.

Next, I tried to wrap my brain around how multichannel shopping would look from a user point of view through personas:

Here, Sabrina the art student researches a gift online and is able to pick it up in-store later.
Further persona exploration, this time with 72-year old Joy, a retiree

My main design solution for insight #3: make items findable and reservable in-store.

  • This would allow shoppers to reserve and purchase exhibit guidebooks (featured prominently on the homepage) before entering the exhibits, thereby supporting their museum experience.
  • It would allow for speedy online research and in-store pickup for the museum member and/or native Chicagoans who would much rather spend their money on an exhibit ticket instead of shipping fees.
  • Additionally, users could save items to favorites as a means of tracking what they would like to purchase in-store.
Individual item pages with a “Find In Store” button
Information as to which location the item is available at, and a map to reinforce the location.

User testing

User testing received a lot of positive feedback:

  • Immersive imagery and wording had a very positive response
  • Users responded well to how the site matched the main website in feel and navigation.
  • Users responded that most navigation was very intuitive (exception noted below).
  • In store pick-up had a very positive response.

It also revealed some very workable flaws:

  • The design had integrated the online store and the main website a bit too well- users in the store would mistakenly click out of their shopping experience through the top navigation and into the museum website.
Clicking “collections” won’t get you to that Monet mug, it’ll get you out of the shopping experience.
  • Navigation based on what the user might be trying to accomplish — “Wear” would take the user to apparel, “Eat” to tea sets, mugs, and platters for entertaining — quickly became apparent as vague and confusing language.

The Final Prototype

The final prototype was updated with the following:

  • Clarified categories for shopping
  • Cleaner menu navigation, keeping the user from accidentally leaving the shopping experience.
  • A flatter design, with every page giving the user is one click from a purchasable item.
  • Categories to facilitate both casual and directed browsing.

Final wireframes

*McPartlin, Sue and Lisa Feigin Dugal. Understanding How U.S. Shoppers Are Reshaping The Retail Experience. PricewaterhouseCoopers LLP, 2012. Web. 20 Nov. 2016.