SlideShare a Scribd company logo
1 of 69
di Beccalli, Bombelli e Pigato
LABORATORIO DI
COMUNICAZIONE VISIVA &
DESIGN DELLE INTERFACCE
TEORIA E TECNOLOGIE DELLA COMUNICAZIONE
JESSICA BOMBELLI
GLORIA BECCALLI
j.bombelli@campus.unimib.it
g.beccalli2@campus.unimib.it
di Beccalli, Bombelli e Pigato
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non
commerciale - Condividi allo stesso modo – 3.0”
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti
restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. Le autrici si scusano
per eventuali omissioni, e restano a disposizione per correggerle.
di Beccalli, Bombelli e Pigato
1
BRIEF DI PROGETTO
Il tema di progetto è un aggregatore d’informazioni – o knowledge-base – sul
quartiere di Milano-Bicocca che risponda alle esigenze di target eterogenei come
le differenti tipologie di persone che nei diversi spazi e ore del giorno usano, vivono
e frequentano questo spazio urbano, funzionale e sociale:
Lo strumento di comunicazione digitale on line deve offrire a ciascuna di queste
tipologie di utenti un accesso diversificato ed una esperienza capace di soddisfare
le specifiche esigenze informative in un’ottica di mobilità e geo-localizzata.
BRIEF DI PROGETTO
UNIVERSITARI RESIDENTI LAVORATORI CITY-USER
FINALITÀ E TEMA DEL PROGETTO TEMA DEL PROGETTO
di Beccalli, Bombelli e Pigato
ANALISI E
BENCHMARK2
di Beccalli, Bombelli e Pigato
USER-CENTERED RESPONSIVE APPROCCIO
DESIGN DESIGN MOBILE FIRST
OBIETTIVI E METODI
METODI E APPROCCITEMA DEL PROGETTO
Per disegnare i confini del quartiere d’interesse ci siamo
rifatte alla mappa del sito del Comune di Milano, il quale
definisce il quartiere Bicocca come «Quartiere 905» situato
nella «Zona 9» di Milano.
https://www.comune.milano.it/portale/wps/portal/vdqPaginaQuarti
ere?qkey=905
Abbiamo però deciso di incorporare nella zona anche due
punti poco distanti che potrebbero essere di potenziale
interesse per gli utenti del sito:
CENTRO COMMERCIALE SARCA: per i negozi, ristoranti,
cinema e sala giochi al suo interno.
CARROPONTE: per gli eventi musicali.
DISEGNARE I CONFINI DEL QUARTIERE
IL QUARTIERE PER NOIDEL PROGETTO
http://www.farebicocca.it/
http://www.itineranet.it/bicocca/
http://www.milanotoday.it/notizie/bicocca/
www.unimib.it
http://www.mybicocca.it/
…
OBIETTIVI E POSIZIONAMENTO DIFFERENTI:
• VANTAGGIO COMPETITIVO:
responsive design, usabilità, target specifico
• STRATEGIA DI MARKETING:
personalizzazione
ANALISI DELLA CONCORRENZA
I COMPETITORPROGETTO
ANALISI SWOT
STRENGHTS
•Essere i primi a proporre una soluzione simile per il quartiere Milano-Bicocca;
•Vantaggi per tutti gli attori coinvolti (gestori, utenti, valorizzazione del territorio,
ecc.);
•Flessibilità: i contenuti possono essere cambiati e/o migliorati;
•Concentrazione su un target specifico e facilmente individuabile;
•Possibilità di attuare una promozione mirata;
•Aspetti culturali, attitudinali, comportamentali dell’utenza a favore.
WEAKNESSES
•Tempistiche;
•Mantenimento del sito;
• Reputazione e start-up.
FORZE E DEBOLEZZEPROGETTO
ANALISI SWOT
OPPORTUNITIES
•Possibilità di innovare un settore statico;
•Diffusione degli smartphone;
•Attitudini e comportamento degli utenti di oggi.
•Scarsa informazione facilmente reperibile sul quartiere;
•Diffusione di zone wi-fi nel quartiere;
•Partnership potenziali,
•Target di nicchia.
THREATS
•Entrata di nuovi aggregatori informativi sul quartiere;
•Mancanza di concorrenza e quindi della possibilità prevedere più facilmente le
possibili problematiche.
OPPORTUNITÀ E MINACCEPROGETTO
di Beccalli, Bombelli e Pigato
RICERCA SULLE
UTENZE3
TIPOLOGIA DI DOMANDE:
•Chi cerca informazioni sul quartiere Milano-Bicocca?
•Perché e quali sono le loro esigenze?
•In quali contesti d’uso e attraverso quali mezzi cercano informazioni?
OBIETTIVI DELL’INTERVISTA:
•Raccogliere informazioni sui punti di interesse principali, gli orari di frequentazione e le
attività svolte dai potenziali utenti nel quartiere Bicocca.
•Verificare un eventuale interesse da parte dei potenziali utenti nei confronti di un
nuovo strumento di aggregazione di informazioni sul quartiere Bicocca.
•Indagare il rapporto degli utenti con i diversi device nell’ottica della ricerca di
informazioni attraverso il nostro strumento di comunicazione (desktop, tablet,
smartphone).
•Raccogliere informazioni utili alla scelta del ”look&feel” dello strumento di
comunicazione.
ANALISI DELL’UTENZA
LE INTERVISTE
STUDENTI: La maggior parte di loro è soddisfatta, e ha una visione
positiva del quartiere.
•ALCUNI AGGETTIVI:
moderno, grande, organizzato e funzionale.
•INFO D’INTERESSE:
luoghi di ritrovo, info sull’università.
RESIDENTI: Hanno una visione positiva del quartiere. Tuttavia,
alcuni di loro trovano che sia poco fornito.
•ALCUNI AGGETTIVI:
moderno, tranquillo, fruibile
•INFO D’INTERESSE:
eventi, orari.
LE INTERVISTE
I RISULTATI
LAVORATORI: Disinteresse nei confronti di uno strumento di
aggregazione di informazioni sul quartiere in esame.
• ALCUNI AGGETTIVI:
povero, spoglio e desolato.
• INFO D’INTERESSE:
eventi culturali, supermercati/punti di ristoro per il pranzo.
CITY USER: Mostrano apprezzamento per l’idea di un aggregatore di
informazioni, e interesse verso il quartiere.
• ALCUNI AGGETTIVI:
divertente, giovane, moderno, disorganizzato.
• INFO D’INTERESSE:
negozi, vita notturna, eventi e iniziative.
LE INTERVISTE
I RISULTATI
Le tribù urbane hanno una visione del quartiere piuttosto
differente tra loro.
Ci proponiamo dunque di porre particolare RILEVANZA
ALLA PERSONALIZZAZIONE DELLE INFORMAZIONI E A UN
ACCESSO DIVERSIFICATO DELLE INFORMAZIONI.
LE INTERVISTE
I RISULTATI
► La maggior parte degli utenti conosce o frequenta solo una determinata zona del
quartiere: RILEVANZA DELLA GEO-LOCALIZZAZIONE E PERSONALIZZAZIONE.
► Una lamentela comune è stata la scarsa presenza di iniziative ed eventi:
RILEVANZA DELLA SEZIONE EVENTI.
► Il mezzo attraverso cui si informano solitamente è lo smartphone: RILEVANZA DELLA
VERSIONE MOBILE.
► La maggior parte degli utenti preferirebbe che le informazioni presenti sul sito
fossero organizzate per tipologia/categoria di servizio: SUDDIVISIONE INTERNA PER
CATEGORIA DI SERVIZIO e NON COSTRINGERE GLI UTENTI A SENTIRSI PARTE
UNICAMENTE DI UNA DETERMINATA TRIBÙ.
LE INTERVISTE
I TRATTI IN COMUNE EMERSI
ACCADEMICI RESIDENTI LAVORATORI CITY-USER
LE TRIBÙ URBANE
PROFILI E PERSONAS
Si tratta di una figura interessata a tutto ciò che riguarda l’università. Tuttavia, sono anche
interessati a ciò che riguarda i trasporti e i luoghi di aggregazione, specialmente spazi verdi
e posti in cui mangiare durante la pausa che siano convenienti e/o originali. Sono inoltre
interessati ai luoghi in cui intrattenersi a fine giornata (soprattutto per l’aperitivo) o durante le
pause.
LUOGHI DI INTERESSE:
MONDO UNIVERSITARIO: sedi universitarie, biblioteche, librerie, segreterie, copisterie,
conferenze ed eventi universitari.
RISTORAZIONE: mense, macchinette del caffè, bar, supermercati, aperitivo, gelaterie,
yogurterie, chioschi, paninari, piadinerie, ristoranti etnici, pizzerie d’asporto, fast food,
kebap.
SVAGO E SOCIALIZZAZIONE: aperitivo, centro commerciale e pub.
TRASPORTI: stazione, bus, metro, navetta e car sharing.
SERVIZI: parcheggi.
IL PROFILO DELL’ACCADEMICO
FEDERICA
CARATTERISTICHE
21 anni. Studentessa frequentante il corso di
laurea in STP in Bicocca. Vive nella periferia
di Monza in una piccola villetta con i genitori
e la sorella minore. Per spostarsi a Milano
utilizza per lo più il treno, ma con i frequenti
scioperi si muove anche in macchina.
STUDIO
Studia all’università Bicocca dal mattino fino a
metà pomeriggio quattro giorni la settimana. Ha un
bel rapporto col quartiere, lo trova grande,
comodo e ben organizzato. La maggior parte del
tempo la passa a lezione, in biblioteca, al bar
dell’Università e in copisteria. Quando finisce tardi,
ogni tanto, fa l’aperitivo con i compagni di studi.
DEVICES
Non esce mai di casa senza il suo iPhone. Possiede
anche un tablet e un pc. Usa Internet per ogni
cosa: chattare con gli amici, postare foto, cercare
informazioni, studiare… Quando è fuori casa gioca
col cellulare o scambia sms o passa il tempo sui
social network
WISH LIST
Le piacerebbe trovare uno strumento
online semplice e intuito per spostarsi nel
quartiere Bicocca. Le informazioni che le
piacerebbe trovare riguardano: eventi e
promozioni, parcheggi, e posti economici
ma originali dove mangiare.
OCCUPAZIONE
Non ha un lavoro fisso. Ogni tanto fa ripetizioni ai
bimbi delle elementari e scuole medie o qualche
lavoretto da promoter.
RELAZIONI E PASSIONI
Per lei è importante il divertimento e gli
amici, però ha qualche
preoccupazione per il suo futuro. Non è
ancora sicura di cosa farà da «grande».
Esce spesso la sera e il week end. La sua
passione sono il cinema d’autore e la
musica indie rock. Non ama la
discoteca, preferisce i pub, i concerti e
andare al cinema.
Si tratta di una persona che vive nel quartiere e che, di conseguenza, ne ha una buona
conoscenza. Questo genere di utente utilizza i mezzi di trasporto per muoversi anche verso
l’esterno del quartiere. I luoghi di interesse si trovano spesso nei dintorni del quartiere,
soprattutto la sera. Nutre particolare interesse riguardo le occasioni di socializzazione: cerca
perciò informazioni per avere una vita più partecipativa e attiva all’interno del quartiere.
LUOGHI DI INTERESSE:
RISTORAZIONE: supermercati, bar, ristoranti (anche etnici), take away, gelaterie, yogurterie,
panifici, pasticcerie, piadinerie, pizzerie, fast food, kebap, chioschi.
SVAGO E SOCIALIZZAZIONE: centro commerciale, negozi, cinema, teatro, discoteche, pub,
ludoteche, luoghi di ritrovo, centri di aggregazione, centri sportivi, piazze, concerti.
TRASPORTI: car sharing, bike sharing, stazione, bus, metro e taxi.
RELAX E SPORT: spazi verdi, centri sportivi, palestra.
SERVIZI UTILI: banche e sportelli, parcheggi, farmacie, edicole, cappella, ospedali, librerie,
biblioteche, parrucchiere, estetista, solarium, medico di famiglia, bellezza in generale.
IL PROFILO DEL RESIDENTE
GIULIA
CARATTERISTICHE
22 anni. Laureata. Single. Figlia unica. Non
lavora.
Socievole e simpatica.
Studentessa fuori sede: da La Spezia si è
trasferita a Milano per l’università.
STUDIO E TEMPO LIBERO
L’università le piace, ma non il quartiere. Lo trova
disorganizzato, desolato e poco fornito. Le manca
casa e i suoi amici. Odia la burocrazia. Quando non
è a lezione, va a far la spesa, in palestra, al cinema
e al centro commerciale. La sera fa l’aperitivo con
le coinquiline e poi vanno al cinema. Però si annoia
un po’, soprattutto il fine settimana.
DEVICES
Possiede uno smartphone Android, un iPad e un pc
che utilizza spesso per: chattare (soprattutto con i
vecchi amici che non vede da un po’), fare
shopping on-line, informarsi e cercare qualsiasi tipo
di informazione.
WISH LIST
Le piacerebbe moltissimo trovare uno
strumento online semplice e intuito per
scoprire i posti che ancora non conosce
del quartiere, gli eventi, le iniziative, i pub
e le occasioni di socializzazione.
Lavora nel quartiere Milano-Bicocca. È interessato soprattutto ai mezzi di trasporto e parcheggi
disponibili. Vuole anche conoscere posti in cui trascorrere la pausa pranzo.
LUOGHI DI INTERESSE:
RISTORAZIONE: posti convenzionati, mense, bar, supermercati, aperitivo, gelaterie, chioschi,
paninari, piadinerie, ristoranti (anche etnici), pizzerie.
SVAGO E SOCIALIZZAZIONE: aperitivo, centro commerciale, pub.
TRASPORTI: mezzi di trasporto (stazione, bus, metro, tram, navetta, car sharing e bike sharing).
RELAX E SPORT: spazi verdi, palestra.
SERVIZI: parcheggi, edicole, librerie.
IL PROFILO DEL LAVORATORE
ANDREA
CARATTERISTICHE
37 anni. Laureato.
È direttore e venditore in una
libreria.
Socievole e cordiale, oltre che serio
ed affidabile sul lavoro.
Vive a Sesto San Giovanni, e per
spostarsi a Milano utilizza
prettamente i mezzi pubblici.
DEVICES
Possiede uno smartphone
Android che utilizza spesso per
navigare online e controllare la
posta elettronica, specie
durante gli spostamenti coi
mezzi e nelle pause lavoro. Ha
un PC fisso e un portatile sui
quali, oltre ad accedere al web,
scrive documenti.
LAVORO E TEMPO LIBERO
Dirige e lavora in una libreria all'interno del quartiere
Bicocca dal mattino fino a tardo pomeriggio. Durante
le pause lavorative non si sposta dal negozio se non
per comprare le sigarette o qualcosa per il pranzo al
supermercato. Appena uscito dal lavoro, non vede
l'ora di tornare a casa. Per lui il quartiere Bicocca é
unicamente luogo di lavoro.
RELAZIONI
È sposato e ha un bambino di 6 anni.
Insieme, vivono in un appartamento
della periferia di Sesto. Non esce quasi
mai la sera, e il week end lo passa
solitamente con la famiglia, da parenti
o amici, o facendo piccole gite o
passeggiate in aree verdi. È però
piuttosto attento a ciò che riguarda la
cultura e l'arte.
Frequenta il quartiere Bicocca col solo fine di partecipare a un determinato evento e/o per
trascorrere piacevolmente il suo tempo libero (se vive non lontano dal quartiere). Non
sempre conosce poco il quartiere. Cerca informazioni basilari: indirizzo, prezzi e orari dei
posti. Cerca eventi culturali, occasioni di ritrovo, svago e occasioni di socializzazione e
luoghi di relax e di ristorazione.
LUOGHI DI INTERESSE:
RISTORAZIONE: bar, aperitivo, gelaterie, yogurterie, chioschi, paninari, piadinerie, ristoranti
(anche etnici), ristoranti di cucina alternativa, ristoranti biologici, pizzerie, fast food.
SVAGO E SOCIALIZZAZIONE: musei, cinema, concerti, monumenti, teatro, librerie, negozi,
aperitivo, centro commerciale, negozi, pub, discoteche, conferenze, sale giochi.
TRASPORTI: stazione, bus, metro, tram, navetta, taxi e parcheggi.
IL PROFILO DEL CITY-USER
FABRIZIO
CARATTERISTICHE
23 anni. Da pochi mesi laureato
(fuoricorso) alla triennale di Scienze
dei Beni culturali in Statale.
Vive a Monza con i suoi genitori e si
sposta solitamente con la
macchina.
PERSONALITÀ
Divertente ed espansivo, con tanta voglia di fare.
Nel tempo libero preferisce stare in casa a giocare
con la sua consolle piuttosto che svolgere attività
fisiche.
DEVICES
Possiede un IPhone e lo utilizza
solitamente per inviare
messaggi con WhatsApp,
controllare le sue pagine social
e navigare online. Ha un PC fisso
e un portatile.
WISH LIST
Sarebbe interessato ad uno strumento di
comunicazione sul quartiere Bicocca che
lo informi soprattutto sugli eventi serali, i
locali in cui poter bere qualcosa in
compagnia e ristoranti.
OCCUPAZIONE
Durante il giorno lavora come barista in un piccolo bar
nel centro di Monza. Se non troverà un’altra
occupazione nei prossimi mesi, pensa di prendere in
considerazione l’opportunità di continuare gli studi
con una laurea Specialistica.
RELAZIONI
È fidanzato da 4 anni con una ragazza,
ma non avendo entrambi un vero e
proprio posto di lavoro, vivono ancora
con i rispettivi genitori Durante la
settimana, e soprattutto nei weekend,
gli piace uscire la sera con la sua
compagnia di amici per locali, e con la
sua ragazza va spesso al cinema e a
cena in qualsiasi tipo di ristorante.
• Tutti i target di riferimento sono interessati a uno strumento semplice, intuitivo,
veloce e pratico da usare, soprattutto in mobilità.
• La maggior parte degli utenti ha un buon rapporto con la tecnologia, in
particolare con smartphone e tablet.
• Gli intervistati preferirebbero visualizzare la mappa del quartiere con i diversi
luoghi filtrati in base alla tipologia di servizio.
• Dare la possibilità all’utente di personalizzare la ricerca e i contenuti, prestando
attenzione a non costringerlo in un’unica tribù urbana.
OSSERVAZIONI TRATTE
di Beccalli, Bombelli e Pigato
ARCHITETTURA
DELL’INFORMAZIONE4
ALBERO DI NAVIGAZIONE
 
PIANETA CAMPUS
 
 
Mangiare e
bere
 
 
Spostarsi
 
 
Esplorare
l’università
 
 
Sfruttare il
tempo libero
 
 
Scoprire i
servizi
 
PIANETA VISITORS
 
 
Mangiare e
bere
 
 
Spostarsi
 
 
 
Vivere la
cultura
 
 
Divertirsi
 
 
Scoprire i
servizi
 
Alloggiare
 
 
PIANETA NATIVI
 
 
Mangiare e
bere
 
 
Spostarsi
 
 
Comprare
 
 
Sfruttare il
tempo libero
 
 
Divertirsi
 
 
Scoprire i
servizi
 
PIANETA LAVORO
 
 
Mangiare e bere
 
 
Spostarsi
 
 
 
Rilassarsi
 
 
 
Scoprire i Servizi
di Beccalli, Bombelli e Pigato
WIREFRAME5
WIREFRAME MOBILE
WIREFRAME DESKTOP
di Beccalli, Bombelli e Pigato
CONCEPT6
SCOPO:
•Invitare gli utenti ad esplorare e scoprire il quartiere attraverso il nostro strumento di
comunicazione;
•Creare uno strumento di comunicazione usabile e divertente da usare che possa
potenzialmente attrarre anche i meno interessati (in particolare i lavoratori).
METAFORA:
•Quartiere Bicocca come Universo
•Tribù urbane come Pianeti
•In questo modo:
•Tentiamo di non costringere gli utenti all’interno di un’unica tribù
•Li invitiamo ad esplorare l’Universo Bicocca attraverso i 4 pianeti.
PROGETTO BISCOVERY
• Forte rimando a «Discovery Channel»
• Dall’inglese «discovery»scoperta. Invito all’esplorazione e scoperta del quartiere
Bicocca;
• Font: Blue Highway (Bold). Molto simile a quello del canale televisivo (Gotham);
• Icona del mondo al posto della «o» per richiamare il tema dei pianeti e il loro stile grafico
cartoonesco.
NOME E LOGO
di Beccalli, Bombelli e Pigato
INTERFACCIA
GRAFICA7
• Stile cartoonesco con bordi neri disegnati per icone e bottoni.
• Per rendere divertente l’utilizzo del nostro mezzo di comunicazione.
SFONDO: azzurro, per richiamare il cielo.
RAZZO: rappresenta l’utente.
 Dopo aver tappato un pianeta nella home page della versione mobile, esso si
direziona verso il mondo scelto.
 Nella mappa (desktop e mobile) esso indica la posizione e direzione dell’utente
LO STILE GRAFICO
COLORE: Rosso mattone
MOTIVI:
Risultati interviste:
Richiamo al colore degli edifici
dell’Università Bicocca;
Quartiere Bicocca: ambiente di
studio e formazione per gli
studenti.
PIANETI E COLORI
COLORE: Verde
MOTIVI:
Risultati interviste;
Tranquillità, positività, freschezza,
sicurezza;
Quartiere Bicocca: ambiente
tranquillo e ben servito per i suoi
abitanti.
PIANETI E COLORI
COLORE: Arancione
MOTIVI:
Risultati interviste;
Gioia, positività, entusiasmo,
attrattività;
Quartiere Bicocca: ambiente di
svago e divertimento per i city
user.
PIANETI E COLORI
COLORE: Grigio
MOTIVI:
Risultati interviste;
Mancanza di fiducia e di energia,
negatività, noia;
Quartiere Bicocca: ambiente
spoglio che non offre opportunità,
attrattive o servizi per i lavoratori al
di fuori dell’orario lavorativo.
PIANETI E COLORI
ETICHETTE:
•Verbi all’infinito
•Verbi coerenti con il tema della
«scoperta»
GRAFICA:
•Icone Flat facilmente tappabili su mobile
•Simboli riconoscibili anche per mobile
•Colore dello sfondo corrispondente al
mondo prescelto
ICONE DELLA SEZIONE CAMPUS
di Beccalli, Bombelli e Pigato
TEMPLATES
8
BISCOVERY RESPONSIVE
HOME HOME
Scegli una tribù urbana
TEMPLATE MOBILE PORTRAIT
TEMPLATE MOBILE PORTRAIT
CATEGORIE CATEGORIE
Scegli una categoria di servizio
TEMPLATE MOBILE PORTRAIT
MAPPA ZOOM DELLA MAPPA
TEMPLATE MOBILE PORTRAIT
TORNA INDIETRO
per cambiare pianeta
TEMPLATE MOBILE PORTRAIT
TAP «MANGIARE E BERE»
per cambiare categoria di servizio
TEMPLATE MOBILE PORTRAIT
FILTRI
Scegli una sottocategoria di servizio
TAP MENÙ FILTRI
Per filtrare ulteriormente i luoghi
TEMPLATE MOBILE PORTRAIT
MAPPA FILTRATATAP VAI
TEMPLATE MOBILE PORTRAIT
TAP BALOONTAP PIN
TEMPLATE MOBILE PORTRAIT
TAP COMMENTISCHEDA DEL LUOGO
TEMPLATE MOBILE PORTRAIT
TAP COMMENTITAP TORNA ALLA MAPPA
TEMPLATE MOBILE PORTRAIT
ELENCO LUOGHI
Tap freccia del footer
ELENCO LUOGHI
Tap « ordina per »
TEMPLATE MOBILE PORTRAIT
ELENCO LUOGHI
Tap ordina per prezzo
TORNA ALLA MAPPA
Ritap la freccia della barra
TEMPLATE MOBILE PORTRAIT
TAP L’ICONA DELLA STELLA
Per visualizzare i preferiti
PAGINA DEI PREFERITI
TEMPLATE MOBILE PORTRAIT
TAP L’ICONA DEL CALENDARIO
Per visualizzare gli eventi
PAGINA DEGLI EVENTI
TEMPLATE MOBILE PORTRAIT
TAP LA LENTE NELL’HEADER CHIUDI LA PAGINA DEL CERCA
HOMEPAGE HOMEPAGE
Hover su «Pianeta Campus»
TEMPLATE DESKTOP
MAPPA
«mangiare e bere»
TEMPLATE DESKTOP
MAPPA FILTRATA
TEMPLATE DESKTOP
MAPPA FILTRATA
Click pin
TEMPLATE DESKTOP
ELENCO LUOGHI
Click «scopri i luoghi»
TEMPLATE DESKTOP
PREFERITI
TEMPLATE DESKTOP
CONTATTI
TEMPLATE DESKTOP
di Beccalli, Bombelli e Pigato
PROTOTIPO
9
Per quanto riguarda lo sviluppo del codice si sono utilizzati i linguaggi HTML, CSS e
Javascript con Jquery.
Anche per la realizzazione del prototipo, abbiamo adottato un approccio mobile
first.
IL PROTOTIPO
di Beccalli, Bombelli e Pigato
JESSICA BOMBELLI
j.bombelli@campus.unimib.it g.beccalli2@campus.unimib.i
t
GLORIA BECCALLI

More Related Content

Similar to Biscovery

Segmentazione del pubblico e posizionamento
Segmentazione del pubblico e posizionamentoSegmentazione del pubblico e posizionamento
Segmentazione del pubblico e posizionamentoAndrea Quaranta
 
Chinatown Analysis - Paolo Sarpi, Milan
Chinatown Analysis - Paolo Sarpi, MilanChinatown Analysis - Paolo Sarpi, Milan
Chinatown Analysis - Paolo Sarpi, MilanPamela Palaco Ramos
 
Laboratorio di Interaction design - consigliami
Laboratorio di Interaction design - consigliamiLaboratorio di Interaction design - consigliami
Laboratorio di Interaction design - consigliamiDario Contini
 
Esperienza per tecnologia turismo 2.0 - Scheda corso LEN
Esperienza per tecnologia turismo 2.0 - Scheda corso LENEsperienza per tecnologia turismo 2.0 - Scheda corso LEN
Esperienza per tecnologia turismo 2.0 - Scheda corso LENLEN Learning Education Network
 
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...Marina Lo Blundo
 
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di MilanoElisa Stabili
 
InBicocca, non si cerca, si trova!
InBicocca, non si cerca, si trova!InBicocca, non si cerca, si trova!
InBicocca, non si cerca, si trova!Sara M
 
Michele Marchigiani, network reale o virtuale?
Michele Marchigiani, network reale o virtuale?Michele Marchigiani, network reale o virtuale?
Michele Marchigiani, network reale o virtuale?KnowCamp
 
Ldb S.P.A. 09-06-2014 Spanò - marketing culturale
Ldb S.P.A. 09-06-2014 Spanò - marketing culturaleLdb S.P.A. 09-06-2014 Spanò - marketing culturale
Ldb S.P.A. 09-06-2014 Spanò - marketing culturalelaboratoridalbasso
 
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)Giovanni Campagnoli
 
Ubiquitus and context aware technologies- a new interactive way to tour the city
Ubiquitus and context aware technologies- a new interactive way to tour the cityUbiquitus and context aware technologies- a new interactive way to tour the city
Ubiquitus and context aware technologies- a new interactive way to tour the cityMaria Matarrese
 
Mario Flavio Benini Works
Mario Flavio Benini WorksMario Flavio Benini Works
Mario Flavio Benini WorksMetazoo
 

Similar to Biscovery (20)

Mozione Bandiera Lilla
Mozione Bandiera LillaMozione Bandiera Lilla
Mozione Bandiera Lilla
 
Segmentazione del pubblico e posizionamento
Segmentazione del pubblico e posizionamentoSegmentazione del pubblico e posizionamento
Segmentazione del pubblico e posizionamento
 
Chinatown Analysis - Paolo Sarpi, Milan
Chinatown Analysis - Paolo Sarpi, MilanChinatown Analysis - Paolo Sarpi, Milan
Chinatown Analysis - Paolo Sarpi, Milan
 
Ldb TAZ Raveggi 02
Ldb TAZ Raveggi 02Ldb TAZ Raveggi 02
Ldb TAZ Raveggi 02
 
Laboratorio di Interaction design - consigliami
Laboratorio di Interaction design - consigliamiLaboratorio di Interaction design - consigliami
Laboratorio di Interaction design - consigliami
 
Esperienza per tecnologia turismo 2.0 - Scheda corso LEN
Esperienza per tecnologia turismo 2.0 - Scheda corso LENEsperienza per tecnologia turismo 2.0 - Scheda corso LEN
Esperienza per tecnologia turismo 2.0 - Scheda corso LEN
 
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...
Musei e comunicazione digitale - criticità e buone pratiche della comunicazio...
 
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano
#IED4PORTAVENEZIA: Progetto Cross Master per il Comune di Milano
 
Progetto io@accedo
Progetto io@accedoProgetto io@accedo
Progetto io@accedo
 
InBicocca, non si cerca, si trova!
InBicocca, non si cerca, si trova!InBicocca, non si cerca, si trova!
InBicocca, non si cerca, si trova!
 
Michele Marchigiani, network reale o virtuale?
Michele Marchigiani, network reale o virtuale?Michele Marchigiani, network reale o virtuale?
Michele Marchigiani, network reale o virtuale?
 
Ldb S.P.A. 09-06-2014 Spanò - marketing culturale
Ldb S.P.A. 09-06-2014 Spanò - marketing culturaleLdb S.P.A. 09-06-2014 Spanò - marketing culturale
Ldb S.P.A. 09-06-2014 Spanò - marketing culturale
 
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)
Buone prassi di politiche giovanili (Perugia, 17 dicembre 2007)
 
Strategia santa giulia
Strategia  santa giuliaStrategia  santa giulia
Strategia santa giulia
 
Napoli Cities
Napoli CitiesNapoli Cities
Napoli Cities
 
Ubiquitus and context aware technologies- a new interactive way to tour the city
Ubiquitus and context aware technologies- a new interactive way to tour the cityUbiquitus and context aware technologies- a new interactive way to tour the city
Ubiquitus and context aware technologies- a new interactive way to tour the city
 
Slides 12.06
Slides 12.06Slides 12.06
Slides 12.06
 
AM Mediakit 2017
AM Mediakit 2017AM Mediakit 2017
AM Mediakit 2017
 
Documentazione www.btweet.it
Documentazione www.btweet.itDocumentazione www.btweet.it
Documentazione www.btweet.it
 
Mario Flavio Benini Works
Mario Flavio Benini WorksMario Flavio Benini Works
Mario Flavio Benini Works
 

More from Gloria Beccalli

Progettazione User-Centered di un sistema di mHealth
Progettazione User-Centered di un sistema di mHealthProgettazione User-Centered di un sistema di mHealth
Progettazione User-Centered di un sistema di mHealthGloria Beccalli
 
CTgo: smartwatch per la mobilità in città
CTgo: smartwatch per la mobilità in cittàCTgo: smartwatch per la mobilità in città
CTgo: smartwatch per la mobilità in cittàGloria Beccalli
 
Elevator: a new experience
Elevator: a new experienceElevator: a new experience
Elevator: a new experienceGloria Beccalli
 
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014Gloria Beccalli
 
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014Gloria Beccalli
 
IL LINGUAGGIO DEGLI SMS E DELLE E-MAIL
IL LINGUAGGIO DEGLI SMS E DELLE E-MAILIL LINGUAGGIO DEGLI SMS E DELLE E-MAIL
IL LINGUAGGIO DEGLI SMS E DELLE E-MAILGloria Beccalli
 

More from Gloria Beccalli (8)

Progettazione User-Centered di un sistema di mHealth
Progettazione User-Centered di un sistema di mHealthProgettazione User-Centered di un sistema di mHealth
Progettazione User-Centered di un sistema di mHealth
 
Introduzione alla SEO
Introduzione alla SEOIntroduzione alla SEO
Introduzione alla SEO
 
CTgo: smartwatch per la mobilità in città
CTgo: smartwatch per la mobilità in cittàCTgo: smartwatch per la mobilità in città
CTgo: smartwatch per la mobilità in città
 
Elevator: a new experience
Elevator: a new experienceElevator: a new experience
Elevator: a new experience
 
Influence Marketing
Influence MarketingInfluence Marketing
Influence Marketing
 
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
 
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
L'EVOLUZIONE DELL'INTERFACCIA GRAFICA DI FACEBOOK DAL 2007 AL 2014
 
IL LINGUAGGIO DEGLI SMS E DELLE E-MAIL
IL LINGUAGGIO DEGLI SMS E DELLE E-MAILIL LINGUAGGIO DEGLI SMS E DELLE E-MAIL
IL LINGUAGGIO DEGLI SMS E DELLE E-MAIL
 

Recently uploaded

ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIinfogdgmi
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 

Recently uploaded (9)

ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AI
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 

Biscovery

  • 1. di Beccalli, Bombelli e Pigato LABORATORIO DI COMUNICAZIONE VISIVA & DESIGN DELLE INTERFACCE TEORIA E TECNOLOGIE DELLA COMUNICAZIONE JESSICA BOMBELLI GLORIA BECCALLI j.bombelli@campus.unimib.it g.beccalli2@campus.unimib.it
  • 2. di Beccalli, Bombelli e Pigato Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0” http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. Le autrici si scusano per eventuali omissioni, e restano a disposizione per correggerle.
  • 3. di Beccalli, Bombelli e Pigato 1 BRIEF DI PROGETTO
  • 4. Il tema di progetto è un aggregatore d’informazioni – o knowledge-base – sul quartiere di Milano-Bicocca che risponda alle esigenze di target eterogenei come le differenti tipologie di persone che nei diversi spazi e ore del giorno usano, vivono e frequentano questo spazio urbano, funzionale e sociale: Lo strumento di comunicazione digitale on line deve offrire a ciascuna di queste tipologie di utenti un accesso diversificato ed una esperienza capace di soddisfare le specifiche esigenze informative in un’ottica di mobilità e geo-localizzata. BRIEF DI PROGETTO UNIVERSITARI RESIDENTI LAVORATORI CITY-USER FINALITÀ E TEMA DEL PROGETTO TEMA DEL PROGETTO
  • 5. di Beccalli, Bombelli e Pigato ANALISI E BENCHMARK2
  • 6. di Beccalli, Bombelli e Pigato USER-CENTERED RESPONSIVE APPROCCIO DESIGN DESIGN MOBILE FIRST OBIETTIVI E METODI METODI E APPROCCITEMA DEL PROGETTO
  • 7. Per disegnare i confini del quartiere d’interesse ci siamo rifatte alla mappa del sito del Comune di Milano, il quale definisce il quartiere Bicocca come «Quartiere 905» situato nella «Zona 9» di Milano. https://www.comune.milano.it/portale/wps/portal/vdqPaginaQuarti ere?qkey=905 Abbiamo però deciso di incorporare nella zona anche due punti poco distanti che potrebbero essere di potenziale interesse per gli utenti del sito: CENTRO COMMERCIALE SARCA: per i negozi, ristoranti, cinema e sala giochi al suo interno. CARROPONTE: per gli eventi musicali. DISEGNARE I CONFINI DEL QUARTIERE IL QUARTIERE PER NOIDEL PROGETTO
  • 8. http://www.farebicocca.it/ http://www.itineranet.it/bicocca/ http://www.milanotoday.it/notizie/bicocca/ www.unimib.it http://www.mybicocca.it/ … OBIETTIVI E POSIZIONAMENTO DIFFERENTI: • VANTAGGIO COMPETITIVO: responsive design, usabilità, target specifico • STRATEGIA DI MARKETING: personalizzazione ANALISI DELLA CONCORRENZA I COMPETITORPROGETTO
  • 9. ANALISI SWOT STRENGHTS •Essere i primi a proporre una soluzione simile per il quartiere Milano-Bicocca; •Vantaggi per tutti gli attori coinvolti (gestori, utenti, valorizzazione del territorio, ecc.); •Flessibilità: i contenuti possono essere cambiati e/o migliorati; •Concentrazione su un target specifico e facilmente individuabile; •Possibilità di attuare una promozione mirata; •Aspetti culturali, attitudinali, comportamentali dell’utenza a favore. WEAKNESSES •Tempistiche; •Mantenimento del sito; • Reputazione e start-up. FORZE E DEBOLEZZEPROGETTO
  • 10. ANALISI SWOT OPPORTUNITIES •Possibilità di innovare un settore statico; •Diffusione degli smartphone; •Attitudini e comportamento degli utenti di oggi. •Scarsa informazione facilmente reperibile sul quartiere; •Diffusione di zone wi-fi nel quartiere; •Partnership potenziali, •Target di nicchia. THREATS •Entrata di nuovi aggregatori informativi sul quartiere; •Mancanza di concorrenza e quindi della possibilità prevedere più facilmente le possibili problematiche. OPPORTUNITÀ E MINACCEPROGETTO
  • 11. di Beccalli, Bombelli e Pigato RICERCA SULLE UTENZE3
  • 12. TIPOLOGIA DI DOMANDE: •Chi cerca informazioni sul quartiere Milano-Bicocca? •Perché e quali sono le loro esigenze? •In quali contesti d’uso e attraverso quali mezzi cercano informazioni? OBIETTIVI DELL’INTERVISTA: •Raccogliere informazioni sui punti di interesse principali, gli orari di frequentazione e le attività svolte dai potenziali utenti nel quartiere Bicocca. •Verificare un eventuale interesse da parte dei potenziali utenti nei confronti di un nuovo strumento di aggregazione di informazioni sul quartiere Bicocca. •Indagare il rapporto degli utenti con i diversi device nell’ottica della ricerca di informazioni attraverso il nostro strumento di comunicazione (desktop, tablet, smartphone). •Raccogliere informazioni utili alla scelta del ”look&feel” dello strumento di comunicazione. ANALISI DELL’UTENZA LE INTERVISTE
  • 13. STUDENTI: La maggior parte di loro è soddisfatta, e ha una visione positiva del quartiere. •ALCUNI AGGETTIVI: moderno, grande, organizzato e funzionale. •INFO D’INTERESSE: luoghi di ritrovo, info sull’università. RESIDENTI: Hanno una visione positiva del quartiere. Tuttavia, alcuni di loro trovano che sia poco fornito. •ALCUNI AGGETTIVI: moderno, tranquillo, fruibile •INFO D’INTERESSE: eventi, orari. LE INTERVISTE I RISULTATI
  • 14. LAVORATORI: Disinteresse nei confronti di uno strumento di aggregazione di informazioni sul quartiere in esame. • ALCUNI AGGETTIVI: povero, spoglio e desolato. • INFO D’INTERESSE: eventi culturali, supermercati/punti di ristoro per il pranzo. CITY USER: Mostrano apprezzamento per l’idea di un aggregatore di informazioni, e interesse verso il quartiere. • ALCUNI AGGETTIVI: divertente, giovane, moderno, disorganizzato. • INFO D’INTERESSE: negozi, vita notturna, eventi e iniziative. LE INTERVISTE I RISULTATI
  • 15. Le tribù urbane hanno una visione del quartiere piuttosto differente tra loro. Ci proponiamo dunque di porre particolare RILEVANZA ALLA PERSONALIZZAZIONE DELLE INFORMAZIONI E A UN ACCESSO DIVERSIFICATO DELLE INFORMAZIONI. LE INTERVISTE I RISULTATI
  • 16. ► La maggior parte degli utenti conosce o frequenta solo una determinata zona del quartiere: RILEVANZA DELLA GEO-LOCALIZZAZIONE E PERSONALIZZAZIONE. ► Una lamentela comune è stata la scarsa presenza di iniziative ed eventi: RILEVANZA DELLA SEZIONE EVENTI. ► Il mezzo attraverso cui si informano solitamente è lo smartphone: RILEVANZA DELLA VERSIONE MOBILE. ► La maggior parte degli utenti preferirebbe che le informazioni presenti sul sito fossero organizzate per tipologia/categoria di servizio: SUDDIVISIONE INTERNA PER CATEGORIA DI SERVIZIO e NON COSTRINGERE GLI UTENTI A SENTIRSI PARTE UNICAMENTE DI UNA DETERMINATA TRIBÙ. LE INTERVISTE I TRATTI IN COMUNE EMERSI
  • 17. ACCADEMICI RESIDENTI LAVORATORI CITY-USER LE TRIBÙ URBANE PROFILI E PERSONAS
  • 18. Si tratta di una figura interessata a tutto ciò che riguarda l’università. Tuttavia, sono anche interessati a ciò che riguarda i trasporti e i luoghi di aggregazione, specialmente spazi verdi e posti in cui mangiare durante la pausa che siano convenienti e/o originali. Sono inoltre interessati ai luoghi in cui intrattenersi a fine giornata (soprattutto per l’aperitivo) o durante le pause. LUOGHI DI INTERESSE: MONDO UNIVERSITARIO: sedi universitarie, biblioteche, librerie, segreterie, copisterie, conferenze ed eventi universitari. RISTORAZIONE: mense, macchinette del caffè, bar, supermercati, aperitivo, gelaterie, yogurterie, chioschi, paninari, piadinerie, ristoranti etnici, pizzerie d’asporto, fast food, kebap. SVAGO E SOCIALIZZAZIONE: aperitivo, centro commerciale e pub. TRASPORTI: stazione, bus, metro, navetta e car sharing. SERVIZI: parcheggi. IL PROFILO DELL’ACCADEMICO
  • 19. FEDERICA CARATTERISTICHE 21 anni. Studentessa frequentante il corso di laurea in STP in Bicocca. Vive nella periferia di Monza in una piccola villetta con i genitori e la sorella minore. Per spostarsi a Milano utilizza per lo più il treno, ma con i frequenti scioperi si muove anche in macchina. STUDIO Studia all’università Bicocca dal mattino fino a metà pomeriggio quattro giorni la settimana. Ha un bel rapporto col quartiere, lo trova grande, comodo e ben organizzato. La maggior parte del tempo la passa a lezione, in biblioteca, al bar dell’Università e in copisteria. Quando finisce tardi, ogni tanto, fa l’aperitivo con i compagni di studi. DEVICES Non esce mai di casa senza il suo iPhone. Possiede anche un tablet e un pc. Usa Internet per ogni cosa: chattare con gli amici, postare foto, cercare informazioni, studiare… Quando è fuori casa gioca col cellulare o scambia sms o passa il tempo sui social network WISH LIST Le piacerebbe trovare uno strumento online semplice e intuito per spostarsi nel quartiere Bicocca. Le informazioni che le piacerebbe trovare riguardano: eventi e promozioni, parcheggi, e posti economici ma originali dove mangiare. OCCUPAZIONE Non ha un lavoro fisso. Ogni tanto fa ripetizioni ai bimbi delle elementari e scuole medie o qualche lavoretto da promoter. RELAZIONI E PASSIONI Per lei è importante il divertimento e gli amici, però ha qualche preoccupazione per il suo futuro. Non è ancora sicura di cosa farà da «grande». Esce spesso la sera e il week end. La sua passione sono il cinema d’autore e la musica indie rock. Non ama la discoteca, preferisce i pub, i concerti e andare al cinema.
  • 20. Si tratta di una persona che vive nel quartiere e che, di conseguenza, ne ha una buona conoscenza. Questo genere di utente utilizza i mezzi di trasporto per muoversi anche verso l’esterno del quartiere. I luoghi di interesse si trovano spesso nei dintorni del quartiere, soprattutto la sera. Nutre particolare interesse riguardo le occasioni di socializzazione: cerca perciò informazioni per avere una vita più partecipativa e attiva all’interno del quartiere. LUOGHI DI INTERESSE: RISTORAZIONE: supermercati, bar, ristoranti (anche etnici), take away, gelaterie, yogurterie, panifici, pasticcerie, piadinerie, pizzerie, fast food, kebap, chioschi. SVAGO E SOCIALIZZAZIONE: centro commerciale, negozi, cinema, teatro, discoteche, pub, ludoteche, luoghi di ritrovo, centri di aggregazione, centri sportivi, piazze, concerti. TRASPORTI: car sharing, bike sharing, stazione, bus, metro e taxi. RELAX E SPORT: spazi verdi, centri sportivi, palestra. SERVIZI UTILI: banche e sportelli, parcheggi, farmacie, edicole, cappella, ospedali, librerie, biblioteche, parrucchiere, estetista, solarium, medico di famiglia, bellezza in generale. IL PROFILO DEL RESIDENTE
  • 21. GIULIA CARATTERISTICHE 22 anni. Laureata. Single. Figlia unica. Non lavora. Socievole e simpatica. Studentessa fuori sede: da La Spezia si è trasferita a Milano per l’università. STUDIO E TEMPO LIBERO L’università le piace, ma non il quartiere. Lo trova disorganizzato, desolato e poco fornito. Le manca casa e i suoi amici. Odia la burocrazia. Quando non è a lezione, va a far la spesa, in palestra, al cinema e al centro commerciale. La sera fa l’aperitivo con le coinquiline e poi vanno al cinema. Però si annoia un po’, soprattutto il fine settimana. DEVICES Possiede uno smartphone Android, un iPad e un pc che utilizza spesso per: chattare (soprattutto con i vecchi amici che non vede da un po’), fare shopping on-line, informarsi e cercare qualsiasi tipo di informazione. WISH LIST Le piacerebbe moltissimo trovare uno strumento online semplice e intuito per scoprire i posti che ancora non conosce del quartiere, gli eventi, le iniziative, i pub e le occasioni di socializzazione.
  • 22. Lavora nel quartiere Milano-Bicocca. È interessato soprattutto ai mezzi di trasporto e parcheggi disponibili. Vuole anche conoscere posti in cui trascorrere la pausa pranzo. LUOGHI DI INTERESSE: RISTORAZIONE: posti convenzionati, mense, bar, supermercati, aperitivo, gelaterie, chioschi, paninari, piadinerie, ristoranti (anche etnici), pizzerie. SVAGO E SOCIALIZZAZIONE: aperitivo, centro commerciale, pub. TRASPORTI: mezzi di trasporto (stazione, bus, metro, tram, navetta, car sharing e bike sharing). RELAX E SPORT: spazi verdi, palestra. SERVIZI: parcheggi, edicole, librerie. IL PROFILO DEL LAVORATORE
  • 23. ANDREA CARATTERISTICHE 37 anni. Laureato. È direttore e venditore in una libreria. Socievole e cordiale, oltre che serio ed affidabile sul lavoro. Vive a Sesto San Giovanni, e per spostarsi a Milano utilizza prettamente i mezzi pubblici. DEVICES Possiede uno smartphone Android che utilizza spesso per navigare online e controllare la posta elettronica, specie durante gli spostamenti coi mezzi e nelle pause lavoro. Ha un PC fisso e un portatile sui quali, oltre ad accedere al web, scrive documenti. LAVORO E TEMPO LIBERO Dirige e lavora in una libreria all'interno del quartiere Bicocca dal mattino fino a tardo pomeriggio. Durante le pause lavorative non si sposta dal negozio se non per comprare le sigarette o qualcosa per il pranzo al supermercato. Appena uscito dal lavoro, non vede l'ora di tornare a casa. Per lui il quartiere Bicocca é unicamente luogo di lavoro. RELAZIONI È sposato e ha un bambino di 6 anni. Insieme, vivono in un appartamento della periferia di Sesto. Non esce quasi mai la sera, e il week end lo passa solitamente con la famiglia, da parenti o amici, o facendo piccole gite o passeggiate in aree verdi. È però piuttosto attento a ciò che riguarda la cultura e l'arte.
  • 24. Frequenta il quartiere Bicocca col solo fine di partecipare a un determinato evento e/o per trascorrere piacevolmente il suo tempo libero (se vive non lontano dal quartiere). Non sempre conosce poco il quartiere. Cerca informazioni basilari: indirizzo, prezzi e orari dei posti. Cerca eventi culturali, occasioni di ritrovo, svago e occasioni di socializzazione e luoghi di relax e di ristorazione. LUOGHI DI INTERESSE: RISTORAZIONE: bar, aperitivo, gelaterie, yogurterie, chioschi, paninari, piadinerie, ristoranti (anche etnici), ristoranti di cucina alternativa, ristoranti biologici, pizzerie, fast food. SVAGO E SOCIALIZZAZIONE: musei, cinema, concerti, monumenti, teatro, librerie, negozi, aperitivo, centro commerciale, negozi, pub, discoteche, conferenze, sale giochi. TRASPORTI: stazione, bus, metro, tram, navetta, taxi e parcheggi. IL PROFILO DEL CITY-USER
  • 25. FABRIZIO CARATTERISTICHE 23 anni. Da pochi mesi laureato (fuoricorso) alla triennale di Scienze dei Beni culturali in Statale. Vive a Monza con i suoi genitori e si sposta solitamente con la macchina. PERSONALITÀ Divertente ed espansivo, con tanta voglia di fare. Nel tempo libero preferisce stare in casa a giocare con la sua consolle piuttosto che svolgere attività fisiche. DEVICES Possiede un IPhone e lo utilizza solitamente per inviare messaggi con WhatsApp, controllare le sue pagine social e navigare online. Ha un PC fisso e un portatile. WISH LIST Sarebbe interessato ad uno strumento di comunicazione sul quartiere Bicocca che lo informi soprattutto sugli eventi serali, i locali in cui poter bere qualcosa in compagnia e ristoranti. OCCUPAZIONE Durante il giorno lavora come barista in un piccolo bar nel centro di Monza. Se non troverà un’altra occupazione nei prossimi mesi, pensa di prendere in considerazione l’opportunità di continuare gli studi con una laurea Specialistica. RELAZIONI È fidanzato da 4 anni con una ragazza, ma non avendo entrambi un vero e proprio posto di lavoro, vivono ancora con i rispettivi genitori Durante la settimana, e soprattutto nei weekend, gli piace uscire la sera con la sua compagnia di amici per locali, e con la sua ragazza va spesso al cinema e a cena in qualsiasi tipo di ristorante.
  • 26. • Tutti i target di riferimento sono interessati a uno strumento semplice, intuitivo, veloce e pratico da usare, soprattutto in mobilità. • La maggior parte degli utenti ha un buon rapporto con la tecnologia, in particolare con smartphone e tablet. • Gli intervistati preferirebbero visualizzare la mappa del quartiere con i diversi luoghi filtrati in base alla tipologia di servizio. • Dare la possibilità all’utente di personalizzare la ricerca e i contenuti, prestando attenzione a non costringerlo in un’unica tribù urbana. OSSERVAZIONI TRATTE
  • 27. di Beccalli, Bombelli e Pigato ARCHITETTURA DELL’INFORMAZIONE4
  • 28. ALBERO DI NAVIGAZIONE   PIANETA CAMPUS     Mangiare e bere     Spostarsi     Esplorare l’università     Sfruttare il tempo libero     Scoprire i servizi   PIANETA VISITORS     Mangiare e bere     Spostarsi       Vivere la cultura     Divertirsi     Scoprire i servizi   Alloggiare     PIANETA NATIVI     Mangiare e bere     Spostarsi     Comprare     Sfruttare il tempo libero     Divertirsi     Scoprire i servizi   PIANETA LAVORO     Mangiare e bere     Spostarsi       Rilassarsi       Scoprire i Servizi
  • 29. di Beccalli, Bombelli e Pigato WIREFRAME5
  • 32. di Beccalli, Bombelli e Pigato CONCEPT6
  • 33. SCOPO: •Invitare gli utenti ad esplorare e scoprire il quartiere attraverso il nostro strumento di comunicazione; •Creare uno strumento di comunicazione usabile e divertente da usare che possa potenzialmente attrarre anche i meno interessati (in particolare i lavoratori). METAFORA: •Quartiere Bicocca come Universo •Tribù urbane come Pianeti •In questo modo: •Tentiamo di non costringere gli utenti all’interno di un’unica tribù •Li invitiamo ad esplorare l’Universo Bicocca attraverso i 4 pianeti. PROGETTO BISCOVERY
  • 34. • Forte rimando a «Discovery Channel» • Dall’inglese «discovery»scoperta. Invito all’esplorazione e scoperta del quartiere Bicocca; • Font: Blue Highway (Bold). Molto simile a quello del canale televisivo (Gotham); • Icona del mondo al posto della «o» per richiamare il tema dei pianeti e il loro stile grafico cartoonesco. NOME E LOGO
  • 35. di Beccalli, Bombelli e Pigato INTERFACCIA GRAFICA7
  • 36. • Stile cartoonesco con bordi neri disegnati per icone e bottoni. • Per rendere divertente l’utilizzo del nostro mezzo di comunicazione. SFONDO: azzurro, per richiamare il cielo. RAZZO: rappresenta l’utente.  Dopo aver tappato un pianeta nella home page della versione mobile, esso si direziona verso il mondo scelto.  Nella mappa (desktop e mobile) esso indica la posizione e direzione dell’utente LO STILE GRAFICO
  • 37.
  • 38. COLORE: Rosso mattone MOTIVI: Risultati interviste: Richiamo al colore degli edifici dell’Università Bicocca; Quartiere Bicocca: ambiente di studio e formazione per gli studenti. PIANETI E COLORI
  • 39. COLORE: Verde MOTIVI: Risultati interviste; Tranquillità, positività, freschezza, sicurezza; Quartiere Bicocca: ambiente tranquillo e ben servito per i suoi abitanti. PIANETI E COLORI
  • 40. COLORE: Arancione MOTIVI: Risultati interviste; Gioia, positività, entusiasmo, attrattività; Quartiere Bicocca: ambiente di svago e divertimento per i city user. PIANETI E COLORI
  • 41. COLORE: Grigio MOTIVI: Risultati interviste; Mancanza di fiducia e di energia, negatività, noia; Quartiere Bicocca: ambiente spoglio che non offre opportunità, attrattive o servizi per i lavoratori al di fuori dell’orario lavorativo. PIANETI E COLORI
  • 42. ETICHETTE: •Verbi all’infinito •Verbi coerenti con il tema della «scoperta» GRAFICA: •Icone Flat facilmente tappabili su mobile •Simboli riconoscibili anche per mobile •Colore dello sfondo corrispondente al mondo prescelto ICONE DELLA SEZIONE CAMPUS
  • 43. di Beccalli, Bombelli e Pigato TEMPLATES 8
  • 45. HOME HOME Scegli una tribù urbana TEMPLATE MOBILE PORTRAIT
  • 46. TEMPLATE MOBILE PORTRAIT CATEGORIE CATEGORIE Scegli una categoria di servizio
  • 47. TEMPLATE MOBILE PORTRAIT MAPPA ZOOM DELLA MAPPA
  • 48. TEMPLATE MOBILE PORTRAIT TORNA INDIETRO per cambiare pianeta
  • 49. TEMPLATE MOBILE PORTRAIT TAP «MANGIARE E BERE» per cambiare categoria di servizio
  • 50. TEMPLATE MOBILE PORTRAIT FILTRI Scegli una sottocategoria di servizio TAP MENÙ FILTRI Per filtrare ulteriormente i luoghi
  • 53. TEMPLATE MOBILE PORTRAIT TAP COMMENTISCHEDA DEL LUOGO
  • 54. TEMPLATE MOBILE PORTRAIT TAP COMMENTITAP TORNA ALLA MAPPA
  • 55. TEMPLATE MOBILE PORTRAIT ELENCO LUOGHI Tap freccia del footer ELENCO LUOGHI Tap « ordina per »
  • 56. TEMPLATE MOBILE PORTRAIT ELENCO LUOGHI Tap ordina per prezzo TORNA ALLA MAPPA Ritap la freccia della barra
  • 57. TEMPLATE MOBILE PORTRAIT TAP L’ICONA DELLA STELLA Per visualizzare i preferiti PAGINA DEI PREFERITI
  • 58. TEMPLATE MOBILE PORTRAIT TAP L’ICONA DEL CALENDARIO Per visualizzare gli eventi PAGINA DEGLI EVENTI
  • 59. TEMPLATE MOBILE PORTRAIT TAP LA LENTE NELL’HEADER CHIUDI LA PAGINA DEL CERCA
  • 60. HOMEPAGE HOMEPAGE Hover su «Pianeta Campus» TEMPLATE DESKTOP
  • 64. ELENCO LUOGHI Click «scopri i luoghi» TEMPLATE DESKTOP
  • 67. di Beccalli, Bombelli e Pigato PROTOTIPO 9
  • 68. Per quanto riguarda lo sviluppo del codice si sono utilizzati i linguaggi HTML, CSS e Javascript con Jquery. Anche per la realizzazione del prototipo, abbiamo adottato un approccio mobile first. IL PROTOTIPO
  • 69. di Beccalli, Bombelli e Pigato JESSICA BOMBELLI j.bombelli@campus.unimib.it g.beccalli2@campus.unimib.i t GLORIA BECCALLI

Editor's Notes

  1. Dentro al mondo si potrebbero mettere le icone dei vari social media
  2. Dentro al mondo si potrebbero mettere le icone dei vari social media
  3. Dentro al mondo si potrebbero mettere le icone dei vari social media
  4. Dentro al mondo si potrebbero mettere le icone dei vari social media
  5. Dentro al mondo si potrebbero mettere le icone dei vari social media
  6. Dentro al mondo si potrebbero mettere le icone dei vari social media
  7. Dentro al mondo si potrebbero mettere le icone dei vari social media
  8. Dentro al mondo si potrebbero mettere le icone dei vari social media
  9. Dentro al mondo si potrebbero mettere le icone dei vari social media
  10. Dentro al mondo si potrebbero mettere le icone dei vari social media
  11. Dentro al mondo si potrebbero mettere le icone dei vari social media
  12. Dentro al mondo si potrebbero mettere le icone dei vari social media
  13. Dentro al mondo si potrebbero mettere le icone dei vari social media
  14. Dentro al mondo si potrebbero mettere le icone dei vari social media
  15. Dentro al mondo si potrebbero mettere le icone dei vari social media
  16. Dentro al mondo si potrebbero mettere le icone dei vari social media
  17. Dentro al mondo si potrebbero mettere le icone dei vari social media
  18. Dentro al mondo si potrebbero mettere le icone dei vari social media
  19. Dentro al mondo si potrebbero mettere le icone dei vari social media
  20. Dentro al mondo si potrebbero mettere le icone dei vari social media
  21. Dentro al mondo si potrebbero mettere le icone dei vari social media
  22. Dentro al mondo si potrebbero mettere le icone dei vari social media
  23. Dentro al mondo si potrebbero mettere le icone dei vari social media
  24. Dentro al mondo si potrebbero mettere le icone dei vari social media
  25. Dentro al mondo si potrebbero mettere le icone dei vari social media
  26. Dentro al mondo si potrebbero mettere le icone dei vari social media
  27. Dentro al mondo si potrebbero mettere le icone dei vari social media
  28. Dentro al mondo si potrebbero mettere le icone dei vari social media
  29. Dentro al mondo si potrebbero mettere le icone dei vari social media
  30. Dentro al mondo si potrebbero mettere le icone dei vari social media
  31. Dentro al mondo si potrebbero mettere le icone dei vari social media
  32. Dentro al mondo si potrebbero mettere le icone dei vari social media
  33. Dentro al mondo si potrebbero mettere le icone dei vari social media