Improving Checkout Process

 
 
 
 

PROJECT OVERVIEW

 

I was tasked with redesigning and rearranging the Information Architecture of the Museum of Modern Art gift shop’s digital presence. One of the biggest problems facing the gift shop, known as the Design Store, is the website's messy layout and confusing categories. Due to the array of products on their site ranging from prints to furniture, MoMA's categories need to represent a variety of products. The Information Architecture of the site, however, did not provide a clear hierarchy of where items should be placed and found. After identifying initial flaws with the site, conducting user research, and design iterations, I redesigned the site to have a cleaner layout that touched on pain-points identified by my persona. 

The Museum of Modern Art (MoMA) is an art museum in New York that preserves and collects culturally relevant modern art. As one of the premiere modern art museums in the world, the MoMA draws over 3 million visitors a year. MoMA’s gift shop not only features prints and books from exhibitions and featured artists, but also several household and miscellaneous items that fit into the modern theme of the museum. Due to the distinct design of the art in MoMA, people are drawn to the store to shop for unique household items and gifts. 

 
 
 

My role

Research about the MoMA as a business organization, and design an interactive prototype around an online shopping experience to satisfy my personas needs and the goals of the brand.

Tools

Sketch, Photoshop, KeyNote, Invision

 

Time Frame

7 days with another UX designer and 6 days by myself

 
 
 

GOALS

 

User Goals

After conducting the research and being attentive to the needs of my persona, I identified the user goals that would be used to inform and drive the MoMA's redesign: 

  • Easily find unique and well designed products

  • Know which items are new

  • Build trust with brand

  • Easily read and share product reviews

Business Goals

MoMA's mission statement is to seek dialogue between experimental art from the past and present in an environment that represents the art it houses. Using this mission statement, I identified business goals for my redesign. 

The KPIs of the new site would include:

  • Increase membership sign-ups

  • Encourage repeat visit

  • Showcase variety of products available on the site


PERSONA

 
 Creation of this persona was not a part of my role with this project

Creation of this persona was not a part of my role with this project

 

SITE MAPPING

 

I created a Site Map for the existing version of the website including the top level categories as well as their subcategories.

MoMA site map
 

CONTEXTUAL INQUIRY

 

To get a better understanding of how shoppers interact with their unique products, my research partner and I conducted Contextual Inquiry. Since the MoMA has 2 gift shops in New York, I suggested and my partner accepted to split up so each one of us can cover a specific location, then regroup and compare our experiences. I covered the MoMA's store at the museum location. I covered 3 individuals, and 2 groups of people. Also, I interviewed the employees who work at the store.

 
The MoMAs gift shop is where I can touch the products. Here art becomes playful, tangible, and fun.
— Dorris [User#2] resides in San Francisco / Mid 40's / Female
 

KEY CONCLUSIONS

 

All of the individuals and groups expressed their excitement from the products in the gift shop, and mentioned that the store makes an extension of the museum experience.

dollaricon.png

After analyzing the data from both locations, I've learned that even though the museum gift shop is the main one, the shop at the SOHO location has an annual revenue of 1M to 2.5M, and is the one that generates more revenue.

Third of the users specified that items are pricy. They would not be interested in purchasing anything from the online gift shop because of the added costs such as shipping and sales tax.

 

COMPETITIVE MATRIX

 

My research partner and I conducted a competitive analysis of other museum gift shop sites to see how they showcased and categorized their products. We also looked at popular shopping websites to see the various organization methods used by e-commerce sites. The Met had a large array of products, similar to MoMA, however, had a cleaner navigation of their site, making it easier to find products without as much clutter.

Using this information we began tackling the Information Architecture of the Design Store.

 

USER JOURNEY

 

I performed checkout process comparison with online gift shops of other museum and discovered that the Whitney's online gift shop offers a shorter user journey. Their Checkout Process has been condensed, therefore, shortens the process by 2 screens.

 I implemented this discovery in the Information Architecture stage.

 

CARD SORTING

 

I selected 100 products from the website that represented the large range of products and used these items to perform 2 open and 2 closed card sorts.

I begun with open card sorts to get an overall idea of how people categorize the items sold at the online gift shop. After seeing trends in the category naming, I used the information to make categories that helped capture the type of products included.

 

NAVIGATION REDESIGN

 

Using the feedback collected at the open card sorts, I created a new navigation bar that clearly shows what items would be available in each category. The Heuristic Analysis we conducted during the research phase highlighted that findability was a difficult issue due to the extensive categories and drop down menus. 

 Existing navigation bar - Cluttered with too many categories and drop down menus

Existing navigation bar - Cluttered with too many categories and drop down menus

 Suggested navigation bar - Categories are more condensed and created based on the trends discovered by the card sorting method

Suggested navigation bar - Categories are more condensed and created based on the trends discovered by the card sorting method

 

USER TESTING

 

I performed the test on 8 users, using the medium-fidelity screens and see how clear it is for the users to use the checkout process.
Users were tasked with locating an item, adding it to their cart, then go through the checkout process.

 

PROTOTYPE

 

I created both desktop and iOS medium-fidelity screens based on the research I had conducted, suggesting 4 major changes:

prototype1.jpg
prototype2.jpg

Prominent place for social media icons
 

Based on the needs of my persona, additional changes has been made, included creating clearer, more prominent places for the social media icons, find reviews.

'NEW' category promoted
 

100% of the tested users showed interest exploring the newest products of the MoMA's shop first. Now 'New' located at a primary place at the navigation bar.

 
prototype3.jpg

faster checkout PROCESS
 

Through user tests I have discovered that 'Review Order' screen was found to be redundant. Checkout process screen was redesigned so the purchase details are presented throughout every screen of the checkout process. As a result, 'review order' screen turned redundant.

Clearer navigation
 

At the mobile version, both primary and secondary navigation bars has been condensed into one. 100% of the users found it simple, intuitive, and easy to use.

 

Looking for the prototype? It can be found at the top of the page, or right here.

Experimenting with the prototype as a user, you are tasked with:
1. Locating an item
2. Adding it to the shopping cart
3. Go through the checkout process