poli15 careffour - 2015-12-01

91
SCUOLA Politecnico di Milano a.a. 2015/2016 A CURA DI Filippo Baccolini, Marianna Carbone, Giulia Capriotti, Giorgia Cazzanelli, Serena Chillé CORSO “Interactive System & Usability Design” PROFESSORI Roberto Dadda Paolo Neri

Upload: roberto-dadda

Post on 21-Jan-2018

154 views

Category:

Design


2 download

TRANSCRIPT

Page 1: Poli15   careffour - 2015-12-01

SCUOLA

Politecnico di Milanoa.a. 2015/2016

A CURA DI

Filippo Baccolini, Marianna Carbone,Giulia Capriotti, Giorgia Cazzanelli,

Serena Chillé

CORSO

“Interactive System & Usability Design”

PROFESSORI

Roberto DaddaPaolo Neri

Page 2: Poli15   careffour - 2015-12-01

Carrefour’s website wants to

offer to the costumers the full experience of

the supermarket

comfortably sitting on their sofa

WHY PURPOSE

Page 3: Poli15   careffour - 2015-12-01

Carrefour’s goal is to offer a wide range of

different services, maintaining

a good compromise between products, price

and quality.

Nevertheless Carrefour’s shops are

present world wide.

PRICE

PLACE

LANGUAGE

QUALITY

Page 4: Poli15   careffour - 2015-12-01

Esselunga is an italian brand born in

Lombardia and now present in six Italian

regions.

It proposes medium quality and medium

prices products.

PRICE

PLACE

LANGUAGE

QUALITY

Page 5: Poli15   careffour - 2015-12-01

Eataly’s aim is to diffuse the best Italian

quality of food all over the world, selling exclusively

handmade products.

PRICE

PLACE

LANGUAGE

QUALITY

Page 6: Poli15   careffour - 2015-12-01

NaturaSì is one of the biggest

italian shops specialized in the sale of bio

and natural products.

PRICE

PLACE

LANGUAGE

QUALITY

Page 7: Poli15   careffour - 2015-12-01

PERSONAS

Page 8: Poli15   careffour - 2015-12-01

Massimo is a divorced dad with a young daugther and he works full time in an office. He loves doing work out and he’s really careful about his diet and calories eaten.

Between job stuff and his daughter he doesn’t have time to go to the super-market so he would use lunch time to do online shopping and then collect it from the shop.He often checks the timetable of the nearest market to organize better his day.

- Massimo goes on Carrefour website to check the location and the timetable of the nearest shop

- He clicks on the “click and withdraw” box

- He chooses the shop where to go

- He selects the products he wants to buy

- He chooses how to pay and he closes the order

MASSIMO 30 years old

Regular Costumer

CHARACTERISTICS AND NEEDS

USER TASK

Page 9: Poli15   careffour - 2015-12-01

Stefano and Marco are two students of 21 and 20 ye-ars old, they live at the 5th floor of a Milan old apart-ment without elevator. They don’t have a car and they don’t want to go up the stairs with heavy bags, expecially bottles of water.

They heard about “home-delivery shopping” by some friends, so they’d be interested in knowing more about it. Moreover, they search in the online catalogue the offers of the week to save some money.

- Stefano and Marco go on the Carrefour website and have a look on the weekly offers

- Then they go on the “Click and Withdraw” section, they choose the home delivery option

- They click on the products they’re interested in and they buy them

STEFANO & MARCO 21-21 years old

Occasional Costumer

CHARACTERISTICS AND NEEDS

USER TASK

Page 10: Poli15   careffour - 2015-12-01

Giulia is 27 years old, she works in a laboratory as a biologist in Varese, where she moved 2 years ago.She uses to work untill late in the evening and so she doesn’t have time to go to the supermarket, otherwise she doesn’t want to do it.

She’d like to cook italian dinner for her foreigner col-leagues, but it’s a problem for her to find good quality products, without leaving her home.

- Giulia is reading “pasta alla carbonara” recipe and she notices that she hasn’t Pecorino

- She searches for it on the internet

- She goes on Carrefour website and check if there is Pecorino, how much it costs and where it is produced

- She discoveres that online she can just see where the product is available

GIULIA 27 years old

Casual Costumer

CHARACTERISTICS AND NEEDS

USER TASK

Page 11: Poli15   careffour - 2015-12-01

Maria is retired, she is 72 years old and she lives with her small dog in Coverciano (FI).She is a modern grandma, her grandchildren taught her to use tablet (iPad).Her daughter just bought a house and Maria would like to give her something as a present

Maria is a loyal custumer of Carrefour and she has lots of points in her account.She thought that she could get something free for her daughter with her points.

- Maria goes on the Carrefour website to check her account’s points balance

- She is redirected into Payback website

- She chooses the prize for her daughter and orders it

MARIA 72 years old

Loyal Costumer

CHARACTERISTICS AND NEEDS

USER TASK

Page 12: Poli15   careffour - 2015-12-01

TASKMATRIX

Opening times and store locator

Online shopping with home delivery

Special products

Online shopping with withdraw

Offers and discounts

Account details

Regular Costu

mer

Occasio

nal Costu

mer

Casual V

isitor

Loyal C

ostumer

Page 13: Poli15   careffour - 2015-12-01

TASKS

Page 14: Poli15   careffour - 2015-12-01

TASK: timetable and store

locatorClick’s number

to get the timetable of the nearest shop

Page 15: Poli15   careffour - 2015-12-01

Click’s number: 5

1 2

43

5

Page 16: Poli15   careffour - 2015-12-01

Click’s number: 5

1 2

43

5

Page 17: Poli15   careffour - 2015-12-01

Click’s number: 2

1

2

Page 18: Poli15   careffour - 2015-12-01

Click’s number: 4

1 2

43

Page 19: Poli15   careffour - 2015-12-01

TASK: online

shopping with withdraw

Click’s number to buy a product with

withdraw

Page 20: Poli15   careffour - 2015-12-01

Click’s number: 11

1 5 9

7 113

6 10

8

2

4

Page 21: Poli15   careffour - 2015-12-01

Click’s number: 0

This service is not avaiable on the website

Page 22: Poli15   careffour - 2015-12-01

Click’s number: 0

This service is not avaiable on the website

Page 23: Poli15   careffour - 2015-12-01

Click’s number: 8

1 4 7

2 5 8

3 6

Page 24: Poli15   careffour - 2015-12-01

TASK: point’s balance Click’s number to

check point’s balance

Page 25: Poli15   careffour - 2015-12-01

Click’s number: 4

1 3

42

Page 26: Poli15   careffour - 2015-12-01

Click’s number: 4

1 2

43

Page 27: Poli15   careffour - 2015-12-01

Click’s number: 0

This service is not avaiable on the website

Page 28: Poli15   careffour - 2015-12-01

Click’s number: 6

1 3 5

4 62

Page 29: Poli15   careffour - 2015-12-01

TASK:product’s

choice Click’s number to get product’s information

Page 30: Poli15   careffour - 2015-12-01

Click’s number: 1

1

Page 31: Poli15   careffour - 2015-12-01

Click’s number: 1

1

Page 32: Poli15   careffour - 2015-12-01

Click’s number: 1

1

Page 33: Poli15   careffour - 2015-12-01

Click’s number: 1

1

Page 34: Poli15   careffour - 2015-12-01

TASK:offers and discounts Click’s number to

check offers on particularproducts

Page 35: Poli15   careffour - 2015-12-01

Click’s number: 5

1 2

43

5

Page 36: Poli15   careffour - 2015-12-01

Click’s number: 6

1 3 5

2 4 6

Page 37: Poli15   careffour - 2015-12-01

Click’s number: 1

1

Page 38: Poli15   careffour - 2015-12-01

Click’s number: 3

1 2

3

Page 39: Poli15   careffour - 2015-12-01

TASK:online

shoppingwith delivery

Click’s number to buy a product with

delivery

Page 40: Poli15   careffour - 2015-12-01

Click’s number: 9

1 5

3 7

2 69

4 8

Page 41: Poli15   careffour - 2015-12-01

Click’s number: 15

1

Page 42: Poli15   careffour - 2015-12-01

Click’s number: 4

1 3

2 4

Page 43: Poli15   careffour - 2015-12-01

Click’s number: 6

1 3 5

2 4 6

Page 44: Poli15   careffour - 2015-12-01

EVALUATION

PARAMETERS

website speed: quickness to charge the website

products catalogue: clear exposition of offers/products

price visibility: exposition of product’s price

languages: possibility to change te website’s language

graphic coherence: aesthetic coherence between colours, pictures and style

product’s description: exhaustive description of product’s characteristics

shop’s informations: easyness to find timetable and address of the shops

registration’s speed: quickness to create an account on the website

easy to use: comprehensibility of how to move on the website and how to use it

mobile option: possibility to use the App via mobile

Page 45: Poli15   careffour - 2015-12-01

EVALUATION PARAMETERS

votes

products catalogue

website speed

price visibilitylanguages

graphic coherence

product description

shops information

registration speedeasy to use

mobile option

8

9

7

6

5

9

10

9

7

5

8

10

3

8

3

3

8

6

8

5

0

10

10

10

6

5

5

7

8

8

6

6

4

5

7

7

4

0

9

5

Page 46: Poli15   careffour - 2015-12-01

KIVIATDIAGRAM

Page 47: Poli15   careffour - 2015-12-01

shops information

languages

accessibility

products exposition

price visibilityproduct description

graphic coerence

website speed

registration speed

Page 48: Poli15   careffour - 2015-12-01

shops information

languages

accessibility

products exposition

price visibilityproduct description

graphic coerence

website speed

registration speed

KIVIATDIAGRAM

Page 49: Poli15   careffour - 2015-12-01

KIVIATDIAGRAM

shops information

languages

accessibility

products exposition

price visibilityproduct description

graphic coerence

website speed

registration speed

Page 50: Poli15   careffour - 2015-12-01

shops information

languages

accessibility

products exposition

price visibilityproduct description

graphic coerence

website speed

registration speed

KIVIATDIAGRAM

Page 51: Poli15   careffour - 2015-12-01

shops information

languages

Carrefour NaturaSìEsselunga Eataly

accessibility

products exposition

price visibilityproduct description

graphic coerence

website speed

registration speed

KIVIATDIAGRAM

Page 52: Poli15   careffour - 2015-12-01

WEBSITE ANALYSIS

Page 53: Poli15   careffour - 2015-12-01

OFFERS

The monthly offers are showed in the home page.

They are divided in three boxes of different colours depending on the market’s typology (Carrefour, Market, Express).

Once selected the market, you are automatically geo-located and the website shows a list of available shops, otherwise you can put a different location.

Afterwards there are some instruction about the flyer.

You close the window and then you can leaf through the pages directly on the website or download the flyer.

Page 54: Poli15   careffour - 2015-12-01

OFFERS

You have two ways to reach the offers:

1.On the left side of the homepage there ‘s the promotions section.Clicking on that you need to choose between 4 options.

If you go on the first one, “scopri le promozioni” you are automatically redirect to the second option (flyer).

If you click on the flyer you are asked to put a location, and only at this point you can watch it or download it.

2.You can scroll down the homepage and find the link to the flyer section; in this way you can skip two steps.

Page 55: Poli15   careffour - 2015-12-01

OFFERSThere isn’t a real promotion section.

You have to go to the online shopping page and see if there are any offers scrolling down the products.

KIVIAT

Page 56: Poli15   careffour - 2015-12-01

OFFERS You can find very easily the promotion section in the homepage.

1.If you go on the first line it opens a window with four options.You click on the one you’re interested in and at this point you can choose if you want to download the flyer, download the offers’ chart or you can browse the flyer online.

2. If you click on the pro-motions green box you will need one more click to select the offer you want but you will end in the same page.

KIVIAT

Page 57: Poli15   careffour - 2015-12-01

REGISTRATION On the top of the Homepage there is the link to log in, and the process is medium fast.

Registration’s phase doesn’t need a lot of datas and afterwards users can easily go into their personal area.

Otherwise customers can enter into the website using their personal Facebook’s account.

Page 58: Poli15   careffour - 2015-12-01

REGISTRATION Users can create their personal account immediately from the right side of the homepage

It’s not possible to log in using Facebook’s personal account, but the process is easy because there’s no need of lots of information.

Page 59: Poli15   careffour - 2015-12-01

REGISTRATION

KIVIAT

The website’s registration is very easy. In the Homepage there is the direct connection to log in, from where users can choose between logging with an existent account or registering themselves.

Registration doesn’t need a lot of information and users can easily go into their personal area.

Customers can also enter using their Facebook’s personal account and this make the process faster.

Page 60: Poli15   careffour - 2015-12-01

REGISTRATION

KIVIAT

Going into the personal area is not so easy and fast. There are no links from the Homepage, and registration is possible only from the online shopping’s area.In this section users can choose to enter with a new account, but the process is not really fast. In fact there isn’t the possibility to log in with Facebook or other social networks.The information required are not too much and, when all datas are added, you can decide a personal password.

Page 61: Poli15   careffour - 2015-12-01

HOMEPAGE

The shapes and the colours are organized improperly: it’s used the same colour for different meanings, the boxes’ size is not related to the importance of the content; moreover diffe-rent boxes are linked to the same page.

The background’s image is confusing and makes rea-ding the page difficult.

The main menu is pushed into the background.

Scrolling the homepage at some point the graphic change drastically.

Page 62: Poli15   careffour - 2015-12-01

HOMEPAGE The graphics is simple and

impersonal.

The advertising in the centre of the page misleads the attention of the user from Carrefour’s pourpose(it’s linked to the school).

The scheme is clear, it mainta ins a vertical development.

Page 63: Poli15   careffour - 2015-12-01

HOMEPAGE

Graphic coherence is respectedand the website’s aim is well point out.

The colours are closely linked to the nature.

The main menu is clear.

The elements’ disposition is ordered and horizontal.

KIVIAT

Page 64: Poli15   careffour - 2015-12-01

HOMEPAGE

Graphic coherence is respectedand the website’s aim is well point out.

The colours are closely linked to the nature.

The main menu is clear.

The elements’ disposition is ordered and horizontal.

KIVIAT

Page 65: Poli15   careffour - 2015-12-01

STORELOCATOR

On Carrefour website to find the nearest shop to you, you have to click on “Punti Vendita” on the top of the page near to the shop logo.

Then automatically the website thanks to GPS finds your position and tells you where are the nearest shops. You can also put some filters to your research depending on the Carrefour you need or the Carrefour’s service you need to use.

Page 66: Poli15   careffour - 2015-12-01

STORELOCATOR

On Esselunga homepage there are two ways to find the store locator.

The first one is to click the button “Negozi” on the left of the page.

The second is on the right of the home page, and is more visible, because is bigger and there is also a symbol of the locator.

The result of both systems is the same, but in the first way there are more clicks to do, but the result is the same, and the website geo-lo-calize you without inserting your adress. You can also add some filters if you need some specific services from your Esselunga’s shop.

Page 67: Poli15   careffour - 2015-12-01

STORELOCATOR

To find Eataly’s shops, the voice “Negozi” is at the very top of the home page, and the font is really narrow and little, so is not so visible in the complex.

Once you click on “Negozi” an horizontal line of all italian shops pictures’s appears, and you have to choose the one you are searching for; scrolling the page there are also Eataly’s shops worldwide.

Once you have clicked on the picture a new page with the profile of the shops opens, with all the informations, from the adress to the next event in the shop.

KIVIAT

Page 68: Poli15   careffour - 2015-12-01

STORELOCATOR

There are two options in NaturaSì’s website to use the store locator.

The first one is in the high part of the page and you have to write your city and adress.

The second way is longer and you have to click on the button “Negozi” and then “Trova Negozi”.

The result of both the ways is the same, but the first one is the faster, especial-ly if you already know the street you need.

KIVIAT

Page 69: Poli15   careffour - 2015-12-01

PRODUCTS

SOCIALASPECTS

The research’s results are in both the products and magazine area

In this specific istance there is only one product, which isn’t exactly what the user was searching for

The website indicates in which shop it is possible to find the product

At the very bottom of Carrefour homepage, there are the links to the social networks where it has a profile; there is also Twit-ter’s window in which the most recent Tweets with #CarrefourItalia are shown

Page 70: Poli15   careffour - 2015-12-01

PRODUCTS

SOCIALASPECTS

The research doesn’t show products form the section “spesa” of the website

It uses as search engine Google, giving to customers too many results (recipes, leaflets,..)

There are no links to social networks pages on Esselunga’s webiste

Page 71: Poli15   careffour - 2015-12-01

PRODUCTS

SOCIALASPECTS

The research is divided into found products and search suggestions

At the bottom of Eataly’s home page there is a part reserved to Eataly’s social network

There are Facebook, Twitter, Instagram and Google Plus, and all the icons are linked to the corresponding social network

KIVIAT

Page 72: Poli15   careffour - 2015-12-01

PRODUCTS

SOCIALASPECTS

The absence of the specific product is not explained

On the top of NaturaSì’s homepage there is the Facebook icon and, by clicking here, one can like the NaturaSì’s facebook page

There is also the number of likes of the page

KIVIAT

Page 73: Poli15   careffour - 2015-12-01

ACCESSTO

PRIVATEAREA On Carrefour’s homepage

to go to you private profile firstly you have to click on “Accedi a MyCarrefour” and then you have to fill the boxes with your e-mail and password, after you have clicked on “Accedi” your personal profile with all your informations appears

Page 74: Poli15   careffour - 2015-12-01

ACCESSTO

PRIVATEAREA To log-in in your

Esselunga’s personal account there’s a button at the top on the right side of the page. Here you click on “My Esselunga” and fill will your datas (Mail and Password), then, when you have clicked on “Accedi” all your informations, including points balance appears in the window.

Page 75: Poli15   careffour - 2015-12-01

ACCESSTO

PRIVATEAREA To log in your personal

profile on Eataly’s website you have first to click on the “Accedi/Registrati” button, and then appears a window where you can register or log in, also via Facebook

Once you have logged in on the page you have your account and all your datas.

KIVIAT

Page 76: Poli15   careffour - 2015-12-01

ACCESSTO

PRIVATEAREA

There isn’t a private area in NaturaSì’s webiste.

KIVIAT

Page 77: Poli15   careffour - 2015-12-01

ONLINESHOPPING

It’s possible to entert into shooping online directly from the Homepage,

The shopping area has too many elements, which make the page confusing (ex. banners, products, prices, different sections, ect..) and products have not a real description (ex. provenience, nutritional tabels, ect)

Although choosing products is really simple and users can decide to recieve shopping at home or collect it from the market directly.

There are a lot of passages from the beginning to the final click, but the service is very complete and satisfying.

Page 78: Poli15   careffour - 2015-12-01

ONLINESHOPPING

In the homepage there is the direct link to the online shopping’s area.

This part of the website is very confusing and there are too many elements in (ex. different sections, banners, brands, nutritional table)

Product exposition is not so clear cause different brands are shown before specific elements, but products have a good description and tables.

The only way to finish and pay is entering with the personal account, and this part requires a lot of time. At the end the process is really long, with too many passages

Page 79: Poli15   careffour - 2015-12-01

ONLINESHOPPING

Eataly’s website is structured differently from other websites: in fact shopping could be done directly from the Homepage.

Products’ area is very clear and there are not unnecessary elements.

Products are shown in the best way, with their prices and own descriptions (ex. provenience, nutritional values, ect..)

Paying is very fast: in only one passage it’s possible to finish all the shopping and decide the paying way .

KIVIAT

Page 80: Poli15   careffour - 2015-12-01

ONLINESHOPPING

There is a direct link from the Homepage to the online shopping.

This area of the website is confusing beacause of a lot of banners and too many sections, but once products are selected, continuing the process is very intuitive.

Moreover each element has its own description, that make the selection easier. Prices are shown very well, even if it’s not so clear when a product is effectively into the “Carrello” or not.

When user has finished the shopping, can click on the “Termina spesa” botton, but it’s a long way from this point to the real end. In fact website requires a lot of information about the account, the user’s address and other peculiarities.

KIVIAT

Page 81: Poli15   careffour - 2015-12-01

APPS ANALYSIS

Page 82: Poli15   careffour - 2015-12-01

MOBILE OPTIONS

On the home page the features are:- PassaRapido (useful in store for a faster shopping)- The current flyer (general)- Your favorite store (specific information on your favourite retail store)

Pushing on the menu bar you will have the following functions (see screenshot), what we’re going to do is analyze the most relevant for our research.

Stores:Location function is very simple and intuitive, in the map mode and also manual search. Moreover, if you enable the services of GPS, the application allows you to view directly the stores closer in a list.

By selecting the store you were looking for, this app shows you all the information about it, including the time-tables, special promotions and many important services.

Page 83: Poli15   careffour - 2015-12-01

MOBILE

OPTIONS

Before starting using the App:You need to Registrate or Log in with your datas (it is necessary the “Fidaty” card). Otherwise you can enter as a host.

Find Store:It allows you to create shopping lists and give the a name or a date.The main difect of this function is that the selection of the products is difficult to understand: before to start shopping they “teach” you how to do it in 4 steps.

Choose you discount:“What is it?”It allows you to select 6 products from the catalogue and receive a special discount.Pretty easy to use, but only once you know the modalities of this service.

Stores:The location function very simple and intuitive, in the map mode and manual search. Moreover, if you enable the services of GPS, the application allows you to view directly the stores closer to you in a list, orded by distance.

Page 84: Poli15   careffour - 2015-12-01

MOBILE

OPTIONS

NO MOBILE OPTION IS

AVAIABLE FOR EATALY’S SHOP.

KIVIAT

Page 85: Poli15   careffour - 2015-12-01

MOBILE

OPTIONS

Starting using App:You need to Registrate or Log in with your credentials (it is not necessary the “NaturaSì” card). The registration is really easy and it doesn’t take a lot of time.

Find Store:It allows you to find, by manual research or by GPS map, the stores near you. The main difect is that it doesn’t show you automatically the stores closer to you in a list.

My list:It allows you to create shopping lists and give them a name or a date. It works very well and it has an intuitive function, with a wide selection and research (you can also see all the products’s characteristics).

Products and Promotions:It shows you all the Naturasì’s cathalogue and the current promotions, the products are visible and organized.

KIVIAT

Page 86: Poli15   careffour - 2015-12-01

WEBSITE PROPOSAL

Page 87: Poli15   careffour - 2015-12-01

NEW

INTERFACE

PROPOSALMAKE IT

MORE VISIBLE

MOVE THE “CLICCA

E RITIRA” BOX AT THE BOTTOM OF THE PAGE

DELETE THE BACKGROUND

PICTURE

DELETE THE ADVERTISEMENT

FROM THE CENTER OF THE

PAGE

GROUP THE BOXES BY

COLOR

Page 88: Poli15   careffour - 2015-12-01

NEW

INTERFACE

PROPOSAL

Page 89: Poli15   careffour - 2015-12-01

NEW

INTERFACE

PROPOSAL

MAKE THE MAP SMALLER AND

CENTERED

MAKE THE BOXES

VERTICAL

STRETCH THE MENU IN ORDER TO FIT THE

PAGEMOVE THE BOXES TO THE EDGE

OF THE PAGE

Page 90: Poli15   careffour - 2015-12-01

NEW

INTERFACE

PROPOSAL

Page 91: Poli15   careffour - 2015-12-01

THE END