asapizza

PROGETTO DI: DAVIDE MICHELI, FEDERICO GIULIANI, JESSICA CRISTANINI, LUCA VIVALDI.ESAME DI INTERACTION MULTIMEDIA.DOCENTE: SIMONE BABONIANNO ACCADEMICO 2011/2012ISTITUTO EUROPEO DI DESIGN

02

Cos’è?

Asapizza nasce con l’intento di unificare il maggior numero possibile di pizzerie (a domicilio) milanesi allo scopo di semplificare la ricerca e la prenotazione all’utente. Presenta un immediato sistema di ricerca che consente di ordinare i risultati per vicinanza, qualità o prezzo; in tal modo cerca di soddisfare tutte le esigenze.Il progetto nasce come Web App, in funzione del fatto che si tratta di un servizio dinamico e basato sulla rapidità, di conseguenza molto più adatto a dispositivi mobili.

03

Ricerca competitors

Just Eat è un servizio che consente di ricercare e prenotare diversi tipi di pietanze dai ristoranti convenzionati.Per fare ciò sfrutta una ricerca di tipo territoriale, che Asapizza ha pensato di espandere consentendo all’utente di scegliere fra qualità, prezzo e distanza.Interessante è invece la navigabilità a scorrimento del menù ed il sistema feedback da cui è stato, infatti, preso spunto.

04

Ricerca competitors

un altra app che è stata presa in considerazione è pizza.co.uk che si occupa della consegna a domicilio di pizza.Anche in questo caso abbiamo preso spunto dal menù a scorrimento e dalla pagina del carrello.

05

Ricerca competitors

Abbiamo esaminato l’app di domino’s pizza prendendo spunto per realizzare alcune parti del nostro progetto.Per esempio l’elenco delle pizzerie e il sistema di selezione per le quantità delle pizze ordinate dall’utente.

06

Logo

Per rappresentare il sistema di pizza a domicilio abbiamo puntato sul gioco di parole “ASAP” (acronimo di As Soon As Possible) e la parola “Pizza”, fondendo le due, tenendo in comune la lettera “P”.Al nome ASAPIZZA si è voluto integrare un marchio che lo completi, rimandando subito l’utente alla sfiziosità della pizza.Il logo, illustrativo, raffigura una fetta di pizza con bordo bianco che al suo interno contiene una sfumatura dal giallo all’arancione scuro e degli ingredienti.Il trancio di pizza ha una forma molto rigida pertanto si è scelto di utilizzare un font arrotondato per il logo, di colore per metà bianco e per metà rosso.I colori bianco e rosso sono stati utilizzati per evocare la mozzarella e il pomodoro.

07

Logo

VERSIONE AL TRATTO:

- font del logo: “Debussy”- font Helvetica utilizzato nei testi

08

Logo

NEGATIVO: MODULAZIONE:

2x

x

10/3 x

6x

1/2 x 1/2 x

09

Logo

VARIAZIONI DI DIMENSIONE:

10

Stile grafico

Ricerca

Come colori di sfondo, nonchè tema ricorrente di ASAPIZZA, si è scelto di utilizzare la sfumatura che va da bordeaux a rosso.Per contrastare questa sfumatura e il rosso caratteristico della web application è stato utilizzato un grigio scuro.Come stile di pulsanti è stata utilizzata una forma moderna e pertanto con bordi arrotondati ed una sfumatura di grigio per simulare l’effetto rilievo. Se cliccabile il pulsante assumerà l’aspetto chiaro e la scritta nera, mentre se bloccato avrà un aspetto più scuro e la scritta grigia.Per la valutazione di apprezzamento delle pizzerie è stata adoperata una icona, quale una stella con sfumatura interna arancione e contorno arancione più scuro. Come icone dei menù sono state scelti dei simboli identificativi della sezione che si vuole ragiungere in colore grigio scuro. Qualora ci si trovasse in una determinata sezione, raggiungibile dal menù posto inferiormente alla pagina, il pulsante si visualizzerà selezionato assumendo un colore grigio scuro sfumato verticalmente. Se nella cassa sono presenti degli elementi l’utente riuscirà facilmente a capirlo grazie ad un numerino inscritto in un cerchietto rosso disposto nel pulsante, del menù inferiore, “cassa”.

K = 93%

Invia

11

Flowchart1.0

LOGIN REGISTRATI

ELENCO PIZZERIE

DETTAGLIO PIZZERIA

MENÚ PIZZE MENÚ BIBITE

SPECIFICHE

0.0

RICERCA

1.1

1.0

CRONOLOGIA

1.2

INFO

1.3

PREFERITI

1.4

CASSA

1.5

2.1 2.5

3.1

4.1.1 4.1.2

Le diverse sezioni (ricerca, cronologia, info, preferiti e cassa) sono raggiungibili da tutte le pagine del sito, di conseguenza la navigazione riportata nella flowchart soprastante è indicativa esclusivamente dei collegamenti interni alle sezioni stesse.

12

Wireframe e Web App

LOGO

Registrati

Accedi

UsernamePassword

Payoff

Ricordami

Username

Il modo più rapido permangiare la pizza a Milano

HOMELa home della web application presenta due fasce grigio scuro: una superiore che faccia risaltare il logo e il payoff, ed una inferiore che metta in evidenza il pulsante “Registrati”.La fascia centrale rossa contiene:- campo di testo per lo username- campo di testo per la password, - flag per mantenere in memoria i due campi precedenti- pulsante che permetta il login con i dati inseriti (non cliccabile se i campi non sono stati inseriti tutti)

13

Wireframe e Web App

ordina per vicinanza

Registrati

e-mail

username

cellulare

password

conferma password

Invia

Compilare i seguenti campi:

Invia

REGISTRATI

Voci di ricerca

Campo TestoCampo TestoCampo TestoCampo TestoCampo Testo


Registrati

[email protected]

mario63

3357113491

Invia


[email protected]

mario63

3357113491

Registrazione

Registrazione effettuata con successo,riceverai a breve una mail di conferma.

OK

REGISTRATILa pagina “Registrati” permette di tornare alla pagina precedente qualora l’utente volesse effettuare il loggia.Il corpo della pagina comprende:- campo di testo per la e-mail- campo di testo per la username- campo di testo per la password- campo di testo per la conferma password- campo di testo per la cellulare- pulsante per l’invio dei dati (non cliccabile se i campi non sono stati inseriti tutti)Ad avvenuta registrazione viene aperto un pop-up di conferma.

14

Wireframe e Web App

Ricerca

sciesa

Cerca


Inserire i parametri di ricerca:

Cerca

RICERCA

Voci di ricerca

Campo Testo

Ordina per...

Ricerca Cassa Cronol.P referiti Info“Voci di ricerca” comprende i bottoni rappresentati in questa immagine.

RICERCALa pagina “Ricerca” permette di trovare le pizzerie nei dintorni dell’indirizzo inserito nel campo di testo.L’ordinamento delle pizzerie può essere fatto, grazie ad un menù a tendina (parametri: distanza, qualità e prezzi).Il pulsante “cerca” permette di effettuare concretamente la ricerca e portarci alla pagina successiva.In fondo alla pagina è presente il menù che consente la navigazione nelle sezioni principali.

15

Wireframe e Web App

Da FrancoVia Sciesa 350 mPizza PazzaVia Sciesa 590 mAndreinoVia Anfossi 10100 mPizza timeVai Anfossi 13150 mK2Via Risorgimento 50160 mCasa Dolce CasaVia Dante 51180 mMangia la piazzaVia Dante 100190 mKatia PizzaVia Magenta 11210 mFranceschinoVia Severino 12300 m

Pizzeriem €

PIZZERIA

Voci di ricerca

Cartina Google Maps

Menù pizze

Menù bibite

PIZZERIELa banda in alto presenta il pulsante per tornare alla pagina precedente, subito sotto abbiamo il menù che permette di ordinare l’elenco delle pizzerie (parametri: distanza, qualità e prezzi).Il contenuto presenta l’elenco delle pizzerie con foto o logo della pizzeria, nome della pizzeria, indirizzo, distanza dall’indirizzo inserito nella ricerca e stellini indicanti il giudizio in media espresso dai clienti votanti.Ogni pizzeria estratta dalla ricerca è un pulsante che porta al dettaglio della stessa.

16

Wireframe e Web App

PIZZERIA

Voci di ricerca

Cartina Google Maps

Menù pizze

Menù bibite

DETTAGLIO PIZZERIALa banda in alto presenta il pulsante per tornare alla pagina precedente, subito sotto è presente una immagine raffigurante la foto, o il logo della pizzeria, ingrandita.A lato sono presenti i dati della pizzeria (quali: nome, stelline da 0 a 5 assegnate dal voto degli utenti in media, indirizzo, recapito telefonico, distanza dall’indirizzo inserito nella ricerca e tempo di consegna medio) ed è inoltre possibile aggiungere la pizzeria nei preferiti grazie al pulsante + posto a lato.Nello spazio sottostante è presente la cartina della città per la localizzazione della stessa pizzeria.Subito sotto sono presenti i link all’elenco delle pizze e delle bibite. I numeri a lato di questi ultimi due pulsanti indicano se e quante pizze e/o bibite sono state inserite alla cassa.

17

Wireframe e Web App

Bruschettaolio, sale, origano

Marinarapomodoro, olio, aglio, origano

Margheritapomodoro, mozzarella

Acciughepomodoro, mozzarella, acc.

Capperipomodoro, mozzarella, capp.

Funghipomodoro, mozzarella, funghi

Cottopomodoro, mozzarella, cotto

Crudopomodoro, mozzarella, crudo

Peperonipomodoro, mozzarella, pep.

1

2

2

0

0

0

0

0

0

€3.00

€3.50

€4.00

€5.00

€5.00

€5.50

€5.50

€6.00

€6.00

Menù Pizze

Aggiungi a cassa

MENÚ PIZZE

Aggiungi

MENU PIZZE / MENU BIBITEE’ presente il pulsante per tornare alla pagina precedente.L’elenco delle pizze ci consente, per ognuna di esse, di aggiungere o sottrarre una di esse. Il numerino accanto ai pulsanti “-” e “+” ci indica quante ne stiamo selezionando.Accanto sono indicati i nomi delle pizze, i relativi ingredienti e il loro prezzi.Il pulsante posto in fondo alla pagina ci consente di aggiungere alla cassa i prodotti selezionati e di far comparire sul pulsante, relativo alla stessa, presente nel menu il loro numero totale.

18

Wireframe e Web App

Bruschettaolio, sale, origano

Marinarapomodoro, olio, aglio, origano

Totale €18.00

Margheritapomodoro, mozzarella

1

2

2

€3.00

€7.00

€8.00

*Il pagamento viene effettuato al ritiro**Aspettare la mail o il messaggio di conferma entro 5 minuti per l’avvenuta prenotazione

Compra

Cassa

5

La consegna è gratuita

CASSA

Voci di ricerca

Totale

Compra

CASSALa sezione cassa, come tutte le altre sezioni (ricerca, cronologia, preferiti e info) non prevede il pulsante per tornare indietro.Questa pagina ci permette di visualizzare tutti gli elementi presenti in essa, con la possibilità di poterli rimuovere e di mostrarci il prezzo parziale dei singoli cosiccome il prezzo totale.Inoltre presenta anche alcune note per la consegna e per il pagamento.Premendo il tasto “compra” si procede con l’inserimento delle specifiche nella pagina successiva.

19

Wireframe e Web App


Registrati

e-mail

username

cellulare

password

conferma password

Invia



sciesa, 4

citofono

telefono

Conferma

L’ordine verrà consegnato a:

5

Specifiche


sciesa, 4

Rossi

3357113491

Conferma

L’ordine verrà consegnato a:

SpecificheSpecifiche

sciesa, 4

Rossi

3357113491

Richiesta inviata

Il pagamento viene effettuato al ritiro.

Aspettare la mail o il messaggio di conferma entro 5 minuti per l’avvenuta prenotazione.

OK

Invia

SPECIFICHE

Voci di ricerca

Campo TestoCampo TestoCampo Testo

SPECIFICHEE’ consentito tornare alla pagina precedente.Sono presenti 3 campi di testo:- campo di testo per l’indirizzo- campo di testo per il citofono- campo di testo per un recapito telefonico- pulsante conferma (bloccato finchè non vengono inseriti tutti e tre i campi di testo)Ad avvenuta conferma dei dati si apre un pop-up che conferma la richiesta d’ordine inviata e informa l’attesa di una conferma d’ordine entro 5 minuti.Viene nel frattempo inviata una mail alla pizzeria che informa la richiesta d’ordine e che sollecita una quanto prima possibile conferma per la prenotazione.

20

Wireframe e Web App

Da FrancoVia Sciesa 350 mPizza PazzaVia Sciesa 590 m

Preferiti

Cancella preferiti

Da FrancoVia Sciesa 350 mPi PPizza PazzaVia Sciesa 590 m Cancellazione

Sei sicuro di voler cancellare l’elemento?

NO

SI

Da FrancoVia Sciesa 350 mPizza PazzaVia Sciesa 590 m

Preferiti

Svuota

PREFERITI

Voci di ricerca

Cancella Preferiti

PREFERITILa sezione preferiti raccoglia tutte le pizzerie inserite in questa categoria, permettendo sia di cancellarle una ad una, qualora lo si desideri, sia di cancellarle tutte grazie al tasto “svuota” presente a fondo pagina ed ovviamente di visitarle in dettaglio.Qualora si precedesse con la cancellazione di qualche elemento appare in pop-up la conferma dell’eliminazione da questa sezione.

21

Wireframe e Web App

Da Franco22/12/201119:34

Pizza Pazza13/10/201112:13

Cronologia

Da Franco11/10/201113:24

Pizza Pazza02/09/201120:25

Da Franco22/12/201119:34

Svuota Vota

Pizza Pazza13/10/201112:13

Da Franco11/10/201113:24

Pizza Pazza02/09/201120:25

Cancellazione

Sei sicuro di voler cancellare l’elemento?

NO

SI

Da Franco22/12/201119:34

Pizza Pazza13/10/201112:13

Cronologia

Da Franco11/10/201113:24

Pizza Pazza02/09/201120:25

Svuota Vota

CRONOLOGIA

Voci di ricerca

Svuota Vota

CRONOLOGIAQuesta sezione funziona in modo similare ai preferiti ma mostra all’utente lo storico delle pizzerie dalle quale ha ordinato in passato, in ordine cronologico (dalla più recente alla più remota).Inoltre permette all’utente di contribuire, premendo il pulsante “vota” a procedere alla votazione delle pizzerie dalla quali ha effettuato un ordine.E’ presente un pop-up di conferma qualora l’utente tenti di cancellare lo storico degli ordini.

22

Wireframe e Web App

Da Franco

Pizza Pazza

Feedback

Da Franco

Pizza Pazza

Conferma

Da Franco

Pizza Pazza

Feedback

Da Franco

Pizza Pazza

Conferma

FEEDBACK

Voci di ricerca

Conferma

FEEDBACKLa pagina Feedback, raggiungibile premendo il pulsante “vota” della sezione “cronologia”, consente all’utente di stabilire un giudizio, da 1 a 5, sull’ordine effettuato precedentemente.Il pulsante “conferma” consente di salvare il voto espresso e modificare la media di voti assegnata alla pizzeria.

23

Wireframe e Web App

Info

Asapizza nasce con l’intento di unificare il maggior numero possibile di pizzerie milanesi allo scopo di semplificare la ricerca e la prenotazione all’utente. Perchè affidarsi ad Asapizza? Semplice, perchè oltre all’immediato metodo di ricerca offre un’innovativa graduatoria basata, a scelta dell’utente, su campi diversi in modo da soddisfare le sue esigenze.

Logout

LOGO

Voci di ricerca

Speigazione Progetto ASAPIZZA

Logout

INFO

INFOQuesta sezione visualizza il logo ASAPIZZA, fornisce informazioni sul sistema e permette all’utente di effettuare il logout.

24

Immagine coordinata

Via.Silvio Pellico 44 20123 Laveno (VA) Italia- tel 03324356784http://m.asapizza.com Iva 0987653467890

http://m.asapizza.comIl modo più rapido per

mangiare la pizza a Milano

29,7 cm

21 cm 23 cm

8,5 cm

5,5 cm

11 cm

Il biglietto da visita presenta, sul retro, il codice bidimensionale che, fotografato da uno smartphone, collega alla web app.

25

Il biglietto da visita presenta, sul retro, il codice bidimensionale che, fotografato da uno smartphone, collega alla web app.

IPHONE 4 IPAD IPHONE

Icona App

asapizza

Documents

Transcript of asapizza