Improving Checkout Process
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.
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.
Sketch, Photoshop, KeyNote, Invision
7 days with another UX designer and 6 days by myself
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
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
I created a Site Map for the existing version of the website including the top level categories as well as their subcategories.
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.
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.
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.
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.
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.
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.
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.
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.
I created both desktop and iOS medium-fidelity screens based on the research I had conducted, suggesting 4 major changes:
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.
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.
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