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 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?
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 on 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.
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.
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.
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.
- Reverse main and secondary navigation bar.
- Revise secondary navigation bar.
- Continue working with mobile app designs.