Biscovery - Mobile first responsive web design

di Beccalli, Bombelli e Pigato

LABORATORIO DI COMUNICAZIONE VISIVA & DESIGN DELLE INTERFACCETEORIA E TECNOLOGIE DELLA COMUNICAZIONE

JESSICA BOMBELLI

GLORIA BECCALLI

[email protected]

[email protected]


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.


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


ANALISI E BENCHMARK2


USER-CENTERED RESPONSIVE APPROCCIO

DESIGN DESIGN MOBILE FIRST

OBIETTIVI E METODIMETODI 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/vdqPaginaQuartiere?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 QUARTIEREIL 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 CONCORRENZAI 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


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’UTENZALE 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 INTERVISTEI 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 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.


► 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 INTERVISTEI TRATTI IN COMUNE EMERSI

ACCADEMICI RESIDENTI LAVORATORI CITY-USER

LE TRIBÙ URBANEPROFILI 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

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

DEVICESNon 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 LISTLe 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.

OCCUPAZIONENon ha un lavoro fisso. Ogni tanto fa ripetizioni ai bimbi delle elementari e scuole medie o qualche lavoretto da promoter.

RELAZIONI E PASSIONIPer 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.


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

CARATTERISTICHE22 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 LIBEROL’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.

DEVICESPossiede 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 LISTLe 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.


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

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

DEVICESPossiede 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 LIBERODirige 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.


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

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

DEVICESPossiede 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 LISTSarebbe 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.

OCCUPAZIONEDurante 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


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


WIREFRAME5

WIREFRAME MOBILE

WIREFRAME DESKTOP


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


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:


Gioia, positività, entusiasmo, attrattività;

Quartiere Bicocca: ambiente di svago e divertimento per i city user.

PIANETI E COLORI

COLORE: Grigio

MOTIVI:


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


TEMPLATES8

BISCOVERY RESPONSIVE

HOME HOMEScegli una tribù urbana

TEMPLATE MOBILE PORTRAIT


CATEGORIE CATEGORIEScegli una categoria di servizio


MAPPA ZOOM DELLA MAPPA


TORNA INDIETROper cambiare pianeta


TAP «MANGIARE E BERE»per cambiare categoria di servizio


FILTRIScegli una sottocategoria di servizio

TAP MENÙ FILTRIPer filtrare ulteriormente i luoghi


MAPPA FILTRATATAP VAI


TAP BALOONTAP PIN


TAP COMMENTISCHEDA DEL LUOGO


TAP COMMENTITAP TORNA ALLA MAPPA


ELENCO LUOGHITap freccia del footer

ELENCO LUOGHITap « ordina per »


ELENCO LUOGHITap ordina per prezzo

TORNA ALLA MAPPARitap la freccia della barra


TAP L’ICONA DELLA STELLAPer visualizzare i preferiti

PAGINA DEI PREFERITI


TAP L’ICONA DEL CALENDARIOPer visualizzare gli eventi

PAGINA DEGLI EVENTI


TAP LA LENTE NELL’HEADER CHIUDI LA PAGINA DEL CERCA

HOMEPAGE HOMEPAGEHover su «Pianeta Campus»

TEMPLATE DESKTOP

MAPPA«mangiare e bere»

TEMPLATE DESKTOP

MAPPA FILTRATA

TEMPLATE DESKTOP

MAPPA FILTRATAClick pin

TEMPLATE DESKTOP

ELENCO LUOGHIClick «scopri i luoghi»

TEMPLATE DESKTOP

PREFERITI

TEMPLATE DESKTOP

CONTATTI

TEMPLATE DESKTOP


PROTOTIPO9

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


JESSICA BOMBELLI [email protected] [email protected].

it

GLORIA BECCALLI

Biscovery - Mobile first responsive web design

Internet

Transcript of Biscovery - Mobile first responsive web design