<p>Published on <a href="https://blog.prototypr.io/eataly-280139e2daa0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Evan Tyerman </p>
<h4>Website Redesign &amp; Optimization Project</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ouEXu8TodRxqbPHmbg1FuQ.jpeg"></p>
<h3>Background</h3>
<p><strong>Challenge:</strong> To discover pain points and frustrations for users of Eataly.com. Then to redesign and reorganize the site to address these pain points.</p>
<p><strong>Tools Used:</strong> Sketch, InVision, OmniGraffle, contextual inquiry, screener survey, usability testing, competitive analysis, heuristics evaluation, card sorting, user personas, task &amp; user flow, user journey map, site map</p>
<p><strong>Timeframe:</strong> 2 weeks</p>
<p><strong>Deliverables:</strong> Prototype, 7 minute client presentation, research documentation, specification documentation</p>
<p><em>**Note: This project is solely for educational purpose. This is not a real-life project, as much as I wish it was!**</em></p>
<h3>Phase 1: Research</h3>
<p>Multiple research methods were used with two goals in mind:</p>
<ol>
<li><strong>Get to know our client</strong></li>
<li><strong>Get to know our users</strong></li>
</ol>
<h4>Brand Assessment</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eF7Z4U8o9BabNPbsRK4LhQ.jpeg">How Eataly explains itself to its users</p>
<p>We performed a full assessment of Eataly as a company to kick-off our research phase. Eataly is the largest Italian marketplace (food hall) in the world, comprising a variety of restaurants, food and beverage counters, bakery, retail items, and a cooking school. But our research found that Eataly is more than a marketplace; it is a community of food enthusiasts. Eataly is a place where foodies can go to discover and learn about what they love.</p>
<h4>Heuristics Analysis</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/722/1*vDjed9z1qb9TPI87LEMcwg.jpeg">The 10 heuristics that were evaluated, based off the 10 heuristic principles from Jacob Nielsen</p>
<p>To understand the landscape of Eataly.com, our research team chose to evaluate both Eataly and its competitors heuristics. We found that although Eataly prides itself with helping users discover new and interesting things, things on the website were very hard to find or navigate to.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/804/0*PeaqLC4kdXSWjIWx."></p>
<h4>Competitive Analysis</h4>
<p>We pitted Eataly’s site up against other similar sites that we determined could be competitors to Eataly. It was surprising that Eataly did not have any real direct competitors, but the three companies that we determined were selling similar items and discoveries were <strong>Whole Foods</strong>, <strong>Dean &amp; Deluca</strong>, and <strong>Williams Sonoma</strong>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1ntWAiZ0J005QXNLw6jQQg.png"></p>
<h4>Contextual Inquiry</h4>
<p>To gauge how users were interacting with Eataly as a company, we went into the store to conduct in-environment observational research. We accompanied a number of subjects around the store as they shopped for items. One couple matched well with the user personas given to us by the client, as they love to cook, and the quality of ingredients matter heavily to the user. I was starting to see a trend, that users love to find new recipes and be able to make them easily.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bw4OIAMH2YD4aDQKIpfpxw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*O-3DGXcVtkS_5s0UX8CjGQ.jpeg">Left: I accompanied two ladies as they shopped for ingredients for a veal gumbo recipe. Right: Research team members talk to a woman as she she is shopping for groceries.</p>
<h4>Usability Testing</h4>
<p>Since we saw how recipes was a topic area of interest with us, we decided to conduct some usability tests focused around finding a recipe, and buying items for that recipe. Here are some insights we pulled from testing:</p>
<ul>
<li>Users found it difficult to find recipes, as they were hidden under the magazine section.</li>
<li>It is difficult to navigate the way items were categorized.</li>
<li>Competitor Whole Foods had a simpler site that was easier for users to navigate.</li>
<li>There is a serious problem in how Eataly tags their items, because some users were not able to go from a recipe and find an product for sale that was in that recipe.</li>
</ul>
<h4>Card Sort</h4>
<p>Since we saw it was difficult navigating the site, we developed a few card sorts. This was to discover any pain points, frustrations, or confusions with how the navigation of the site is laid out. We conducted 3 card sorts in total; a closed card sort where users sorted cards into pre-determined categories, an open card sort, where users got to sort cards into categories they chose, and a hybrid, a mix of both.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ag1dl6HXRU0lbYfu.">An inventory list of all our cards and what category they currently belong in on the site.</p>
<p>The closed card sort helped us determine if there are any pain points, as well as if there are any items that are confusing. One item in particular stood out during the closed card sort, and that was the “Tomatos” card. Users 100% of the time put Tomatos under the Fresh category. The open card sort helped us discover what categories users thought should exist. Some interesting findings from that were that Best Sellers and Holidays categories shouldn’t exist at all, and that recipes and classes were normally grouped together.</p>
<h4>Mapping the Experience</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/569/1*CQNdq0fSfGlY80STcVghXg.jpeg">The task flow for how a user could use a system to find a recipe and buy an ingredient for that recipe.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6qf03XdnhzXLgAmMQ6ViEQ.jpeg">The user flow for how a buyer would navigate Eataly.com to perform the above tast;<img alt="" src="https://cdn-images-1.medium.com/max/792/1*FAhs2PAbtIfsbtxg8bDe6Q.png">To get a better understanding of thoughts and highlights from a user’s current experience with Eataly’s site, we developed a User Journey.</p>
<h3>Defining the Problem</h3>
<p>Our clients gave us personas that were 5 years outdated, and we could tell from the extensive research we performed. So we decided to update their personas for them. Major things that changed were Maggie and Chester were split into one persona, Maggie. And Chelsea was more of a remote user, who has only been to Eataly on one of her travels.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lYKZf1Q9ecALHPKHZwifvQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OGt67qVZXjyrZaKgA_2pvg.jpeg">Our primary user, Maggie from old (left) to new (right)<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8yO0JSaTsCBaeKUffeE9-A.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3LI8Ww2zEDz3aNy3G2qOZg.jpeg">Our secondary user, Chelsea from old (left) to new (right)</p>
<p>Now that we had a clear understanding of who our users were, we can now take our research and develop a problem that we saw stand out. It was clear at this point where the issues lied on the website.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/960/1*LPGJf_aI-a8bzbPgo8bU3g.jpeg"></p>
<h3>Phase 2: Design &amp; Test</h3>
<p>So the design that stuck throughout this process was the idea of simplifying the nav bar into the three categories that Eataly uses to describe itself: Eat, Shop, and Learn. This allowed for recipes to go under Learn, along with the classes. All the shopping went under Shop, and finally, any in-store dining or events went under Eat. Below you can see how the design changed after each iteration due to usability testing and feedback.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vs__kHRKzNOu8AMDfOf9QA.png">The homepage for the redesigned site. All the menu items are under only 3 categories.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tAMXbJPrg3_izwjvwchKKQ.jpeg">Recipes landing page, where the user can now filter recipes and scroll to look at more recipes.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gZ4ATSM-dSiGi7QHB1VfVQ.jpeg">The recipe page mostly stayed the same, I just moved around the “Related products” section so it is more visible.</p>
<h4>Testing</h4>
<p><strong>Task Scenario 1 — </strong>User can navigate to the recipe section with ease.</p>
<p>Metric for success: User arrives to the recipe page.</p>
<blockquote><p>As an avid cook, you love to shop at Eataly for gourmet items. How can you find new things to make using Eataly’s site?</p></blockquote>
<p><strong>Task Scenario 2 — </strong>User is able to filter recipes based on dietary restrictions</p>
<p>Metric for success: User uses filter to sort recipes.</p>
<blockquote><p>You friend is coming over for dinner tonight, and she is a vegetarian. How can you find something for you to make for the both of you.</p></blockquote>
<p><strong>Task Scenario 3 — </strong>User is able to find a product in the online store that is in a recipe</p>
<p>Metric for success: User clicks on the link in the text. OR User clicks on one of the products at the bottom.</p>
<blockquote><p>Scenario: So you found this delicious recipe for Vesuvio pasta salad. How can you acquire one of the items in the recipe using Eataly’s website.</p></blockquote>
<p><strong>Round 1</strong></p>
<p><em>Metrics</em>:</p>
<ul>
<li>4 / 4 users were able to navigate to recipes</li>
<li>2 / 4 users navigated to recipes using the magazine section</li>
<li>1 / 4 users navigated to recipes using the nav bar</li>
<li>2 / 4 users initially clicked EAT before clicking LEARN</li>
</ul>
<p><em>Insights</em>:</p>
<ul>
<li>Users are confused what menu items go under EAT</li>
<li>Categories are vague and confusing initially, but make sense when you see what is in them</li>
<li>Some users would prefer to search recipes rather than filter them</li>
</ul>
<p><em>Iterations</em>:</p>
<ul>
<li>Increased fidelity to mid-fidelity wireframes using Sketch</li>
<li>Build out sub-menus fully</li>
<li>Create a clickable prototype to make tests easier to run</li>
</ul>
<p><strong>Round 2</strong></p>
<p><em>Metrics</em>:</p>
<ul>
<li>2 / 4 users clicked the “Learn” button initially</li>
<li>1 / 4 subjects used a filter to find a recipe</li>
<li>1 / 4 users navigated to recipes using the nav bar</li>
<li>2 / 4 subjects looked through the list to find a recipe</li>
</ul>
<p><em>Insights</em>:</p>
<ul>
<li>Users took many different routes to find a specific type of recipe</li>
<li>Some found the wording of “Available Online” and “Available Elsewhere” confusing</li>
<li>Users wanted Product Suggestion to be more prominent</li>
<li>Users are still confused about the items under EAT</li>
</ul>
<p><em>Iterations</em>:</p>
<ul>
<li>Increased fidelity to high-fidelity</li>
<li>Rethink the EAT menu option to be about in-store dining</li>
<li>Removed “Available Online” and “Available Elsewhere”</li>
<li>Move suggested products section to sidebar</li>
</ul>
<p><strong>Round 3</strong></p>
<p><em>Metrics:</em></p>
<ul>
<li>3 / 4 found recipes under “Learn” in the menu</li>
<li>3 / 4 users clicked the “Learn” button initially</li>
<li>3 / 4 subjects used a filter to find a recipe</li>
<li>3 / 4 successfully found the pasta by using the recipe, 1 failed</li>
<li>2 / 4 did not notice the “products in this recipe” box right away</li>
</ul>
<p><em>Insights:</em></p>
<ul>
<li>Users clicked the eat shop learn buttons more than going to nav bar</li>
<li>Users want more information about the recipe</li>
<li>The “Products” box is not very visible in it’s new location.</li>
</ul>
<p><em>Iterations:</em></p>
<ul>
<li>Take away the EAT, SHOP, LEARN buttons</li>
<li>Put “Items In This Recipe” above “More Recipes”</li>
<li>Test on mobile site</li>
<li>Find a place for other menu items that were displaced during the navigation bar redesign</li>
</ul>
<h3>Phase 3: Deliver</h3>
<h4>Prototype</h4>
<p><a href="https://invis.io/QVE6YTPUT">Click here to view the project `Eataly &#8211; Mid-fi Usability Test`</a></p>
<h4>Presentation Deck</h4>
<p>I had to give a 7 minute presentation to stakeholders in the project about my current status with the project after the 2 week period.</p>
<p><a href="https://docs.google.com/presentation/d/1Iw3SZwrQoOhHfHxYL-mgOet9U7UEPatXZV4pSuRhueM/edit?usp=sharing">P3 Presentation</a></p>
<h4>Specifications Document</h4>
<p>The clients wanted proper documentation throughout the design process, so they can give this project off to another designer. Thus I created an extensive, 50 page spec doc where I documented all pertinent information in a stand-alone document.</p>
<p><a href="https://drive.google.com/open?id=0B0z-naB6G87wbXdBZHBVUHdWOEU">Eataly_Spec Doc.pdf</a></p>
<h3>Next Steps</h3>
<p>These are just a few of the different steps I would take to continue this project:</p>
<ul>
<li>Take away the EAT, SHOP, LEARN buttons; replace them with something else</li>
<li>Make sub-menus pop up when the user hovers over a menu item (InVision limitation)</li>
<li>Put “Items In This Recipe” above “More Recipes”</li>
<li>Build out the footer design</li>
<li>Would probably do a card sort for the items currently in there, and see what can be taken out or rearranged</li>
<li>Find a place for other menu items that were displaced during the navigation bar redesign</li>
<li>Start designing product pages with filters (i.e. Pasta page will have a filter for short pasta and long pasta)</li>
</ul>
<p>From initial feedback, it seems like Eataly is quite pleased with this project. I cannot wait to see them implement this feedback and am really excited to see what the final product will end up looking like! But for now, ciao Eataly!!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*49NiRJlmnTCvZmIMysd-OQ.png"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=280139e2daa0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/eataly-280139e2daa0">A fresh new look for Eataly!</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


A fresh new look for Eataly!

Website Redesign & Optimization Project

Background

Top Stories