The Met Store Responsive Pop-Up Shop

Role: Project Manager, Research and Testing, UX/UI Design

The Challenge

In the span of 2 weeks:
• Design a clickable prototype around an online shopping experience for The Met Holiday Pop-Up (this was a personal project).
• Design should meet the goals of the users, business, and the brand
• Materials Supplied: 3 user personas

My Role

This was a solo project so I was working with me, myself and I and asking for any feedback from my mentors along the way. 

RESEARCH & SYNTHESIS

T E C H N I Q U E S :
Field Research // Competitive Comparative Analysis // Accessibility Testing //
Card Sorting // Sitemap Creation

Before stepping into any company and attempting any type of redesign or proposal, I needed to understand my client.
I looked at The Mets biggest competitors: The Moma Design Store, Nat Geo, and Walmart. I also wanted to look at ASOS because I know they have highly regarded UX for eCommerce. I analyzed the user flows for product discovery and checkout on each site.

Left to Right: Analysis of Competitive/Comparitive Checkout Flows, Sitemap Creation, and Accessibility Test Results 
The Met's checkout flow is on par with their competitors MOMA and Nat Geo. However, Walmart and ASOS have slightly shorter checkouts as they allow customers to skip the cart and go directly into checkout from the product page. This is an opportunity for The Met to gain an edge over their competitors.

Accessibility Testing

The primary persona that was supplied to me was 61 years old. Therefore I did some research into current standards for designing for the elderly. 
Some things I learned*:
• Keep font sizes above 16pt
• Pay attention to contrast ratios of text vs background (and there are resources available to test them)
I tested themetstore.com using WebAIM: Web Accessibility In Mind, (see image above) to see if their site had any current accessibility problems. The test found 21 contrast errors in the navigation and header section alone, NOT GOOD! I also tested MOMA and Nat Geo and they had close to zero errors. This was noted as another opportunity for the Met Store to improve.

*Reference: “Designing for the Elderly,” Smashing Magazine, Febuary 2015.

SKETCH
DESIGN
TEST 
& REPEAT

My first step of the design process is always sketch it out to quickly come up with a lot of ideas. Next step was to create wireframes and test my designs with an interactive prototype. 

Homepage Iterations

Feedback in Testing
• “I usually shop first by looking for ideas on the homepage and I don't see any here” 
• 2 out of 4 users commented that they wanted more gift ideas
Design Changes in 2nd Iteration
• Added photography to attract users attention and added options to shop by price or category

Category Page Iterations


Feedback in Testing
• 4 out of 4 users did not click the “Add to Cart” button and stated that they wanted to view product details first
• 2 out of 4 users commented that they wanted more gift ideas
• 1 user said they would like to see popular products
Design Changes in 2nd Iteration
• Removed “Add to Cart” button
• Added “Top 10 Products” in this category to the header

Other Comments

I also thoroughly tested my checkout flow. I received comments like, "checkout was how I would expect it" and "checkout was similar to what I've experienced on other sites". So I decided to keep the original layout and place my focus on other areas of the project. 

Mobile Version

Rapid Prototype (Desktop)
Back to Top