MoMA Store

Responsive E-Commerce Redesign [Concept Project]

Overview

The MoMA Store isn’t your typical museum gift shop. They’re essentially a really cool design store. It’s time for the MoMA to up it’s game in the e-commerce world and have their online shopping experience reflect their high design standards.

The Problem

With large retailers like Amazon breathing down their neck, smaller retailers have to make some changes to keep up. 

The MoMA Museum Gift Shop is looking to design a new, responsive version of their online e-commerce retail site.

What I Did...

 UX Research
UX Design
Prototyping
 User Testing

The Team

Nelly Esperon

Discover

Research

Working with my teammate, we conducted the following research methods to inform our decision making process:

  • Business Research

  • Contextual Inquiry

  • Competitive/Comparative Analysis

  • Information Architecture Analysis

  • Card Sorting

Findings

Our research led us to a few key takeaways allowing us to define our problem:

  • The store offers a curated selection of design-centric and name-brand items, with less of a focus on art prints and souvenirs

  • The existing site contains most of the necessary features and elements, but are not presented in an updated, modern design

  • The existing IA is very complex – 9 categories and 164 subcategories – allowing an opportunity for simplification

Existing Homepage

Contextual Inquiry

Competitive & Comparative Analysis

Card Sorting

IA / Site Map

Define

Personas

Who are we designing for? Using existing personas provided by the museum marketing team, my teammate and I identified the primary user needs, while also keeping in mind secondary user needs. You never know who's going to be shopping on your site, so I knew we had to design for all users. Our primary persona's preferred device is a desktop computer, so I'll be designing desktop first.

Target User Needs

  • Identify new products

  • Reputable brand names

  • Trustworthy reviews

Secondary User Needs

  • Discovery & suggestions

  • Easy checkout

  • Mobile-optimized experience

User Flow

To ensure our primary users were able to find featured items with positive reviews, I kept in mind moving into the design phase that I would have to surface new and name-brand products in a high-visibility area of the site. Reviews would also need to be prominent on the product detail page.

Design

Sketches + Wireframes

Since our research findings told us that most of the features and elements already exist on the site, I sketched out the current layout to see where everything stood, then sketched new layouts to surface the pertinent information across the site.

Homepage

Category Page

Subcategory Page

Product Detail Page

Homepage

Category Page

Product Detail Page

User Testing

After building a functional prototype, I conducted 3 user tests. I provided the users with a scenario and few tasks to complete. The users were able to complete their tasks, but they did identify a few issues that needed addressing in the design.

Findings  Improvements

  • Brands were *somewhat* easy to find in the sidebar and in the dropdown nav
    Improvement: Add a Brands + Designers feature tile on the category page to improve findability.

  • Language inconsistencies regarding "Shop by brand" vs. "Brands + Designers." Improvement: Make all instances across entire site consistent.

  • No “Continue Shopping” option from shopping cart screen.
    Improvement: Add link from cart back to continue experience.

Deliver

Visual Design

Keeping the MoMA brand guidelines in mind, I refreshed the look and feel of the site. I updated the layout using a Bootstrap grid, ensuring the design would be responsive and function beautifully on whatever size screen a user is using.

Homepage

Category Page

Subcategory Page

Product Detail Page

MoMA Store