Expanding EATALY’s e-commerce presence by the spring-themed online store.

“There is no sincerer love than the love of food.”
George Bernard Shaw

Project Brief

With spring quickly approaching, Eataly — a vibrant Italian marketplace, is looking to create a pop-up e-commerce store to capitalize on 100 curated items, Eataly knows customers will love.

Problem Statement

Users who lead an active lifestyle and enjoy quality products need a mobile and easy way to locate and purchase seasonal items at an online store with a quick and simple shipping and an option to read and write product reviews.

Solution

Implementing a responsive website with constantly updating product selections, that combines an intuitive navigation, easy shipping and sharing option.

1. Persona

Primary persona

On the initial stage of the project I was provided with 3 user personas, from which I had to select a primary persona. Daria, 29 had become my primary user persona and the main point of reference throughout the whole design process.

Daria’s main needs include:

  • a regularly updated inventory with multiple pictures per product
  • a fast shipping
  • an ability to read and write reviews
  • an option to share about the purchases with her friends

2. Brand and Business Analysis

Eataly markets itself as a respectful environment with a high quality of food and standards who cares about their customers and is looking for every single opportunity to excel.

Guest Service Mission at Eataly’s website
Eataly is passionate about food and that passion has become their love and profession. It’s target audience is anyone passionate about food and quality. Eataly see its end goal in having customers for life.

To better understand what products in particular I will be picking for the e-commerce store my team made a field trip and content audit of existing products and items and discovered a lot. There is a major difference between online and physical store, where a lot of items are simply not displayed on the website including the ones that are sourced from different countries. We also discovered 4 separate restaurants in the market place, that also don’t have immediate presence on the web.

3. Card Sorting Method

Thanks to my team we were able to quickly locate 100 spring-themed items and create cards with images and a product explanation for card sorting method (a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups).

After 4 open sortings (users are free to organize the cards into groups that make sense to them, and then come up with their own names for these groups) and 4 closed card sortings (participants are asked to sort topics from content within your website into pre-defined categories) with different users matching my persona I was able to understand what they were looking for in terms of an information architecture.

Open and closed card sorting.
Closed card sorting revealed a trend: participants tended to classify products in terms of meals as opposed to separate products.

4. Information Architecture. Content Strategy

Having identified IA heuristics, I created a sitemap having my primary persona Daria in mind. The sitemap is applicable to all responsive platforms (mobile, tablet and desktop).

Site map for spring themed pop-up store

5. Competitive Analysis

To better understand Eataly and current market trends I made a research on current Eataly’s competitors. While researching I was testing all the three websites for the responsive nature of elements, informational hierarchy and easy access to products I was looking for. Having discovered a lot of valuable information I could use while making decisions on the design I created user flows for the two main Eataly’s competitors: Dean & Deluca and Wholefoods.

From left to right: user flows for Wholefoods, Dean & Deluca.

6. User Flow for Spring Themed Store

Based on the competitor analysis and research I was able to determine the most simple and convenient way for Daria when purchasing products from various online stores on her mobile device and created a user flow to depict the path my user will take keeping in mind her user task:

Daria’s sister is in town for the weekend. Of many ideas Daria picks a family lunch in a park with friends. After browsing many websites she finds great picnic idea on Eataly’ website on her mobile device and absolutely has to have that party basket she found.

User flow for Daria with a guest checkout.

7. Connecting the Dots (MVP)

The brand research, competitive analysis, IA heuristics and understanding my primary persona’s needs helped me to connect business and user goals and come up with the MVP (minimum viable product):

A responsive spring themed e-commerce store with the seasonal product selection, fast shipping and option to write reviews.

8. Design Evolution

8.1 Paper wireframes. Having done my research and identifying Daria’s problems, I started addressing them with the initial low fidelity wireframes.

Paper wireframes

8.2 Low-fidelity digital wireframes. Based on my paper prototype and using Sketch app I created the first iteration for the mobile design that would solve Daria’s problems of locating and shipping items as well as ability to read and write reviews for products. Initial iteration of mobile wireframes was determined by the fact that my persona’s primary tool for purchasing items is her smartphone.

8.3 High-fidelity digital wireframes. 5 user testing via Invision app resulted in a creation of the final iteration of mobile wireframes. When my mobile prototype was ready I created responsive versions for the tablet and desktop screens to enable the customer satisfaction on several online platforms. One of Daria’s needs was a regularly updated inventory of products, that she’ll be happy to find on any device.

9. Invision Prototype

The mobile prototype shows the path my persona will take in order to complete the user task: Daria’s sister is in town for the weekend. Of many ideas Daria picks lunch in a park with friends. After browsing many websites she finds great picnic idea on Eataly’ website on her mobile device and absolutely has to have that party basket she found.

Please follow the link: https://invis.io/J8BI0GEZP

10. Mockups

To make my primary persona able to access the online store on any digital device, I created a full set of wireframes for mobile, tablet and desktop platform.

From left to right devices: mobile, tablet, desktop.

11. Next Steps

Steps towards the future product enhancement are:

  1. Creating pop-up stores for every season with the appropriate selection of products
  2. Creating an app
  3. Developing a rewards system

12. Personal Retrospective

This individual project provided me with the unique opportunity to uncover my technical skills and analytical thinking that I was very indeterminate about. The amount of time and effort invested in this project, minimum sleep hours and tons of research gave me the knowledge of IA heuristics and solid skills of the digital prototyping tools like advanced Sketch and Invision.

I am very grateful I was given a chance to learn the core of these technical aspects alone to be able to effectively collaborate with my future team and become its productive member.