UXDI Project #3 Retrospective: The Steps @ The Met Pop-up Shop

Our 3rd project was another solo effort that we could work on over the holidays. Our assignment was to design an online pop-up shop for a local museum. I was assigned the Met.

The main focus of this project was Information Architecture. We were to fill the shop with 100 products and categorize them in the best way possible for our users. We would be wireframing in desktop, tablet, and mobile. So we would need to pay attention to responsive design and navigation.

I started by visiting the Met gift store. It was right before Christmas, so their holiday concept was featured as soon as you walked through the door. The room was painted red and decorated with giant wreaths. Signs on the wreaths said “Gifts for Her,” “Gifts for Him,” “Gifts for Everyone.” There was a very eclectic mix of merchandise along with several tables of holiday merchandise (ornaments, cards, etc.). It really felt like a shop where you could pick up all of your holiday gifts in one shot.

This helped me land pretty quickly on my initial concept for the pop-up shop: A shop that focused on year-round gift giving. The merchandise selection would always be on sale and always be updating. Consumers could come here anytime during the year to snap up a birthday gift, Mother’s day gift, graduation gift, Arbor Day gift…you get the idea.

I imagined the store launching right after the holidays to take advantage of post-holiday sales. One of the store categories would be “Holiday” to help move some of the clearance Christmas and Hanukkah merchandise. Future iterations of the shop would also be a mix of new merchandise and old merchandise that needed to leave the warehouse.

Card Sorting

I continued my research with card sorting exercises. My first card sort was open. I had all 100 products on cards, and the user would sort the cards into whatever categories he or she wanted to. I decided after the first open sort to go directly into closed card sorting. Having someone place earrings into a “Jewelry” category then place a stuffed animal under “Toys” wasn’t exactly eye-opening for me.

Since my store’s focus would be gifting, I decided to make the categories specific to the giftee, by age and gender. So, my initial closed cards sorts consisted of the following categories:

  • Adult Woman
  • Adult Man
  • Teen Girl
  • Teen Boy
  • Child Girl
  • Child Boy
  • Baby

I then gave the 100 cards to users and asked them to decide who would be the best recipient for each item. By having so many categories, there was some confusion. For instance, with some jewelry items, users had a difficult time deciding between Adult Woman or Teen Girl. On some of the toys, particulary the activity sets, users didn’t want to decided between boy and girl. One said, “I hate having to assign this to the Boy category. Why can’t girls play with it, too?” Some said they felt “sexist” having to make these decisions.

In the end, I decided to cut down on some of the categories, and make sure the items for younger customers were gender inclusive.

Shop Concept

When coming up with the concept for my shop, I knew it needed to be an extension of the Met. So, I started thinking about actual physical extensions of the museum. The most iconic has to be the stairs in front of the museum. Every New Yorker (and most tourists) has spent some time on the steps. People watching, catching some sun, eating an Italian ice. It’s definitely an essential part of the New York experience.

So, I wanted to take the fun and unusual spirit of the steps and convert that into the theme of the shop. I called it “The Steps @ The Met.”

The shop would consist of 5 main categories:

  • Holiday
  • For Her
  • For Him
  • For Kids
  • Shop by Price

Everything would be discounted (deep discounts for clearance!). And the merchandise would update at least once a month. The theme of the shop would change with the seasons and could reflect current exhibits at the museum.

For instance, when the summer’s Costume Institute exhibit is announced, the shop’s “Holiday” section could change to “Fashion.” Books and merchandise from previous Costume Institute exhibits could be sold here at a discount. The other categories could also sell products with a fashion/style theme. The site could also promote the Costume Institute’s annual Met Ball, where all of the stars are photographed on The Steps @ The Met.

Competitive Analysis

When it came to designing the actual shop, I looked around at some of the other museum store sites. Some were better than others.

The American Museum of Natural History’s site was particularly bad. The color scheme was blah. There was a lot of white space with the products just kind of floating around on the page. It just wasn’t a visually appealing site.

On the other hand, the MOMA store’s site looked fantastic. Eye-popping colors and great photography. The products were featured in easy-to-read grids. I was definitely inspired by this site when planning the design of my shop.

Design

For this project, we would need to present full-color skinned versions of the Home Page for all three platforms. I started by doing these first. In retrospect, I should have just picked one platform and completed the home page & all the wireframes first. After testing my desktop platform, I did need to go back and make some changes. So, the initial skins for my tablet and mobile home pages needed to be completely reworked.

I started with very loose drawings in my sketchbook to get an idea of how I wanted them set up.

I then moved to hand-drawn low fidelity wireframes so I could map out all of the info I wanted to include on each page.

From there, I moved into high fidelity wireframes in Sketch.

Iterations

After some initial testing, here are some examples of the changes I felt I needed to make for future iterations.

My initial home page featured one big hero image. Users thought the page was visually appealing, but there wasn’t much functionality to it. It was just a “one-click” page that users would rush through to go straight to the store.

I expanded the page, making it scrollable, to include an explanation of what the shop was about. I also included more product shots and made the “Become a Member” section a featured part of the page.

I was also running into some issues with the side navigation bars on the category and product pages. Users were getting confused by the subcategories offered, or they sometimes didn’t even notice the Age Range or Price Range subcategories.

2nd & 3rd Iterations of the Side Navigation Bar

This ended up being a rather simple fix. By playing around with font sizes, font weights, and some indentation, the side bar navigation became a lot more clear.

For this assignment, were were provided with 3 fully fleshed-out personas. For my prototype, I have focused on Roland. He’s a 61-year-old HR Manager who is also a grandfather of 2.

Here is the final prototype for the Desktop version of The Steps @ The Met. In this version, Roland is searching for and purchasing gifts for both of his grandchildren.

Next Steps

I was not able to test the mobile and tablet platforms, so I would like to continue to develop the designs for both of these. For mobile, I have chosen a hamburger menu as the main source of navigation. I want to make sure this is the right option for users shopping the site with their phone.

I would also like to continue refining the checkout process for all three platforms. All of the effort that goes into filling out these forms is one of the major pain points of ecommerce shoppers. So, I would like to continue testing to see where improvements can be made.

Another project I really enjoyed working on. And, it’s been helpful in helping me see which areas of UX Design interest me the most.

See you soon on The Steps @ The Met