Portfolio matteo vacca

m.vacca03@gmail.com
matteo.vacca30
+39 348 065 3343
PORTFOLIO
Matteo Vacca

Mi chiamo Matteo Vacca ho 26 anni e sono un UX/UI Designer
Estremamente curioso e appassionato del design in tutte le sue forme. Forte sostenitore del processo User
Centered.
Gli studi fatti in Informatica e in Teoria e Tecnologia della Comunicazione mi hanno permesso di acquisire
competenze in diversi settori attraverso le quali riesco a confrontarmi facilmente con membri del team
aventi esperienze e ruoli diversi: dai project managers agli sviluppatori.
Fino ad ora ho lavorato principalmente con startup. Questo mi ha permesso di conoscere e condividere la
metodologia Agile e di avere una maggiore attenzione alle esigenze di business. Non mi spaventa lavorare
sotto pressione e gestire tante attività con brevi scandenze. La vita da startupper mi ha insegnato anche
questo.
Ora cerco una posizione che mi permetta di confrontarmi con progetti più grossi e complessi, dove posso
condividere la mia esperienza e le mie capacità, portando dedizione, passione e voglia di crescere.

Ho lavorato al processo di design in tutte le sue fasi
Ho esperienza con ogni step del processo user-centered e ho sempre portato
a termine i miei tasks nei tempi richiesti e con il massimo impegno
Cosa amo fare?
Ricerca
Comprendere i bisogni
degli utenti e del
business per trovare una
soluzione che ne sia il
giusto compromesso
Progettare casi d’uso,
analizzare i tasks e
disegnare tanti
wireframes
Progettare interfacce
visive che comunichino
in maniera efficace e che
siano d’impatto
Progettare come gli
elementi della UI
reagiscono all’interazione
utente, per dare un
feedback che porti
significato
GraficaProgettazione Interazione

Alcuni dei miei strumenti di lavoro...
SKETCH 3 AXURE RP 7
PHOTOSHOP CS6 ILLUSTRATOR CS6 POP FLINTO
INVISION QUARTZ
COMPOSER

I PROGETTI
IN QUESTO
PORTFOLIO
RESPONSIVE WEB DESIGN
Kuazoo Sdn Bhd
DESKTOP & MOBILE APP DESIGN (iOS/Android)
AppEatIT
iOS MOBILE APP
SmarTrip
PRINT DESIGN
Giuseppe La Spada - Locandina/Booklet/Invito
Centro Ausonia Cagliari - Locandina e brochure

Kuazoo Sdn Bhd
RESPONSIVE WEB DESIGN | MAR-MAG 2014

IL#CLIENTE
OBIETTIVI
IL#MIO#RUOLO
UX#Designer
COSA#HO#FATTO
Ero l’unico Designer sul progetto. Nella fase di strategy, mi sono
occupato di analizzare le interfacce presenti, analizzare
l’architettura dell’informazione e di cercare una strategia di
contenuto efficace. Nella fase di esecuzione ho realizzato
wireframes a bassa e ad alta fedeltà e realizzato il visual design.
Kuazoo Sdn Bhd si occupa della vendita online di prodotti scontati legati all’ambito “Health
and Well being”.
-Riprogettazione dell’architettura della navigazione, al fine di aumentare la
“findability” dei prodotti
- Content strategy per aumentare la consapevolezza che Kuazoo non è
esclusivamente un e-commerce di prodotti scontati, ma una “trusted unique
destination” riguardante l’health and well being
- Riprogettazione del sito web in chiave responsive, per migliorare l’esperienza d’uso
anche su dispositivi mobile
Analisi Euristica
Analisi dei competitors
PANORAMICA PROGETTO
Content Audit
Card sorting
Content strategy
Wireframes (mobile/tablet/desktop)
Visual Design (mobile/tablet/desktop)

OBIETTIVO 1: REDESIGN DELL’ARCHITETTURA INFORMATIVA
Il primo obiettivo era riorganizzare l’architettura informativa, soprattutto per quanto riguardava la navigazione e ricerca
dei prodotti .
Il sito infatti presentava solo quattro schede di navigazione principale che raggruppavano a loro volta tutti i prodotti in un
unica pagina, rendendo difficoltosa la “findability”
(fig.1 - le 4 schede principali del sito Kuazoo prima del redeisign)

Dopo una prima fase di analisi euristica, ho svolto un content audit per
capire che genere di prodotti fossero presenti sullo store. Dall’analisi, è
risultato che i prodotti presenti su Kuazoo erano più di 500, appartenenti
a 19 categorie diverse
Dato l’ingente numero di prodotti individuato, ho deciso di realizzare un Card sorting aperto con 12 utenti. In tal
modo ho potuto studiare come le persone categorizzavano i contenuti. Questo mi ha aiutato a creare delle macro
categorie per il menu di navigazione (mostrate qui sotto).
CONTENT AUDIT
CARD SORTING
Make up
Eyes make up
Lip make up
Face make up
Food & drinks
Pills
Accessories
Hair removal
Soap & shampoo
Pedicure
Manicure
Gel & face creams
Moisturizer and
deep clean
Face mask
Slimming
Beauty and
body Skin care
Face
Body
Massages
Fitness courses
Yoga courses
Workout tools
Sports and
movement

OBIETTIVO 2: CONTENT STRATEGY
La Unique Value Proposition di Kuazoo era quella di oﬀrire, oltre a dei prodotti sull’H&WB scontati, dei consigli e dei
contenuti scritti da esperti del settore (dai make-up artists a massaggiatrici professionali a dietologi e nutrizionisti). Tali
contenuti erano presenti solo nel blog e non vi era alcuna traccia sul sito.
Uno degli obiettivi di questo lavoro è stato concordare una Content strategy che valorizzasse questa UVP anche sul sito,
lasciando inalterato il blog (come richiesto dal cliente)

Per raggiungere questo obiettivo ho pensato di sfruttare alcune pagine per promuovere, all’interno dello store, la parte
relativa agli articoli e ai consigli degli esperti.
- Home page: ho voluto sottolineare la presenza di esperti e
quindi la possibilità di trovare diverse risposte a domande legate
all’H&WB, così come consigli da persone con esperienza nel
settore.
- Lista prodotti: per ogni categoria scelta, nella parte alta della
pagina è presente un banner con l’ultimo articolo scritto o gli
ultimi consigli. In tal modo l’utente può approfondire degli aspetti
legati a quella categoria. Ogni articolo riporta l’utente al blog e dal
blog ci sarà un back-link che riporta l’utente sulla pagina di uno
speciﬁco prodotto. In questo modo si assicura che articoli e
contenuti siano da supporto al decision-making.
- Lista prodotti: alcuni prodotti possono essere consigliati dagli
esperti del sito. Questo è visibile sin da subito nella lista prodotti.
- Pagina prodotto: può essere presente un consiglio dato da un
esperto su quel determinato servizio o prodotto in vendita. I
consigli possono vertere sull’applicazione del prodotto o sull’uso
di quel prodotto combinato ad altri presenti nello store
(consigliati poi nella sezione di cross-selling).
CONTENT STRATEGY

OBIETTIVO 3: RESPONSIVE WEB DESIGN
Il sito di Kuazoo non era ottimizzato per i dispositivi mobile. L’ultimo obiettivo di questo progetto era
quello di riprogettare le interfacce al ﬁne di rendere il sito responsive, cercando comunque di
mantenere il ﬂusso esistente (es. checkout a 2 step), come richiesto dal cliente.

Ho realizzato i primi wireframes su carta, in modo
tale da iterare su diversi layout delle interfacce,
finchè non sono giunto a dei layout che
consentissero una semplice presentazione dei
prodotti su tre diverse risoluzioni (320px / 780px/
1024px). Ho disegnato in ottica mobile-first,
partendo dai dispositivi mobile.
Una volta decise le interfacce principali ho
realizzato i wireframes low-fi usando Sketch 3.
I wireframes sono stati annotati in modo tale
da fornire agli sviluppatori e al PM sia la
motivazione delle scelte effettuate, sia i
cambiamenti di stato di alcuni elementi
SKETCH
WIREFRAMES

Pagina prodotto (mobile) Pagina prodotto (tablet) Pagina prodotto (desktop)
WIREFRAMES

Ho scelto di utilizzare una palette di colori accesi e morbidi
che comunicano benessere e tranquillità e adatti ad un
pubblico prettamente femminile (target del servizio).
VISUAL DESIGN
Palette colorI
Font
Heiti SC
Cicle The quick brown fox jumps over the lazy
dog
#75BEEE #FFD1BE #A6D0C0 #F1F1F1 #F4F8F7

Lista prodotti prima del redesign (desktop) Lista prodotti dopo il redesign (desktop)
VISUAL DESIGN

VISUAL DESIGN
Pagina del prodotto (mobile)
Pagina del prodotto (tablet)

Pagina prodotto prima del redesign (desktop) Pagina prodotto dopo il redesign (desktop)
VISUAL DESIGN

AppEatIT s.r.l
DESKTOP & MOBILE APP DESIGN | LUG 2013 -MAG 2015

IL#CLIENTE
OBIETTIVI
IL#MIO#RUOLO
Lead#UX#Designer
COSA#HO#FATTO
In appEatIT, oltre ad essere co-fondatore della startup, mi
occupavo della progettazione e della UI del sito web, delle app
mobile e della ricerca per lo sviluppo del gestionale di cassa
proprietario. All’occorrenza ho lavorato anche come front-end
dev, sopratutto per quanto riguardava la risoluzione di bug
minori o l’implementazione di alcune modiﬁche.
AppEatIT nasce come startup innovativa con l'intenzione di restituire ai lavoratori, il tempo perso in
pausa pranzo. Il servizio si rivolge principalmente ai lavoratori con una pausa pranzo limitata (1 ora).
- AppEatIT è arrivata seconda alla competizione Techgarage di Roma, tra più di 100 startup
selezionate
- Ha ricevuto un ﬁnanziamento di 60k € da LVenture Group e di 50k € dalla Regione Sardegna
- Competitor analysis e User research
- Progettazione del sito web
- Progettazione delle app mobile (iOS/Android)
Analisi dei competitors
PANORAMICA PROGETTO
Contextual inquiry
User journey
Wireframes
User testing
Visual Design

OBIETTIVO 1: ANALISI COMPETITOR E USER RESEARCH
Il primo obiettivo comprendeva la stesura di un benchmark sui competitors per capire i trend nel settore del food-ordering,
i modelli di navigazione e le features oﬀerte dai vari servizi. Dopo la prima fase di analisi, ho iniziato subito con la fase di
progettazione del sito web

Ho analizzato diversi online-stores e siti di food-ordering
per capire quali erano le best practices , i modelli di
navigazione e le features oﬀerte da ognuno.
Inoltre ho svolto dei quick test per individuare, in ognuno
di essi, le scelte di design positive da emulare e quelle
negative da evitare in fase di design.
Ho svolto una contextul inquiry all’interno dei ristoranti
per studiare i tempi di attesa, il modo in cui le persone
interagiscono con i vari artefatti e attori in gioco (menu,
camerieri,ecc) e i tempi medi di ordinazione e consumo di
un pranzo.
Dopo la contextual inquiry ho realizzato delle customer
journey per evidenziare il percorso compiuto dagli utenti
in 3 tipi di ristoranti (full e self service e tavola calda), in 3
momenti diﬀerenti (prima del pranzo, durante il pranzo,
dopo il pranzo).
CONTEXTUAL INQUIRY E USER JOURNEY
ANALISI DEI COMPETITORS

OBIETTIVO 2: PROGETTAZIONE SITO DESKTOP
Dopo la fase di analisi ho progettato il sito desktop partendo da degli schizzi su carta, testati con gli utenti, per poi arrivare
alla versione ﬁnale, anch’essa testata con un prototipo interattivo realizzato con Axure RP

Ho progettato i primi wireframes durante lo sviluppo della
tecnologia alla base di appEatIT. Dei quick test di usabilità
hanno messo in luce alcune criticità legate alla navigazione
della pagina ristorante.
Successivamente alla realizzazione dei wireframes, sono
venuti fuori dei problemi legati alla piattaforma, che hanno
imposto una seconda iterazione.
Nella seconda iterazione ho conciliato le esigenze tecniche
del reparto sviluppo con quelle dell’utente, individuate dai
test di usabilità svolti sulla prima iterazione. Dopo la
progettazione ho realizzato un prototipo in Axure RP 6,
che ho utillizzato per testare ulteriormente le interfacce
con 5 utenti, ottenendo buoni risultati.
WIREFRAMES - 2 ITERAZIONE
WIREFRAMES - 1 ITERAZIONE

Il visual è stato realizzando in collaborazione con il web
designer del team.
Abbiamo scelto di utilizzare i colori del logo, rendendoli più
vivaci (vedi palette a lato) e abbiamo optato per una graﬁca
ﬂat che comunicasse professionalità e qualità dei ristoranti
nostri partner.
VISUAL DESIGN
Palette colorI
Font
Open Sans
Montserrat
The quick brown fox jumps over
the lazy dog
The quick brown fox jumps
over the lazy dog
#4F4A49 #F7F6F4#F27928#87C033

VISUAL DESIGN
Promozione singolo ristorante Pagina “come funziona” Pagina “diventa partner”

OBIETTIVO 3: PROGETTAZIONE APP MOBILE
La progettazione delle mobile app ha coinvolto quattro cicli di iterazione. Sono passato dalla progettazione su carta ﬁno
ad arrivare ad un prototipo realizzato con Quartz Composer

Le prime versioni sono state iterate rapidamente
attraverso lo sketching.
Ogni iterazione veniva testata con gli utenti tramite
l’app POP. Questo mi ha permesso di migliorare col
tempo l’interfaccia prima di realizzare un prototipo
ad alta federltà.
Dopo alcune iterazioni attraverso lo sketching,
ho realizzato dei prototipi usando Axure RP 6
per testare meglio le interazioni previste
nell’app.
SKETCHING
WIREFRAMES HIGH-FI

Pagina prodotto (mobile)
WIREFRAMES
Scarica il PDF per una migliore risoluzione Wireframe iOS: http://bit.ly/1jrQF1X http://bit.ly/1P2xMibWireframe Android:

Sono stati usati gli stessi colori usati nel sito desktop, mentre per il font
si è usato quello consigliato per i due rispettivi OS presi in esame
(Helvetica per IOS e Roboto per Android)
VISUAL DESIGN
Palette colorI
Font
#87C033 #F27928 #3A3230 #847F7B #F7F6F4
Helvetica
Roboto
The quick brown fox jumps over the
lazy dog
The quick brown fox jumps over the
lazy dog

Le app dovevano essere sviluppate da una società esterna. Per
facilitare loro la programmazione delle interazioni ho realizzato un
prototipo con Quartz Composer che mostrava il ﬂusso delle schermate,
le animazioni di ingresso/uscita delle pagine e le interazioni possibili
con alcuni elementi (es. ristoranti sulla mappa).
Video prototipo iOS
http://bit.ly/1LLPIwy
Video prototipo Android
http://bit.ly/1Rd5X5V
INTERACTION DESIGN

SmarTrip
MOBILE APP DESIGN | SET 2013

IL#CLIENTE
OBIETTIVI
IL#MIO#RUOLO
UX#Researcher
COSA#HO#FATTO
Per il progetto di Ubiquitous Computing, io mi sono occupato
della fase di ricerca (interviste, creazione delle personas,
creazione degli user flows) e della stesura della relazione del
progetto.
L’esame di Ubiquitous Computing all’Università di Milano Bicocca, richiedeva di progettare
un’applicazione sul turismo che fosse context-aware. Io e il mio team abbiamo deciso di realizzare
un’applicazione mobile che permettesse di migliorare l’esperienza di viaggio, dalla fase di
pianificazione alla fase di condivisione dei momenti vissuti, una volta rientrati a casa.
- Ricerca con utenti
- Creazione delle personas e dei task flows
- Wireframes low-fi
- User testing e wireframes hi-fi
- Visual Design
Interviste utente
PANORAMICA PROGETTO
Personas design
User flows
Decisione sulle features offerte
Stesura relazione finale

Dall’analisi delle interviste sono state create 4 personas.
Le personas sono nate dalla concentrazione dei
comportamenti individuati su 5 diverse variabili:
- pianificazione del viaggio (attività da fare, posti da vedere..)
- acquisto di biglietti di musei/eventi prima della partenza
- ricerca informazioni e recensioni per ristoranti o punti di
interesse durante il soggiorno
- condivisione e uso dei social media durante il soggiorno
- condivisione esperienza di viaggio al ritorno
PERSONAS
Dalle personas ho creato diversi user-flows
per catturare gli step fatti nell’uso
dell’applicazione da utenti con esigenze
differenti
USER FLOWS

Mostra Giuseppe La Spada
PRINT DESIGN | FEB 2013

IL#CLIENTE
OBIETTIVI
IL#MIO#RUOLO
Graphic#Designer#
COSA#HO#FATTO
Mi sono occupato della realizzazione dei tre artefatti richiesti
dal brief, dopo aver ricevuto le immagini e i testi selezionati dal
team di ricerca.
L’esame di Graﬁca all’Università di Milano Bicocca, richiedeva di realizzare un progetto per
un’ipotetica mostra in cui venivano presentati lavori e opere di un designer appartenente alla storia
della graﬁca moderna.
- Realizzazione di una locandina pubblicitaria (21x48)
- Realizzazione di un invito da inviare via posta
- Progettazione e realizzazione di un booklet digitale (epub) e cartaceo (pdf) con
InDesign (formato A5 con 3 quartini)
PANORAMICA PROGETTO
Realizzazione in Photoshop CS6 della
Locandina (21x48)
Realizzazione in Photoshop CS6 dell’invito
per la mostra (10x21)
Realizzazione del booklet con InDesign CS6
in formato EPUB e PDF

Il booklet digitale è stato progettato al ﬁne di poterlo navigare con le gestures. Esse permettono di muoversi
facilmente da una sezione all’altra. Se si vuole approfondire una determinata opera, basta semplicemente scrollare
verso il basso per visualizzare relative foto e video.
PROGETTAZIONE DEL BOOKLET DIGITALE
Giuseppe La Spada
titolo mostra
Esplora le opere >
GIUSEPPE LA SPADA
Bio e poetica PERFORMANCE LIVE Percorso
Autori
Performance 1
Performance 2
Performance 3
FOTOGRAFIA
Fotografia 1
OPERE MOSTRA
GIUSEPPE LA SPADA
Bio e poetica
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui oﬃcia deserunt
mollit anim id est laborum."
Facendo swipe con due dita si passa alla sezione
successiva (Bio - Opere/Live - Opere/Foto)
Facendo swipe con due dita si all’opera successiva
Scrollando verso il basso si visualizzano le immagini
relative all’opera selezionata
OPERE/Performance Live
Percorso
Autori
Vai a fotografia >
Performance 1 Performance 2
Performance 3 Performance 4
Vai a fotografia >
Performance 1 Performance 2 Performance 3 Performance 4
Vai a fotografia >
Vai a fotografia >
Vai a fotografia >
OPERE/Fotografia
Vai a Performance Live >
Fotografia 1
Performance 1 Performance 2 Performance 3
Vai a fotografia >
Vai a fotografia >
Vai a fotografia >
Vai a fotografia >
OPERE/Fotografia
Vai a Performance Live >
Fotografia 1

Centro Ausonia - ASL 8 Cagliari
PRINT DESIGN | MAG 2015

IL#CLIENTE
OBIETTIVI
IL#MIO#RUOLO
Graphic#Designer
COSA#HO#FATTO
Mi sono occupato della realizzazione grafica delle locandine e
delle brochure, nonchè della stampa delle stesse presso
apposita tipografia.
Il centro di riabilitazione Sanitario e Sociosanitario Ausonia, facente parte della ASL8 Cagliari, ha
organizzato una serie di incontri tra il personale medico e i caregiver, al fine di creare un gruppo di
sostegno per queste persone e aiutarle nel loro percorso di assistenza al malato.
- Realizzazione di una locandina pubblicitaria da appendere nelle strutture ASL
(formato A3)
- Realizzazione di una brochure informativa da inviare via posta (formato A4)
PANORAMICA PROGETTO
Locandina (21x48)
brochure informativa
Invio materiale alla tipografia per la
stampa

Contatti
m.vacca03@gmail.com
matteo.vacca30
+39 348 065 3343
http://linkedin.com/in/matteovacca
http://behance.net/matteovacca

Portfolio matteo vacca

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Portfolio matteo vacca

Semelhante a Portfolio matteo vacca (20)

Mais de Matteo Vacca

Mais de Matteo Vacca (12)

Último

Último (6)

Portfolio matteo vacca