Eataly.com
My Role: UX Design Student — Duration: 2 Weeks — Platform: Responsive website
Tools: Sketch, Invision, Optimal Sort, OmniGraffle, Adobe CC, Google Forms
Project overview
Eataly’s brick and mortar locations in the USA comprise an Italian-food market and restaurant collection featuring restaurants, and provisional counters and stalls, including a fishmonger, butcher, produce, espresso bar, wine store, cheese store, cooking school, kitchenware department and more.
My challenge was to assess the online store and make recommendations for changes that would benefit Eataly's bottom line. This project focuses on the e-commerce’s navigation, product pages, and checkout experience.
research
Contextual inquiry
The first step in my research was a visit to Eataly’s Flatiron location. I wanted to see how shoppers browsed, what they seemed interested in and what, if anything, they purchased.
What I observed told me that whether Eataly customers are browsing casually or adhering to a shopping list, they’re looking for interesting items: for unplanned meals or just to try something new.
What stood out in every instance was how keen shoppers were to read the back of every package, from pasta to pesto.
Testing existing product
I asked a handful of professionals and homemakers from about 25–45 and set them to some shopping tasks to see how they responded to and managed through the existing product. Generally the experience is effective overall; the biggest trending pain point was hesitation within tasks regarding the global navigation.
Once again, whether scrolling/browsing or seeking a specific item, the same behavior stands out: from sauce to books, people want to see what’s inside.
Heuristics
Above, results of heuristic grading. (Scale of 1–5, with 1 representing a failure to deliver the expected quality and 5 being a reasonable success.)
I also analyzed the site using a heuristics method called “The Abby Method.”
The grades echoed several key findings from existing product testing:
Confusion caused by both breadth and depth of global navigation
Filters within each category go unnoticed and/or seem inconsequential to casual user and go unused
Lack of nutrition information and ingredient information hurts the site’s credibility because there’s no way to really check the quality aside from trusting the brand
The checkout experience is fairly simple but the shipping options present confusing language
Card Sorting
To address the site’s existing broad and, in some cases, deep global navigation, I set up card sorting exercises using optimalworkshop.com.
During the initial closed sort exercise using Eataly’s existing navigational categories, I did find that participants, on average, were uncertain as to which items constituted “Gifts” and “Best Sellers.” When they created their own categories in an open sort, they didn’t create a Gift, Best Seller, Favorite, Easter (the holiday promotion at the time of testing) or Fresh categories. In the open sort, Olive Oil was most often grouped with items that currently are listed in Pantry or might be considered condiments.
Considering the competition
In addition to providing a comparison on what features might be lacking and what might be desired by users, a quick analysis of Eataly’s competitors and comparison retailers influenced who might be shopping at Eataly…and who might be converted to an online customer.
Tier 1 and 2 competitors’ target audiences include professionals and homemakers who demand both high-quality and high-end brands.
Persona
User journey
Problem Statement
Customers enjoy Eataly’s quality, high-end brand experience. Whether shopping for themselves or others, they want to know what they’re buying will hold to that brand.
How might we provide an online shopping experience that ensures an extension of that quality brand experience and delivers informed choices?
research to design
“Why is this here?” → Reclassified navigation categories
From the card sorting I touched on earlier, we re-catagorized the global navigation (user retention adds revenue)
“Where is this?” → More robust filters that are obvious and useful
We noticed that people were overwhelmed by the results they got on each page, but weren’t noticing or not comprehending the filters (users will find the experience more delightful and less overwhelming)
“What’s in this?” → Ingredients & Nutrition on product detail page
Going back to the contextual inquiry observing ppl picking things up and reading, but also something we saw with usability testing, people were looking for more information about the contents (strengthen user faith in quality)
“What does this mean?” → Clearer shipping language
The language in the shipping selections was confusing to people (avoid business drop off so close to end of purchase)
design
Potential display of nutrition information label; needs to be further researched for availability on international project and time for scanning in. Current prototype displays this as text.
Potential ways to resolve perceived wasted space and confusing information upon arriving at checkout page
Mid-fidelity wireframes: changes implemented
Though we kept the global navigation broad, we decreased it’s depth to avoid both extending/collapsing menus and encourage use of a newly designed filter (detailed in the next section) once a category is selected.
In contrast to the existing filters, which went unnoticed and unused during our usability tests, the newly designed (and for some relocated) filters provide an obvious, efficient way for users to filter their choices.
Ingredients and Nutrition tab added to enhance product information; Description and details will still give a story and producer background but now consumers will be able to view ingredients and make informed decisions as needed.
Moderate changes made to Checkout page to keep customers focused on the purchase task and not get distracted by spacing and language.
Re-design Usability Test Findings
Scenario + three tasks
You’re expecting out-of-town guests for dinner and won’t have time to cook. You’ve decided a sauce from Eataly will do nicely. You remember that one of your guests is allergic to milk, while the other won’t be happy with anything but a tomato-based sauce.
Tasks:
1) Find a tomato sauce on Eataly.com
2) Make sure it doesn’t have any hidden dairy in the ingredients
3) Buy the sauce from the online store
Metrics:
Task 1: Global navigation remains broad and confusing to 3 out of 4 testers. Users would prefer a more obvious gateway to pasta sauce than the title “pantry” and only complete this task successfully by carefully considering each navigation category and assuming sauce will be in with oil.
4 out of 4 users, however, go immediately to the redesigned filter categories to search for tomato sauces specifically
1 out of 4 users wants the ability to specifically filter for “non-dairy.”
Task 2: 4 out of 4 users immediately navigate to the ingredient listing to check for dairy products. 3 out of 4 do initially get distracted by the Details listing which is open when the product detail page first loads.
Task 3: 4 out of 4 users smoothly navigate through the shopping bag overlay through to checkout. In the first iteration of the test, 1 out of 4 notes that “Same as billing” notation should be at the top of that section so that she doesn’t start filling out all of the same information again.
Moving forward
It’s clear from user testing at this point that the global navigation is still a bit flawed in that its breadth is overwhelming to users. They can accomplish their tasks with some weight on their cognitive load.
We recommend further efforts in relation to card sorting exercises to clarify how we might better define navigational categories and groupings. A sampling of 100 inventory items from Eataly was intimidating to many participants. We would like to try this study again for more in-depth results.
We’d also like to explore the following, summarized:
whether the chat function should be more prominent to emulate in-store advice available from experts on site
incorporating user reviews of products
evaluating the best use of promotional banners
aadding suggested items into the description, making recipes more readily available and connecting additional ingredients for sale.