Redesigning Eataly website
Get a taste of Eataly’s website redesign here
BACKGROUND
Challenge: Creating a responsive website for Eataly based on their existing one, uncovering new opportunities and users’ needs.
Timeframe: Two Weeks
Team: Arturo Contreras, Erika Friend, Greg Kinlan and myself
Tools: Slack, Google Docs, Sketch, InVision, Optimal Sort
RESEARCH
“I’m clicking on the Holidays category in the nav bar because it’s the only word that remotely implies seasonal”
“There is no way to sort classes by time and my free time is very limited”
We carried out several research methods to better understand our client situation within the market, our user’s needs and pain points and any issues with the current website.
Contextual Inquiry
We wanted to support and extend existing behaviors. We observed and documented real users engaging with our client’s and/or competitor’s product:
- 2 users at Eataly (Flatiron location, NY),
- 1 user at competitor’s in-store location (Whole Foods Union Sq, NY)
- 1 user at Amazon’s website
Screener Survey
We wanted to learn about user’s habits when it comes to online grocery shopping: where they buy, how often, and what’s the overall feeling. But the final goal was to screen users for usability tests of the current Eataly’s website.
We asked 10 questions and got 22 people’s answers:
Usability test on current Eataly’s website
- 3 users
- 5 user tasks
Competitive / Comparative Analysis
We identified first and second tier competitors to better understand how Eataly exists in the marketplace.
- We came up with 5 competitors:
- And compared these areas: Website Elements and Layout, Features and Market Positioning
Heuristic Analysis
Based on Abby the IA method we analyzed the current Eataly website and extracted these insights:
- Accessibility: there are some inconsistencies when it comes to responsive design
- Clearness: some terms are unclear (producer)
- Communication: some filters can be confusing for the user and some categories group more than one item
- Credibility: website lacks the experience of going into the store, it seems more like a food e-commerce website than a cultural experience
- Controllability: the website does not provide recommendations based on past searches or purchases
- Delightfulness: compared to its competitors’ websites, Eataly’s main navigation is very cluttered, there is no consistent color scheme, and the font size is small
Card Sorting
- 3 rounds of card sorting to analyze the current information architecture of the site: close / open / close
- 16 participants
- Inventory of 100 products as samples to test
FINAL INSIGHTS FROM RESEARCH:
- People enjoy online grocery shopping but Eataly’s customers don’t know about their website. The site doesn’t mirror the experience of visiting a mortar-and-brick store
- Some categories are confusing and seem to be aimed just to individuals that are well-versed in Italian products
- Some information is overlapped which causes search issues. Some categories should be reorganized
- The website is not very controllable: does not offer recommendations based on past searches or purchases
- Lack of interactivity: no access to Social Media channels, feedback from other users…This definitely should be improved in order to strengthen the brand identity and get the users more involved
- Poor online costumer service. Competitors have a live chat available, in most cases conveniently located and easy to find on their homepage.
SYNTHESIS
After gathering all the research information, we updated the USER PERSONAS given to us.
Karen Philips is our primary persona and we based all of our design decisions on her needs and pain points.
And Dex Tardy is our secondary persona
After this point, we started working individually on the following steps of the process.
First of all, I framed a PROBLEM STATEMENT for our primary persona keeping in mind all the insights gathered so far:
When people shop online, they are exposed to Italian foodstuffs that are unfamiliar.
Karen is frustrated because she wants to explore new products but doesn’t know how to consume them.
How might we help her buy the right food items while informing on her choices?
And created a USER JOURNEY for Karen Philips to illustrate a series of steps that represents a scenario (buying Olives for a dinner she is hosting at her apartment) in which she interacts with the current Eataly website:
DESIGN
These were the foundations for my ideation process and resulting designs:
- Creating a more human interaction for the user that goes beyond the e-commerce site
- Mirroring real store experience and measuring up to Eataly’s products
- Providing valuable and findable information across the website
Please see below the evolution of every key screen through several iterations:
HOME PAGE
1- Global navigation decluttered: 3 main categories instead of 10. Words had to be changed through the iteration process
2- Hero image showcasing New Arrivals / Seasonal Recommendations instead of taking real estate for merely aesthetic purposes
3- Direct access to educational content (Recipes, Classes, Events) to help make the website feel more like an experience rather than just a food store
4- Live Chat icon fixed in every screen to facilitate access to Customer Service and improve user interaction
PRODUCT LIST
1- More obvious contextual navigation (bigger breadcrumbs) to help users locate themselves
2- No Hero Image on the top of product list. This made the user scroll down to see the first row of products and didn’t serve any purpose besides aesthetics
3- Reduced faceted navigation (Filters) to just Price and Brand. Users didn’t find the “Origin” filter useful, so this information is now located in the product description. “Producers” seemed confusing for some users so I switched it to “Brands”. Price filter design has been changed to a more straightforward format.
PRODUCT DETAILS
Changes made in this page serve the same purpose: to provide users with more valuable (even “creative”) and wider ranging information
1- Recipes and Nutritional Value tabs has been added next to Description
2- New contextual navigation: “Pairs with…” section showcases product that combines with the selected one
3- User Ratings make the website more interactive, and at the same time provides users with more unbiased information
4- Design Elements have been visually relocated
NEXT STEPS
- Transforming the navigation of Eataly’s website into a unique experience. Users should be able to browse the site with subtle guidance, feeling free to play around and discover new items, mirroring the experience of the brick-and-mortar store.
- Fleshing out the website with more diverse information about the products: content (photos, videos, external links…) that explores and explains food items from different perspectives.
- Making the website more interactive (Community forum, Social Media, Product Reviews…)
