E- Commerce Design and IA for Eataly.

INTRO

The opportunity I was given was to design a Pop-up shop for the company Eataly. The concept behind the Pop-up is up to me to flesh out.

“ With large retailers like Amazon breathing down their neck, smaller retailers have to make some changes to keep up! Your e-commerce retailer is looking to design a new version of their site.”

POP-UP SHOP CONCEPT

As I tried to come up with a concept for the physical pop-up shop and accompanying website, I asked myself: “what would make my persona want to shop at the pop-up website over the existing site?” There has to be something special and/or an incentive of sorts.

To stand out from Eataly’s competition, we have to target a younger market. With this Pop-up shop, we hope to attract the Millennials. Why are we focusing on Millennials? There are about 80 million Millennials in America and they have a lot of buying power. According to Forbes,

“they represent about a fourth of the entire population, with $200 billion in annual buying power. They have a lot of influence over older generations and are trendsetters across all industries from fashion to food.”

They care about authenticity and culture.

We have to go where they are and find places they believe to be authentic and have a vibrant culture. One of these places is Industry City in Sunset Park, Brooklyn. Industry City is a 6 million sq. ft. converted industrial complex devoted to art, design, fashion and food. It has a vibrant mix of dining, retail and arts. It epitomizes New York City’s diverse and inspired culture.

Industry City in Sunset Park, Brooklyn.

By having a Eataly Pop-up shop at Industry City, we can increase engagement and website visits. We can do that by offering exclusive promotions. For example, when visiting the Pop-up at Industry City, you will be given a promo code for discounts and free shipping for the website. Also, the Pop-up offers exclusivity by curating products and limited offerings.

MEET DARIA. ( Persona)

“While reading the latest issue of Time Out NY, Daria finds out that there’s an Eataly Pop-up shop at the Food Hall in Industry City in Sunset Park, Brooklyn. Since attending a Mr. Sunday Dance party there last Summer, Daria has been itching to go back. The Eataly Pop-up is a perfect opportunity to send some gifts to her friends since they are huge foodies.”

HOW DID WE ARRIVE AT THIS DESIGN? ( Design process)

Design Squiggle for this project. ( A visual representation of the design process. )

The design process is not linear. As you can see, the mess on the left is where most projects start: uncertainty within a bit of chaos. The smooth line on the right is where we eventually want to get to: clarity and focus. In the middle, we sometimes get thrown for a loop and might need to back track a little bit in order to move forward.

Competitive Analysis

Where we currently are in the design process.

For Eataly’s competitors, I first started off with doing competitive analysis. The competitors that I included in this analysis ranges from bigger corporate brands like Wholefoods, Fairway, Dean & Deluca to smaller independent shops like Brooklyn Larder, Russ & Daughters and ALC Italian Grocer. I included smaller Independent shops because my persona would usually shop at these places over larger chains. Studying them will help my research and inform my decisions. There are multiple components to this competitive analysis. I compared the Business, Branding, Web Features, Web Elements and User Flow of their websites.

Business Analysis of competitors.

Key takeaways from this Business competitive analysis:

  • Eataly has multiple sale channels that holds the customer’s attention. For example, Eataly has a restaurant and bar. They offer a lot of options and shopping experiences.
  • The price point of Eataly helps to define it’s market which ranges from moderately priced to high end.
Branding and Feature comparison of competitors.

Key takeaways for Branding and Features:

  • Eataly has great content, but their lack of organization can be a hinderance. This causes confusing for shoppers.
  • Like some of it’s smaller competitors, Eataly should focus on execution. They focus on “quality over quantity.”
Element Analysis etc.

Key takeaways of Element Analysis:

  • There is a lot of content on the Eataly site. Eataly should try to streamline content. There is no need to feature everything.
  • The bigger chain stores struggle with classifying and organizing product because of the vast amount of inventory.

User Flow Comparison

(X indicates that there’s no online shop or directed to 3rd party site.)

User Flow Comparison key takeaways:

Just because a site has fewer clicks, it does not mean it is easier to navigate. Eataly and Dean & Deluca both have 6 clicks, but I was stuck on the Eataly site for a long time. I had trouble figuring out where to click, while Dean & Deluca offered the easiest and smoothest checkout.

Site Visit

Eataly Shop Site Visit

I visited the Eataly shop and took note of where products were placed and located. It was interesting to see how they arranged their displays and I wondered why they grouped certain items together.

Card Sorting

Users engaging in card sorting.

I then engaged in multiple rounds of card sorting. Card sorting is a tool that helps inform us on how items are organized and where the 100 products will live on the site. The users will arranged and categorize items that makes sense to them. This showed me how other people organize information. There were 5 participants, three of the participants performed closed card sorts. 1 out of 3 participants created top level and secondary categories, while the other two just did a top level.

This led me to perform closed card sorts on two more participants. This time I included top level and secondary categories. The 2 participants organized the items faster and extremely similar to each other.

Where we currently are in the design process.

Site Map

Synthesizing the data from card sorting lead me to my site map. I gathered my site map had to have a top and secondary level navigation.

Sketching and Wireframing

As I move onto sketching wireframes, I kept in mind the insights that I pulled from the research phase. The competitive analysis led me to focus on streamlining the site focusing on quality over quantity. I realized there was no need to feature everything. It would be more helpful to have a curated collection and offer only a small selection of products.

Wireframe sketching.

I received valuable feedback from my colleagues including things like: adding radial dials to indicate progress and that I should research best practices for designing forms. Once I digested all the feedback I was ready to incorporate it all into my digital mockups.

Feedback from colleagues.

In my digital mock-up, I took design cues from the Eataly site. I used the same type face, icons and replicated some elements. It was important to me to stay true to the Eataly brand.

Where we currently are in the design process.

User Testing

I tested 5 users on the latest iteration of my design. All but 1 were Millennials, just like my persona Daria. The following are key insights from 4 of the user tests.

User Tester Michelle giving feedback.

Michelle stated that there should be a more obvious indicator regarding which check out page you are currently at. I then applied these changes to the header image of the checkout pages.

Kevin stated that there needs to be a login page of some sort in order to check out. Without it, how would you have your information saved? That is true, therefore I added a “check out as guest” option and I will work on the login page in my Next Steps.

John stated that I should fill in the addresses during the check out forms. It is really confusing in the prototype when they are not filled out. It will also help with telling the story of my persona for my presentation.

Janie mentioned that I should have more of a social media presence on the site. Especially if my target are Millennials. I had social sharing icons, but it needs more. The Millennials needs and wants social proof. I will be adding this feature on the product page and during my Next Steps.

USER FLOW

User Flow of Prototype

PROTOTYPE

The following is my digital prototype.

“After receiving her promo code from visiting the physical pop-up shop at Industry City, Daria visits the the site to send her best friend Jane some Pan Di Stella cookies. She thinks she’ll love it because they’re totes cute.”

The following is my Invision prototype. Click through as if you’re my persona Daria, shown in the video above.

Mobile ( only slightly built out)

The following is my medium fidelity (black & white) digital prototype.

NEXT STEPS

Short Term:

  • More iteration on the check out forms.
  • Add login page.
  • Include more of a social media sharing feature. Sharing hashtags or photos of purchased items.
  • Add reviews and recommendations.

Long Term:

  • Perfect User Flow. I feel like I can eliminate a click or two.
  • More rounds of User Testing.
  • More iteration.