Progettazione e sviluppo del prototipo di uno strumento di comunicazione digitale online: precisamente una Knowledge Base sul quartiere Bicocca di Milano.
Il design è stato realizzato per dispositivi desktop, tablet e smartphone, adottando gli approcci User Centred e Mobile First, con particolare attenzione agli aspetti di comunicazione visiva e di differenziazione delle informazioni in base alle esigenze di 4 target previsti dal brief. Il prototipo è stato successivamente sviluppato solo per la versione mobile.
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.
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
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
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
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
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
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
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
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
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
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
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media
Dentro al mondo si potrebbero mettere le icone dei vari social media