Eataly — creating responsive web designs
UX Design Immersive
Introduction
New project brought me my new team. I was excited to work with Ellen and Dave as they each brought specific skills to the table. Our objective was to create responsive web design for one of the more exclusive food chains you can find- Eataly. Our task was to research the current users (store and web) and come with recommendations to improve the web design for Web and Mobile application. All that within one week, after which I parted my team to work individually on my wireframes, iterations and ultimately presentation to a mock Eataly’s Managerial panel.
Eataly
Eataly is an upscale gourmet store, largest in Italian marketplace in the world, comprising different restaurants, food, beverages, bakery, retail items and workshops and cooking school. Eataly has also a website through which it sells limited number of products, mainly gifts and specialty products
Eataly is all about quality of food and education. Their famous slogan is “Eat, Shop, Learn”. Eat relates to their many restaurants in the store as well as food for purchase. Eataly often advertises that their gourmet restaurant’s menu is made of most products people can find in the store. Also their philosophy on Food to Table or Slow Food is at heart of the management. Customers can also buy quality food and specialty items. Important part of Eataly’s policy is to educate customers about their products and where they come from. Customers can learn about farmers who provide the food, and where it grows, and how it is farmed. Due to this special treatment the customers are extremely loyal to the brand and trust in the quality of the products.
The Web
Compared to the store, the web experience is very different. It is worth noting that most of the in-store customers do not know that Eataly offers its products online. Further analysis concluded that the web customers are very different. While in store customers consist mainly of tourists, Upper class, and white collar for lunch the website’s customers mainly visit to buy specialty items and gifts.
The Problem Statement
The natural inclination was to try encouraging current store goers to visit website. The problem is that website does not offer the same experience as the store. Our research indicated that people did not find the website exciting at all. Therefore our problem statement was born:
The assumption was that if we build a platform where users can be inspired and engaged then they will be more inclined to visit more often
The Research
To comprehensively understand and analyze current users we utilized couple of techniques:
- Screen Survey
- Contextual Inquiry
- Card Sorting
- Heuristic Evaluation
- Usability Testing
- Competitive Analysis
- Feature Analysis
Screeners allowed us to gather statistics about people’s habits regarding shopping online and specifically grocery shopping. It showed us, for example, that only 37% of people shop for groceries online, but they do not shot at Eataly.
Contextual Inquiry was extremely useful. It allowed us to talk to and observe the customers in their “natural habitat”. What stood up right away is how healthy people looked. Another interesting observation was that people were really looking at and studying labels of every product they picked up. They liked to talk to the sales people, and they food carts were not overpacked. The interviews with the users indicated that they shop approximately 2 to 4 times a week, are a returning customers. They understood that the price is a bit high but felt it was well worth because of the quality of food they were getting in return. Loyalty and connection to the brand was felt right away.
Employees, on the other hand, were knowledgeable of the product they were in charge of. A manager for Cheese section told us about the programs employees are required to take to learn about food origin and how it is made. Just talking to her we learned a lot about cheesemaking and we can now see why customers appreciate such attention and service.
Card sorting was a new tool we learned in class that helps figure out the proper categories for food items. We did three round of card sorting. First it was a closed round, where we gave testers 100 items to sort between categories provided by the store. We received back 5 completed studies and we learned from it that some current categories were misleading. The most notable was the section “fresh” which contained mostly meet, however customer thought that “fresh” means vegetables. Also, categories like “tomato” and “sauce” was confusing when people tried to categorize “tomato sauce”.
The second round was an open cound where users chose their own categories for the 100 items we provided. 5 testers completed this exercise and on average created 15 categories. We learned from it that some categories have very close association.
The Thirst round was, again, a closed one. We provided new, updated categories and asked users to sort the same cards. The results were mixed, however it confirmed our assumption to change the category “Fresh” to “Butcher”.
After card sorting we performed a Heuristic Evaluation, which is a professional overview of the current website.
We found couple of areas that need to be improved: In Product section the recommendations were as follow :
- Remove 15 items per page function, replace with product reload on the same page
- Large pictures in front of the product list add additional scrolling motion which was not welcomed
- Product detail was insufficient (Eg: shows only SKU #)
Categories section could address the following:
- Reevaluate categories (Ex: category “Tomato” and category “Sauce” under “Pasta and Pantry”. Where does one buy Tomato Sauce?
Some filters were not useful
- State/province didn’t really help much when choosing a product
Magazine section had the following notes:
- Recipes section was difficult to find
- No option to filter the recipes
- Limited number of recipes displayed on each page
Our many rounds of usability testing confirmed the heuristic evaluation. Many comments pointed to the same problems but also indicated new ones:
Sales Advertisement took a lot of the page’s real estate which made the web feel less exclusive. Users also didn’t appreciate the Checkout section being condensed to one page. Instead, they would prefer to see it broken down into at least 2 to 3 section so it would not be so overwhelming.
Competitive and feature analysis gave as an insight about the differentiation as compared to competitors. The closest competitor was WholeFoods. That seemed correct because many of the interviewees at Contextual Inquiry mentioned WholeFoods as the store they attend as well. However since Eataly was perceived as a specialty store — they were well differentiated from WholeFoods.
One problem that was apparent through Feature analysis was that competitors had easier returns and faster deliveries. This was something that Eataly could work on to improve.
Summary of findings
To summarize the findings, the following iterations to the current website were recommended:
- Refine checkout process
- Build out product detail -more engaging
- Refine categories
- Display recipe section
- Remove large photos
- Decrease amount of Sale Advertisement
- Update the entire website for more sophisticated look
Moscow matrix helped me prioritize those findings and concentrate on the most pressing ones.
The Personnas
The above research gave us a really good backup to update the personas we inherited from 5 years ago. We created Chester and Maggie as the primary persona and Michelle as a secondary persona.
Chester and Maggie are in their late 30’s, middle-upper class, work in finance and Jewelry Design. Cooking is their hobby and thy love cooking authentic food, hence they often need specialty, They shop at Eataly but do not know of the Website.
Maggie, on the other hand is well in her 40’s. She is an established entrepreneur and often needs to buy gifts as a promotional tool for her business. She feels that money is not an issue it it comes to good quality food and she is not afraid to spend money so that her family can eat healthy. She often looks for an inspiration in recipes.
The User Journey
I created user journey to solidify and illustrate what our persona goes through emotionally and physically when performing a common task.
The sketches
Having Moscow Metrics and Personas made it easy to design sketches of first wireframes. I already had in mind what we need to do what I will prioritize. I knew I wanted to engage users to give them better experience navigating the website. I looked at many website, competitors and not, to decide what look I wanted to give my iterations.
The Wireframes & Invision
Wireframes slowly came alive. The first one was the most difficult to make. But one by one all 30 wireframes came to live over 3 days period. I created mobile version first and then moved to desktop. My mobile version had a different path than the desktop version. Mobile was about an experience of buying a product, an olive oil. The path went from the homepage, through filtering Olive oil selection, to going through cart, then checking out as guest and ending on getting the order confirmation. I also made wireframes for buying a gift box, however I never uploaded them to Invision. Web wireframes had shorter task flow, in fact only 8 wireframes. It was because the task was to look up the recipes, so I made sure the user didn’t have to have many steps.
The wireframes were connected in Invision:
The Usability Testing and Iterations
My Wireframes went through two rounds of usability testing and two + rounds of reiterations. One major component was how the user added items to the cart. The first prototype kept the way the original website had it and it met with user’s disappointment. It worked that once the user clicked the button “add to cart” it changed to quantity. Users wanted to choose quantity first before adding item to the cart. Iteration corrected that with a separate component of allowing user to use quantity before adding to the cart, however the usability testing shown that users wanted the fixed quantity of 1, instead of 0.
The next major iteration was to increase the text size, which changed the layout of the page. The text size will definitively have to be addressed for further iterations.
The User Journey
Just with the above prototype our users’ journey can be greatly improved. For Chester and Maggie, they can easily buy olive oil and at the same time stay positive and engaged, at the same time learn from the video or recipes ideas as well as book a cooking class. Happy users mean returning users.
As for Michelle, she is able to find her recipes easily. In addition she has an option to buy specialty items from that recipe and also watch some educational videos. Her user journey has improved greatly.
The Conclusion
It was definitely my best project and work yet. It had the best combination: have a backing of a team for the research part but have full control of the design.
However, there are plenty reiterations ahead. To do that I would continue Usability Testing for the third iteration. UT is extremely helpful for the iterations. I would also change the layout to allow for even bigger text size. I also need to address the quantity item for the box. Users definitely wanted to have fixed 1 before adding it to the cart. I would also re-design Log-In page to make it simpler to log in and Implement review ratings on products. Last but not least, I would repeat card sorting to refine food categories
