asapizza by Luca Vivaldi

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

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.

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. 03

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.

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.

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.

Logo VERSIONE AL TRATTO:

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

Logo NEGATIVO:

MODULAZIONE: 6x

10/3 x

x 2x 1/2 x

1/2 x

Logo VARIAZIONI DI DIMENSIONE:

Stile grafico K = 93%

Invia

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”.

Ricerca

Flowchart 0.0

1.0 1.0 LOGIN

1.1

REGISTRATI

1.2 RICERCA

CRONOLOGIA

1.3

1.4 INFO

2.1

1.5 CASSA

PREFERITI

2.5

ELENCO PIZZERIE

SPECIFICHE

3.1 DETTAGLIO PIZZERIA

4.1.1 MENÚ PIZZE

4.1.2 MENÚ BIBITE

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.

Wireframe e Web App HOME La 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 â&#x20AC;&#x153;Registratiâ&#x20AC;?. 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)

LOGO Payoff Username Password

Accedi Registrati

Il modo piĂš rapido per mangiare la pizza a Milano

Username

Ricordami

Wireframe e Web App REGISTRATI La 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.

REGISTRATI

Registrati

Campo Testo

Registrati

Compilare i seguenti campi:

e-mail

Registrazione mario.rossi@libero.it

username ordina per vicinanza

mario63 ordina per vicinanza

Campo Testo

password

Campo Testo

conferma password

Campo Testo

cellulare

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

3357113491 OK

Invia

Invia Voci di ricerca

Invia

Wireframe e Web App RICERCA La 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. “Voci di ricerca” comprende i bottoni rappresentati in questa immagine.

Ricerca

RICERCA

Inserire i parametri di ricerca:

Campo Testo

sciesa

Ordina per...

ordina per vicinanza

Cerca Cerca

Voci di ricerca

Ricerca

Cassa

Cronol.P

referiti

Info

Wireframe e Web App PIZZERIE La 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.

PIZZERIA

Pizzerie m Da Franco Via Sciesa 3

50 m Pizza Pazza Via Sciesa 5

90 m Andreino

Via Anfossi 10

100 m Pizza time

Vai Anfossi 13

150 m K2

Via Risorgimento 50

Cartina Google Maps

160 m Casa Dolce Casa Via Dante 51

Menù pizze

180 m Mangia la piazza

Menù bibite

190 m Katia Pizza

Via Dante 100

Via Magenta 11

210 m

Voci di ricerca

Franceschino Via Severino 12

300 m

€

Wireframe e Web App DETTAGLIO PIZZERIA La 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.

PIZZERIA

Cartina Google Maps

Menù pizze Menù bibite

Voci di ricerca

Wireframe e Web App MENU PIZZE / MENU BIBITE E’ 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.

MENÚ PIZZE

Aggiungi

Menù Pizze 1

Bruschetta

Marinara

Margherita

Acciughe

Capperi

Funghi

Cotto

Crudo

Peperoni

olio, sale, origano

pomodoro, olio, aglio, origano

pomodoro, mozzarella

pomodoro, mozzarella, acc.

pomodoro, mozzarella, capp.

pomodoro, mozzarella, funghi

pomodoro, mozzarella, cotto

pomodoro, mozzarella, crudo

pomodoro, mozzarella, pep.

Aggiungi a cassa

€3.00 €3.50 €4.00 €5.00 €5.00 €5.50 €5.50 €6.00 €6.00

Wireframe e Web App CASSA La 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.

CASSA

Cassa 1

Bruschetta

Marinara

Margherita

€3.00

olio, sale, origano

pomodoro, olio, aglio, origano

pomodoro, mozzarella

€7.00 €8.00

La consegna è gratuita

Totale

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

Compra

Compra Voci di ricerca

€18.00

Wireframe e Web App SPECIFICHE E’ 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.

SPECIFICHE

Specifiche Registrati

Campo Testo

Campo Testo Campo Testo

Specifiche

L’ordine verrà consegnato a: Compilare i seguenti campi:

L’ordine verrà consegnato a:

sciesa, e-mail 4

sciesa, Richiesta 4

citofono ordina per vicinanza username

Rossi ordina per vicinanza

telefono password

3357113491

inviata

Il pagamento viene effettuato al ritiro.

conferma password

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

cellulare OK

Invia

Conferma Invia

Voci di ricerca

Conferma

Wireframe e Web App PREFERITI La 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.

PREFERITI

Preferiti Da Franco

Via Sciesa 3

Via Sciesa 5

50 m Pi Pizza Pazza P

50 m Pizza Pazza

90 m

Cancellazione

Sei sicuro di voler cancellare l’elemento?

Svuota

Cancella Preferiti

Voci di ricerca

Cancella preferiti

Wireframe e Web App CRONOLOGIA Questa 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.

CRONOLOGIA

Cronologia

Da Franco

22/12/2011 19:34

13/10/2011 12:13

Pizza Pazza

Cancellazione

Da Franco

11/10/2011 13:24

02/09/2011 20:25

Sei sicuro di voler cancellare l’elemento? 02/09/2011

Pizza Pazza

20:25

SI NO

Svuota

Vota

Voci di ricerca

Vota

Svuota

Vota

Wireframe e Web App FEEDBACK La 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.

FEEDBACK

Feedback Da Franco

Da Franco

Pizza Pazza

Da Franco

Pizza Pazza

Conferma

Conferma Voci di ricerca

Feedback

Conferma

Wireframe e Web App INFO INFO Questa sezione visualizza il logo ASAPIZZA, fornisce informazioni sul sistema e permette all’utente di effettuare il logout.

LOGO Speigazione Progetto ASAPIZZA

Logout

Voci di ricerca

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

Immagine coordinata 21 cm

23 cm

11 cm

29,7 cm

8,5 cm

5,5 cm Il modo pi첫 rapido per mangiare la pizza a Milano

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

http://m.asapizza.com

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

Icona App

IPHONE 4

IPAD

IPHONE