Eataly, with its flagship NYC Flatiron store, is a shopping experience curated by famous chef Mario Batali. The idea behind Eataly’s physical store is to deliver Italian fine foods and eateries all in one space. The layout is chaotic and evokes buzzing visions of food markets akin to Italy and Istanbul. While the chaotic layout and navigation of the store may be a welcome differentiator of the store, the word chaotic doesn’t translate well to a website.
As part of a team of 3 UX Researchers we set out to test the usability of the current Eataly website. Testing began with finding then purchasing items and ended with finding restaurant lists as well as signing up for classes. This article will share our research findings as well as depict the proposed redesign of the desktop website. We will be looking to confirm whether a redesigned navigation provides a simpler and more efficient way for customers to complete their tasks online.
Contextual Inquiries >> Personas
The research team spoke to and shopped along with 9 individuals at Eataly’s NYC flatiron store. The findings helped evolve two personas, the local and the tourist, Eataly’s main customer base.
The tourist became the main focus persona for this project. Upon speaking with locals they hardly use the website, they pop in and out to pickup a few ingredients. Tourists like Tara are more likely to stop by the online store and therefore the design is based on her needs.
Prior to design it was paramount that we see how Eataly is positioned against its competitors.
The questions were:
What features does Eataly.com offer as compared to their competitors?
What do they do well on their website and where can they improve?
Comparative and Competitive result:
Eataly ranks well with high-end customer needs for perks like: classes, on-line recipes, and newsletters/magazines.
Eataly ranks poorly on basics such as navigation and product details.
We examined the website of their competitor Citerella looking at findability and navigation. While both Eataly and Citerella’s checkout process seemed cumbersome, Citeralla beat Eataly’s website in some key areas.
- Cleaner and simpler
- Had less promotion and clutter
- Easier navigation | Fewer categories
- Categories led directly to product
- Product detail pages were cleaner and more descriptive
Usability Testing = Navigation overhaul
Testing further proved that Eataly’s 10 global navigation categories needed to be distilled down.
ITEM SELECTION: Pasta Sauce — users had issues finding Pasta sauce. Most testers looked under “Sauces” while it was actually under “Tomatoes”!
SERVICE SELECTION: Restaurant Menu— users searched up and down the site for a restaurant list. Eventually restaurants were found in the store sitemap or in the FAQ. While ultimately a successful task it was very cumbersome to find the list.
3 card sorts were done with | 101 cards | 4 participants | 1 week
The goal: from user item groupings come up with a smaller number of logical global navigation categories for the redesign.
Closed sort (Eataly’s current categories), Open sort (User defined categories),
Closed sort (Newly defined categories).
Findings: Newly iterated categories in sort 3 provided much less confusion among the participants. Navigation menu cut from 10 categories to 6. Possible shorter navigation time by 1 minute based on the final sort.
The sketches depict first designs based on distilled navigation and simplified checkout.
Moving to Mid-Fidelity (Desktop and Mobile)
TASK FLOWS OLD >> NEW
The redesign features a new navigation menu and a streamlined checkout.
USER TESTING ROUND 1
Desktop and Mobile Scenarios/Tasks:
Scenario 1: You are visiting New York this week and Eataly is the first stop on your agenda.
Task 1: Find Eataly’s restaurant list / menu
Task 2: Find classes and sign up.
Scenario 2: You’ve enjoyed your stay and loved Eataly’s flatiron store. Your bags are full but you wanted to buy some merchandise for your folks at home.
Task 3: Find a gift basket for under $100, buy it and checkout.
Task 4: Find pasta sauce, buy it and checkout.
Summary of Tester Comments and Results:
•3 of 4 testers completed all tasks successfully.
•Only 1 tester missed 1 task (restaurant list).
-Mobile app the “shop online” button was clicked more often over the hamburger.
-More info needed under the restaurant name in the listings.
-Mobile app the “+” icons were being clicked over the category words.
-Consider building detail page for gift basket.
-Restaurant result page was ambiguous; make it more clear it is a list of restaurants.
USER TESTING ROUND 2
Observation: First redesign is regionally biased
- 2 testers from New York found the restaurants list and classes list under the “IN-STORE” category.
- 2 testers from the Mid-West haven’t been to Eataly and were unaware there are restaurants in the store or they offered classes.
Since “IN-STORE” confused the non-New York testers, which is in fact our persona of the tourist, there is a need to ensure that the category is less vague. To solve for this issue the category was changed to “Restaurants/Classes”.
TAKEAWAYS AND CONCLUSION
Eataly online was a great pick for a redesign project. Many tests of the current website proved issues with navigation.
Each piece of research helped develop the final iteration of the redesign proposal.
Contextual inquiries >> Customer base, locals and tourists.
Card sort >> New categories.
Heuristics >> Simpler and cleaner site.
User testing >> Regional bias and category change.
- Test Restaurants/Classes category
- Further develop the prototype into hi-fidelity.