Progettazione e realizzazione del prototipo di un’applicazione (aggregatore di informazioni sulla città di Milano, geolocalizzata, social) dedicata ai lavoratori freelance che usufruiscono dei principali spazi di coworking presenti sul territorio milanese.

1. Corso di Comunicazione visiva e
Design delle interfacce
prof.ssa Letizia Bollini
2016-2017
PROGETTO DI:
VALERIA BRAMBILLA, LAURA DESSÌ,
ILARIA FERRARIO, CORINNE SCHILLIZZI
COworkCHOOSE YOUR PLACE, SHARE YOUR WORK

2. INDICE
1. Introduzione al progetto
2. Analisi e benchmark
3. Ricerca sulle utenze
4. Concept e architettura dell’informazione
5. Wireframe
6. Look&Feel
7. Prototipo
8. Conclusioni

3. 1. INTRODUZIONE AL PROGETTO
Per il corso di Comunicazione visiva e Design delle interfacce ci è stato richiesto il design di
un’applicazione che fungesse da aggregatore di informazioni sulla città di Milano, utilizzando
la geolocalizzazione ed in ottica social, rispondendo alle esigenze informative di uno specifico
target di utenti tra residenti, universitari, city user e lavoratori.
Partendo dal target a noi assegnato, quello dei lavoratori, è quindi nato il progetto
COWORK4MI, un’applicazione dedicata ai lavoratori freelance che lavorano o che intendono
approcciarsi al fenomeno del coworking, sempre più in crescita a Milano.

4. • Twago
APP per
SMARTPHONE in
ITALIA
• Twago
• Coworking For
SITO RESPONSIVE
• Coworking ForAPP GEO-
REFERENZIATA
• CowoSOCIAL NETWORK
DEDICATO
2. ANALISI E BENCHMARK
Nonostante esistono
applicazioni e siti dedicati al
mondo del coworking,
non abbiamo trovato servizi che
mettessero a disposizione, su
un’unica piattaforma, mezzi e
informazioni per la ricerca, la
possibilità di contatto e di
incontro con altri freelance.

5. Per raccogliere dati sul target «lavoratori freelance» abbiamo scelto di utilizzare un’intervista
semistrutturata presso i luoghi di coworking, sia ai lavoratori che ai proprietari dei luoghi
stessi. La ricerca è stata approfondita ed estesa ai luoghi che non abbiamo potuto visitare
tramite i loro siti ufficiali e statistiche sul coworking a Milano.
3. RICERCA SULLE UTENZE
Fonte: http://mycowo.com/coworking-italia-infografica/

6. 3.1. Intervista e Personas
1. Quanti anni ha?
2. Qual è la sua professione? E’ un freelance?
3. Cosa la spinge a frequentare i luoghi di coworking?
4. In base a cosa sceglie i suoi luoghi di coworking a Milano?
5. Quali luoghi di coworking preferisce a Milano? Perché?
6. Ha mai trovato/le piacerebbe trovare collaboratori all’interno di questi luoghi?
7. Se sì, Quali sono le maggiori difficoltà nel trovare la collaborazione giusta?
Qual è il profilo ideale di un collaboratore? Dove lo cercherebbe?
8. Quanto le potrebbe essere utile un’applicazione che le permetta di trovare la collaborazione
giusta all’interno dei luoghi di coworking presenti a Milano?
 Sulla base di tale intervista, abbiamo individuato 3 personas.
INTERVISTA:

7. Alessandro Lenzini, 47
Business Development
Manager
Residente a Genova, ha studiato Ingegneria
Gestionale presso l'Università degli studi di
Trieste. Lavora come Business Development
Manager presso Alten Italia a Brescia, ma si
reca spesso a Milano per collaborazioni con
altre aziende o con freelancer in contatto con
l'azienda.
Dotato di uno spiccato senso di leadership,
forti capacità relazionali, cooperative e
organizzative, ama viaggiare e occupa il
tempo libero con la lettura e il biliardo.
GOALS: Presentare il nuovo progetto dell'azienda presso la quale lavora.
NEEDS: Ai fini della presentazione aziendale, Alessandro cerca luoghi adatti e consoni ad ospitare i partner della
propria azienda, ovvero con sale meeting, funzione di segreteria, proiettori e forniti di area ristoro.
PREFERENCES: Per i propri spostamenti utilizza l'auto o il taxi, dunque necessita di luoghi con parcheggio e con
hotel nelle vicinanze nei quali soggiornare.
SKILLS:
• Sas Decision Manager
• Sas Visual Statistics
• Sas Business
Intelligence&Analytics
• Presentazioni
PowerPoint

8. Giulia Randazzo, 25
Web designer
GOALS: Realizzare un proprio sito web personale più professionale e indicizzato per poter farsi trovare da
potenziali clienti e presentarsi al meglio.
NEEDS: Giulia non ha ancora aperto un proprio studio e per questo cerca un ambiente di coworking ospitale, in cui
trovare giovani freelance come lei. E' particolarmente interessata a collaborazioni con altre figure del mondo della
comunicazione come informatici, esperti SEO e Content Curator.
PREFERENCES: Avendo da poco iniziato la sua carriera lavorativa post-laurea, preferisce luoghi non costosi e alla
sua portata, con fermate metro/ bus nelle vicinanze, nella zona centrale di Milano. Non può fare a meno del WIFI e del
suo computer per lavorare, ma anche di un buon caffè.
Trasferitasi a Milano per motivi di studio, vive
in zona Loreto con le coinquiline. Si è laureata
in Teoria e Tecnologia della comunicazione
all'Università di MilanoBicocca e ha da poco
intrapreso la strada della freelancer.
E' dotata di spirito creativo e curioso, infatti
grazie agli orari di lavoro molto flessibili,
non perde tempo per tenersi sempre
aggiornata sulle novità del digitale..
SKILLS:
• Adobe Dreamweaver
• Adobe Photoshop
• Adobe Indesign
• Adobe Illustrator
• HTML e CSS
• Javascript

9. Marco Rossi, 35
Architetto
GOALS: Realizzare progetti di arredo di design per uffici.
NEEDS: In cerca di collaborazione per realizzare tali progetti e per poter accrescere le proprie conoscenze, al di
fuori dallo studio. Per questo motivo necessita di trovare luoghi di coworking che mettano a disposizione macchinari per
costruire modellini/prototipi, e frequentato da creativi come lui, con cui poter stringere facilmente relazioni.
PREFERENCES: Muovendosi con la propria auto per una questione di mobilità e tempistiche, predilige luoghi in
prossimità di parcheggi e forniti di stampanti per poter stampare i disegni CAD e render. Quando lavora preferisce
mangiare presso il luogo stesso, per non perdere troppo tempo.
SKILLS:
• Autocad
• 3DStudioMax
• Cinema 4D
• Adobe Illustrator
• Adobe Photoshop
• Pacchetto Office
Nato a Firenze, si è trasferito a Milano per
poter studiare e laurearsi in Scienze
dell'architettura al Politecnico. Si occupa
principalmente di progettazione di uffici. Ha
da poco aperto un proprio studio freelance,
nel quale lavora quasi 8 ore al giorno.
E' una persona precisa, organizza in anticipo
le giornate e compie molti viaggi per visitare
le principali esposizioni di design e
architettura per trarre nuove fonti
d'ispirazione per i propri progetti.

10. 3.2. User needs
Sulla base delle interviste
effettuate abbiamo individuato i
seguenti user needs:
• Ricerca locali a Milano adatti
alle proprie necessità ed
esigenze.
• Ricerca professionisti a Milano.
•Contattare professionisti per
collaborazione.

11. 4. CONCEPT E ARCHITETTURA
DELL’INFORMAZIONE
Funzionalità principali Ricerca di luoghi e di professionisti per collaborazioni.
• Suddivisione dei luoghi di coworking in quattro categorie sulla base dei servizi offerti, del
prezzo e del target di lavoratori che normalmente li frequentano.
• Grazie ai filtri vi è la possibilità di personalizzare la ricerca e selezionare accuratamente i
luoghi di lavoro e i professionisti.
• Iscrizione nella categoria più adeguata alle proprie esigenze allo scopo di facilitare la
ricerca di luoghi adatti e potenziali collaboratori.
• Possibilità di aggiungere tra i «preferiti», all’interno del proprio profilo, luoghi e utenti.
•Attraverso la parte social, costituita dalla chat e mail, è possibile contattare direttamente i
profili professionali.

12. Work & Business
#448ccb
Spazi di coworking per
lavorare al proprio
business in un ambiente
eterogeneo composto
anche da startup e
multinazionali.
Work & Creativity
#59c9bb
Spazi di coworking per
lavorare all’innovazione in
un ambiente di
professionisti in ambiti
creativi, dinamici e
tecnologici.
Work & Coffee
#fbaf5d
Spazi di coworking per
lavorare a progetti in
un ambiente
accogliente e
rilassante in cui
condividere nuove idee
davanti ad un caffè.
Work & DigitalCraft
#f26c4f
Spazi di coworking per
lavorare a progetti di
fabbricazione digitale in un
ambiente in cui sperimentare
e acquisire nuove
competenze tramite l’uso
condiviso di strumenti tecnici.
4.1. Le 4 categorie

13. 4.2. Architettura informativa

14. 4.3. Flusso di navigazione

15. Per la versione tablet con dimensioni 1024x768px abbiamo seguito la seguente griglia, realizzata su
Photoshop.
5. WIREFRAME
La nostra applicazione prevede
un’orientamento orizzontale suddivisibile
in due regioni; una pari al 30% della
superficie che comprende la sidebar e il
menù, l’altra composta dal 70% che
costituisce l’area dei contenuti.
Abbiamo dedicato la sezione superiore
della pagina all’header.

16. 1. Wireframe HOMEPAGE 2. Wireframe delle ricerche principali: LUOGO e UTENTE

17. 6. LOOK&FEEL
Per la realizzazione delle interfacce abbiamo utilizzato i seguenti colori:
Come colore identificativo dell'applicazione abbiamo
scelto il blu, il quale esprime stabilità, armonia,
fedeltà, soddisfazione, quindi utile dal punto di vista
comunicativo per dare all’utente l’idea di
un’applicazione affidabile e professionale.
I colori secondari scelti invece sono le due tonalità di
grigio e il bianco in modo da non interferire con la
rappresentazione cromatica delle categorie nelle varie
pagine dell'applicazione.

18. • La font utilizzata è GILL SANS MT, carattere tipografico sans serif (senza grazie) di tipo
Humanist, progettato da Eric Gill nel 1926. Abbiamo optato per questa scelta in quanto
risulta più leggibile sugli schermi. Per rendere più accattivante il nome dell’app, la font GILL
SANS MT è stata accostata a HICKORY JACK per la parte «work».
• Per quanto riguarda il logo, abbiamo posizionato al centro il blu
identificativo dell’applicazione ed attorno i 4 colori delle categorie.
L’obiettivo comunicativo del logo è la rappresentazione di
un’applicazione “solida”, rappresentata dal carattere di 4MI e dalla
dinamicità resa tramite l’effetto 3D.
Inoltre il concetto di collaborazione è descritta dalle forme tonde, e dai
relativi posizionamento e colore, che identificano le figure umane legate
dall’idea di miglioramento e proiezione verso il futuro.
6.1. Font e logo

19. • Pagina della mappa di Milano
• Pagina del luogo selezionato
6.2. Icone: Task «Ricerca luogo»

20. • Pagina dell’elenco dei professionisti
• Pagina del professionista selezionato
• Pagina della chat
6.2. Icone: Task «Ricerca utente»

21. 6.2. Icone
Icone per la ricerca del luogo
Icone per la ricerca del professionista
Le icone che assumono maggiore importanza
all'interno dell'app sono quelle utilizzate nella
home per dare avvio alla ricerca tramite i due
percorsi per luoghi o per professionisti. E sono
state declinate all'interno della pagina nei 4
colori delle categorie.

22. 6.3. Template Tablet

23. 6.3. Template Tablet: iscrizione utente

24. 6.3. Template Tablet: ricerca luogo

25. 6.3. Template Tablet: ricerca utente

26. 6.4. Template Smartphone

27. 6.4. Template Smartphone: iscrizione utente

28. 6.4. Template Smartphone: ricerca luogo

29. 6.4. Template Smartphone: ricerca utente

30. 6.5. Template Desktop
Nella homepage della
versione desktop abbiamo
aggiunto una sezione “news ed
eventi”, nella quale sono
visualizzati i prossimi eventi e le
più recenti news, ed è presente un
sistema di filtraggio e di ricerca di
quelli meno recenti.
Inoltre abbiamo deciso di
personalizzare maggiormente
l’header, inserendo l’immagine che
nelle altre versioni abbiamo
utilizzato come interfaccia di
avvio.

31. 6.5. Template Desktop: iscrizione utente

32. 6.5. Template Desktop: ricerca luogo

33. 6.5. Template Desktop: ricerca utente

34. Per quanto riguarda lo sviluppo del codice per il prototipo sono stati utilizzati i
linguaggi HTML, CSS, JAVASCRIPT con libreria JQUERY.
Abbiamo deciso di rappresentare il task della ricerca del luogo di coworking,
partendo dall’interfaccia di avvio fino alla chat con l’utente online presso il luogo
selezionato.
A tale fine abbiamo scelto «Talent Garden- Milano Merano» come luogo di
coworking e «Giulia Randazzo» come utente.
7. PROTOTIPO

35. Per concludere, auspichiamo che la nostra applicazione venga ulteriormente sviluppata e
perfezionata affinché possa trovare un effettivo utilizzo tra i professionisti che operano nel
mondo del coworking a Milano.
L’applicazione potrebbe infatti essere utile nel creare relazioni tra professionisti nella città,
considerando l’importanza che sta assumendo il lavoro in team sia per i freelance che
all’interno delle aziende.
Gli sviluppi futuri di Cowork4Mi potrebbero includere alcune funzionalità che abbiamo dovuto
abbandonare nel corso del design dell’applicazione, come la valutazione dei luoghi da parte
degli utenti, tramite rating, e la possibilità per gli utenti di proporre nuovi luoghi di coworking,
aggiornando i marker (che rappresentano i locali) presenti nella mappa.
8. CONCLUSIONI