Design Concept for Metropolitan Museum of Art Store website

I assessed the current information architecture of the Metropolitan Museum of Art Store website over the course of 2 weeks. For the first 5 days I worked with another designer, before diverging and working alone for the remainder of the project.

With large retailers like Amazon breathing down their neck, smaller retailers have to make some changes to keep up. The Metropolitan Museum of Art, a New York city icon, relies on the income from their store.

How might we make The Met’s current merchandise stand out online amongst the competition?

Research

The research phase began by gaining a foundational understanding of the business and brand goals. Founded over 140 years ago, the Met displays over 1.5 millions works, which span over 5,000 years of history, and last year they had over 6.7 million visitors. But all these amazing attributes are also the Met’s biggest challenge…

“The Great Hall at the Met is one of the great portals of the world, awe-inspiring, like a medieval cathedral. From there, you can walk in any direction to almost any culture. I frequently go out into the hall and the galleries and I watch our visitors coming in. Some of them are comfortable. They feel at home. They know what they’re looking for. Others are very uneasy. It’s an intimidating place. They feel that the institution is elitist.”

– Thomas Campbell (2012 Ted Talk)
Director of the Metropolitan Museum of Art

In March of last year, the museum announced a new visual strategy for clarity and consistency across all spaces with an overall theme that “The Met is here for everyone”.

But rebranding came at a cost…

Which brings me to my second business pain point: Money.

The museum is currently operating at a deficit of $23 million. With current plans in place to rebalance the budget by 2018.

Opportunity

Number 2 on their list of re-budgeting ideas: building revenue streams through our retail operations.

And with 18 retail locations worldwide, the store is operating at a slight loss, with revenue at 51.9M for the year and expenses at 54M.

Field Research

Next, we conducted contextual inquiry by visiting one of their 15 stores that is not connected to a physical museum so my colleague, Terrie, and I went to visit the Rockefeller center location.

Our goals were to learn who shops there, why they shop there and how they shop.

Based on one woman we met, purchasing a handful of gifts for her family and a vacationing couple looking for a special NYC product, we decided to focus in one of the museum’s key personas provided, named Daria, who also buys gifts for her family and loves the NYC specific gifts.

I synthesized the information about Daria and came up with two key needs: accessibility and exclusivity.

Business, Brand, and User Goals

1. We need a cost-effective way to increase revenue

2. Continue to push the rebrand – “The Met is for everyone”

3. But still make shoppers like Daria feel their purchases are “special”

My colleague and I then performed competitive, comparative, and heuristics analysis on the current website.

By comparing The Met gift store we actually learned more strengths than shortcomings for our site…for example, the Met Store allows reviews, provides clean and clear navigation while the Smithsonian site comes up short in those areas.

We then compared the website to other e-commerce sites with similar. The key takeaway from that was the checkout format

I then mapped out the existing site map. Note the structure difference between categories, like Jewelry & Watches and Sculpture.

In Jewelry & Watches, if you click the main category on the Navigation bar, you are bought to the subcategory page. When you click on Sculpture, you are brought directly to the products, making it one less step for the user to see the products.

Also, a Sculpture subcategory with the same product also exists within Home Decor.

Then I performed card sorting with 100 sample products (10 from each category) to test out category names. I first ran 3 open sorts and then wrote out all the different categories our users had written out to see any similarities in the terms used by users in the open sort.

Next, I ran 5 closed sorts to initially test category names. A handful of products kept getting left out in both open and closed: a menorah , greek evil eye charm, a Tiffany glass cup, and a Tiffany glass paperweight.

Based on the findings from Card Sorting…

  1. Removed ‘Sculpture’ as users put Sculpture items into the ‘Home’ category and ‘Sculpture’ is already a subcategory within ‘Home’.

2. Added ‘The Met Exclusive Collection’ category to give those “left out” products a home. It also appeals to Daria since she loves sharp copy and sharing unique NYC culture with people “back home”. All those outlier products from card sorting were actually part of a footer category, called ‘Exhibition Shop’ with replicas and inspirations based on exhibits or collections.

Creating ‘Met Exclusive’ provides that same in-store experience– that these untouchable works of art are suddenly accessible to you. It’s the digital version of the great room– where “you can walk in any direction to almost any culture”.

3. Tested theory with ‘View All’ category. Since Daria “knows what she wants when she sees it” maybe she wants to see it all and filter it down.

Usability Testing

After bringing the wireframes into mid-fidelity, I tested 2 local NYC users in their 20s and 30s, who I asked to step into Daria’s shoes and buy special NYC purchases to show off to their family “back home”

‘View All’ did not test well but the ‘The Met Exclusive Collection’ category was validated as both users navigated immediately.

Through the first round of usability testing, the ‘checkout login wall’ was a user pain point. So I added ‘Member login’ to the billing page, removing the guest login option. I also altered the Checkout order and put shipping address before the billing address. Putting billing address before shipping address came off as money-hungry towards the users in testing.

I then did two different local NYC user tests to validate those changes and after positive feedback, I moved to create a high fidelity prototype.

Check out the prototype here: https://invis.io/QSAKRSJEZ

I also drew up early mockups for the mobile side. My professional opinion is that the data I obtained testing the website was not strong enough to support changes on the mobile site– the flow and IA are far too different.

Circling back to the initial goals, with the proposed changes we will achieve:

1. A cost-effective way to increase revenue

2. Rebrand – accessibility and consistency using the term ‘The Met’

3. Customers who still feel this is exclusive– even though it is actually accessible to everyone.

And now, not only is the Met the here for everyone, their store is too.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade