Eataly E-Commerce & Responsive Design

Overview
Eataly is the largest Italian marketplace in the world, comprising different kind of restaurants, food and beverage counters, bakery, retail items, and a cooking school. Eataly is a global brand with stores all over the world. While the physical stores are valuable to the company, its e-commerce site plays an extremely important role to the business as well. Therefore, it is necessary to constantly improve the shopping experience for both its desktop and mobile website customers.
My Role
My role is to rethink and redesign the current Eataly website in hope of providing a smooth and simplified shopping experience while maintaining the identity of the company.

Research Methods
A series of research was conducted.
1.Competitive and Comparative Analysis
At first, I conduct a competitive and comparative analysis. It is to compare the features of Eataly to other similar competitors including both physical store and online website.


Based on the above study, it is important to understand what valuable features that other store have and potentially can incorporate to Eataly.
2. Card Sort: 100 Eataly Products

In this research, I provided 100 Eataly products and asked participants to arrange these items in OPEN CARD SORT exercise to come up with their own categories for the products.




I then continued to ask participants to perform CLOSED CARD SORT exercise to further understand the given categories and their sub-categories sorting.




3.Task Flow
The next study is to investigate web and mobile task flow. I have used a similar competitor Dean & Deluca to analyze. It appears that the steps from home page to order confirmation page took many steps to complete.


Then I looked at the current Eataly Website. It took less steps to complete a purchase than Dean & Duluca.


Based on the card sort exercise and task flow stud, I know that it is important to have clear categories and sub-categories for users to navigate as well as to complete their purchase.
4. Contextual Inquiries & Fields Studies Insights
I went to visit the store Eataly in Flatiron district, observed and interviewed different people there.




Key Findings for Eataly customers:
- value quality and is willing to pay more for it
- trust the quality of products at Eataly
- appreciate Italian culture and enjoy Italian cuisine
- come for their gift needs
- like to travel the world
- are experimental cooks
Persona
I have two persona to focus on based on the CONTEXTUAL INQUIRIES & FIELDS STUDIES INSIGHTS. I need to understand their needs to design a website for them. I specially focus on the persona of Chester and Maggie.


Needs From Online Store
- access to variety of food ingredients from different countries
- quick access to a range of options
- be reassured of a products authenticity
- recipe suggestion
- a feeling of relationship with the brand
Pain Points
- lack of sufficient product descriptions
- difficult navigation
- expensive shipping charges
- complex return process
- difficulty finding specialty items
Site Map

I started to study and created the site map of the existing Eataly website with OmniGraffle.
I found that there are too many categories and sub-categories in the current site and with the needs of the persona in mind, I want to narrow down the grouping. So it will be easier for users to navigate.
Revised Site Map

Design Studio
The next step I did sketch to use low-fidelity wireframes to understand the site (desktop and mobile) and also come up with the revised desktop and mobile pages using wireframes.


1.Low-Fidelity Wireframes


Besides reducing the categories and sub-categories, I also placed “SHIPPING & RETURN” at a more clear location.






In the product page, I have added features of product rating, customer reviews, writing review, and suggested recipes. Users can not only share through Facebook, twitter, and email, but also with Instagram now.
2.High-Fidelity Wireframes
I then used Sketch to do a high-fidelity wireframe and InVision to do a clickable prototype.

Usability Testing
I asked 4 people to conduct usability testing on the prototype.


Key findings from usability testing:
- show how search bar can be functioned (2 user pointed out)
- Eataly Prime membership is such a great idea (3 users pointed out)
- It is hard to notice the Shopping Bag after adding the item (1 users pointed out)
- This website is easy to navigate (4 users pointed out)
- The categories are clear (2 users pointed out)
Next Steps
After the feedbacks from the users, I want to incorporate their ideas and comments to the next iteration. The overall website layout has still too much information; therefore, this is another task I will focus on, to create a more simple and easy to view website. Eataly Prime Membership I proposed seems to be an attractive feature so that member can enjoy special promotion and free shipping. I hope to add New Arrived Product to attract more new customers to help the e-commerce business.
