A Case Study



The MOMA store website sells a selection of products highlighting the latest in materials, production, and design concepts from around the world. It has 9 categories in its main navigation bar, which leads to their selection of products. 


The Problem

The MOMA store website has to make changes to keep up with retailers such as Amazon. How can we help users identify items quickly and provide a check out process that is simple, fast, and informative?


The Opportunity

I will be re-designing a clickable laptop prototype and a mobile app around an online shopping experience. My design should meet the goals of the users, the goals of the business, and the goals of the brand. I will also incorporate responsive web design and information architecture in the design and layouts. 


My Role and Timeline 

UX Designer, 2 weeks

User Research-Contextual Inquiries


My colleague and I went to the MOMA store to gain insight into potential customers. I interviewed 3 users.


  • Indian woman- She wanted to buy small things (toy helicopter, small plush) as gifts for her immediate family to fit in her suitcase.

  • English woman- She wanted to buy a gift for her son that had a comic book related image on it.

  • Colorado man- He wanted to buy a possible book based on his son's interest.




Based on the interviews and after synthesizing data from our contextual inquiries, I noticed trends, (parents buying products for their children) and I chose my persona Trung. He is similar to all the users; he is a parent buying products for his daughter.


Evaluations-Competitive and Comparative Analysis


We choose The Met, Neue Galerie, Whitney, and the Guggenheim as our competition. We choose Ikea and Flying Tiger as comparative models. Both analyses concentrate on design and cost; MOMA has innovative design and high in cost.


Card Sorting


We did open card sorting and closed card sorting with 100 items from the MOMA. Users renamed the categories from the navigation bar, and we took the labels and used them for our Sitemap.




Using the labels from the card sorting exercise, we revised the sitemap for the MOMA shop page. The revised sitemap is more condensed and re-organized. 


Original Site Map

Revised Site Map

User Flows


We sketched out our MOMA user flow from Homepage to check out. The hero photo, main navigational bar, and search bar paths are color coded and included. 




I started the wireframes in Balsamiq. I designed the home page, product page, add to cart page, sign in page, and started the shipping process. 

Screen Shot 2017-10-12 at 11.11.23 AM.png

User Testing


Then I did User Testing. I interviewed 3 users, there were 15 questions, and it lasted around 15 minutes.


KEY TAKEAWAYS from User Testing:

  • Secondary Navigation Bar is confusing.

  • Some text is too small.

  • What’s New tab is hard to find.

Medium Fidelity Wireframes


Then I moved on to medium fidelity wireframes in Sketch. I changed the header and footer (global elements), removed the bottom navigation but kept the layout the same. 


Laptop Mockups


Mobile Mockups


Prototype Video


Next Steps

  • Reverse main and secondary navigation bar.

  • Revise secondary navigation bar.

  • Continue working with mobile app designs.