SlideShare ist ein Scribd-Unternehmen logo
1 von 84
Downloaden Sie, um offline zu lesen
UX/UI PORTFOLIO
EXPLORE DESIGN MAKE
Ogni fase di realizzazione segue un processo ben definito e validato nel tempo
IL NOSTRO METODO
Ogni progetto inizia con una ricerca
esplorativa, per analizzare i pain e i need
e identificare e classificare i problemi o i
limiti progettuali.
La ricerca segue tre aspetti principali:
Organizzazione (definizione degli asset,
del business model, del brand, delle
persone e dell’ambito culturale);
Contesto (definizione dei valori, dei trend,
dei benchmark);
Utenti.
In questa fase definiamo le soluzioni e
i concetti, attraverso la realizzazione di
prototipi, da testare e validare.
Seguendo i principi del design thinking,
il nostro approccio è human-centred:
mettiamo al centro le persone, i loro
bisogni e le loro percezioni al centro del
processo.
Adottiamo un approccio design-centric
quando le tempistiche di progetto sono
ristrette e coinvolgiamo team e utenti in
qorkwhop di co-design.
Nella fase del make realizziamo gli output
finali, che portano alla luce e rispecchiano
nel dettaglio le idee e le soluzioni proposte.
Seguiamo ogni parte di implementazione
e sviluppo del progetto, creando output
di ottima qualità e guidelines utili ai
collaboratori di progetto.
DELIVERY OUTPUTS
EXPLORE DESIGN MAKE
+ + +User research
(Interviste, focus group, mistery)
Product vision MVP Definition
Personas
(Profili utente, goal e
motivazioni)
+ + +Benchmarking Value proposition Product ownership
Inspiration
(Booklet/moodboard)
+ + +Trend research
Service map UX Guidelines
(Navigation patterns,
Micro UX, User tests/
analytics, First use
experience)
User journeys
+ + +AS IS picture
(Analisi dello stato dell’arte)
UX concept
(Architettura dell’informazione,
wireframes, flow chart, User stories)
UI Guidelines
(CSS, HTML, JS, Librerie di riferimento)
Features map /
Gap Analisys
+ UI concepts
(Design system, mockup)+ UX/UI evaluation
(Valutazione)
UX/UI Analysis Blueprints UI patterns Mockups Temporary
product
ownership
(UX Governance)
Canvas UX guidelines Sitemap User tests /
Analytics
Format validati nel tempo e personalizzabili
Competitors
map
MVP Definition CSS / HTML
UI / Data
visualization
library
Micro UX
guidelines
600ms
1st
Goal
20
Clicks
</>
+ UX Governance
NELLO SPECIFICO
USER
EXPERIENCE
USER
INTERFACE
Dopo una fase di studio dei comportamenti
degli utenti, definiamo gli user goals e i modelli
di interazione applicabili, a seconda del settore,
dell’ambito e del contesto. Il metodo che seguiamo
include interviste, ricerche e benchmarking.
La nostra concezione di user interface design
integra gli aspetti di estetica, ai principi di
usabilità, alle conoscenze tecnologiche, per
progettare software che lascino il segno.
+
SOFTWARE E
WEB APPLICATION
UNDISCLOSED
GLOBAL SOFTWARE VENDOR
webapplication
2019
Brief
Creazione della versione browser di un software leader di
mercato, dedicato alla gestione di studi professionali.
Obiettivi
Realizzare un percorso di consulenza e re-design, in
collaborazione con i team business, di sviluppo e design interni
alla società, per realizzare la nuova versione browser, applicando
la metodologia Agile alla roadmap di sviluppo.
PORTFOLIO UX/UI
L a n o s t r a m e t o d o l o g i a
Ricerca del contesto e dei nuovi trends
Ricerca esplorativa per ispirare la strategia da attuare e
la tipologia di prodotto da realizzare su browser. I trend
presentano una serie di casi, valutati secondo una scala e
dei valori predefiniti.
+
EXPLORE
1
Cloud
Mobile
Chatbot
Smart working
Cyber security
Performance tracking
Machine learning
Subscription business
model
Case 1
Virtual firm
Tech driven cases
Strategic
keywords
Case study overview
SCREENSHOT BENCHMARK
USABILITY
LOOK
& FEEL
INTEGRATIONSMULTI-DEVICE
SPECIFIC
FEATURES
Ricerca esplorativa
PORTFOLIO UX/UI
L a n o s t r a m e t o d o l o g i a
EXPLORE
1
Creazione degli user scenarios Definizione degli user insights+
Ricerca esplorativa
20
5
5
I n t e r v i s t e
P a e s i
P e r s o n a s d e f i n i t e
+
ACTIVITIES NOTES
PERSONAS 1
Definizione dei comportamenti e delle azioni quotidiane
degli utenti, al di fuori dell’utilizzo del software
Creazione delle Personas e analisi peculiare
dell’utilizzo delle aree del software
PORTFOLIO UX/UI
L a n o s t r a m e t o d o l o g i a
Wireframe
Definizione degli elementi e del layout in base allo scopo di pagina
+Definizione UX
Panels
Tutte le interfacce, costruite su una griglia di 12 colonne, sono state pensate per
raccogliere al loro interno contenitori flessibili o fissi in cui vengono presentati i
contenuti di pagina, di dettaglio, di overview, oppure di navigazione gerarchica
interna alla pagina.
+
DESIGN
2
UX in motion
Definizione delle animazioni e del tempo di comparsa per focalizzare,
educare o intrattenere l’utente in base allo scopo di pagina
100ms 400ms 600ms
Scopo
WOW effect
Scopo
Focus
Scopo
Educate
+
Scopo
Presentare una serie
Scopo
Visualizzare dettagli
Scopo
Navigare rapidamente
PORTFOLIO UX/UI
A concept based on Mobility needs
L a n o s t r a m e t o d o l o g i a
UI concepts e Test
MAKE
3
Sessioni di co-design
Il design della piattaforma viene seguito
in piena collaborazione con le aree
business, di sviluppo e design
+
3N u o v i c o n c e p t
2D e s i g n S p r i n t
30T e s t e r c o i n v o l t i
U s a b i l i t y
I n t u i t i v i t y
C o n c e p t 1
A concept based on the WOW effect
U s a b i l i t y
I n t u i t i v i t y
C o n c e p t 2
A concept that improve performances
U s a b i l i t y
I n t u i t i v i t y
C o n c e p t 3
Validazioni test utente
Vengono realizzati a seconda degli scopi:
Definizione MVP: Closed card sorting
Validazione UX/UI: Interactive test on mockup
Direct feedback: Survey e interviste mirate
+
PORTFOLIO UX/UI
EDUCAZIONE
FINANZIARIA
software
2018 Banca dei Territori
Brief
Progettazione dell’educazione finanziaria, veicolata attraverso
l’edutainment, supportato da un’esperienza utente studiata in
modo specifico per rispondere ai requisiti dei processi di digital
learning.
Obiettivi
Definire tutti gli aspetti dell’esperienza di interazione tra gli utenti
(bambini 4-12 anni, da soli, accompagnati da un adulto o in
gruppo, o adulti da soli) e il robot umanoide Pepper. Sviluppare
un’applicazione interattiva, basata su trigger visivi, vocali e
meccanismi di gamification. È stata concepita una cornice di
storytelling all’interno della quale sono stati sviluppati dei giochi
interattivi. Il robot è stato presentato ufficialmente al Lucca
Comics e al Museo Del Risparmio di Torino per pubblicizzare il
nuovo conto XME dindi.
PORTFOLIO UX/UI
Progettare la relazione uomo e macchina
U t e n t i
U t e n t i
R o b o t
S p a z i o
S p a z i o
R o b o t
RUOLO DEL ROBOT
La costruzione del personaggio di Pepper è
basata sul framework narrativo del viaggio
dell’Eroe, in cui Pepper è, insieme all’utente,
protagonista dell’apprendimento.
A supporto del meccanismo story-based
sono presenti specifici moduli di gioco,
inseriti in una narrazione complessiva,
in cui ci sono personaggi secondari, il cui
ruolo è funzionale al fornire risposte a
tutte le domande riguardanti le modalità di
risparmio.
+
CHI SONO GLI UTENTI?
Creazione delle Personas tramite
interviste e analisi utenti.
+
• Analisi sul campo
• Mistery
• Definizione degli scenari
• Analisi dei bisogni
• Personas
• Analisi delle funzionalità
• Definizione degli obiettivi
LE COMPONENTI DELL’INTERAZIONE DEFINIZIONE DELL’INTERAZIONE
Quali sono le funzionalità che
il touchpoint robotico può
erogare?
Chi fruirà dell’esperienza?
Concept
Quali sono i fattori esterni
che possono influenzare
l’esperienza?
SOFIA FRANCESCO E MARTA
Pepper sa spiegare ed esprimere le
proprie emozioni in modo semplice e
divertente.
PORTFOLIO UX/UI
Robotoolkit
Chiusura
Riposo
Svolgimento
Ingaggio
DEFINIZIONE DELLA USER JOURNEY IL CICLO DI INTERAZIONE
Nelle interazione uomo-robot, le user journey sono di tipo circolare.
Da una posizione di riposo iniziale del robot, un trigger attiva
l’ingaggio con l’utente, che si completa con il ritorno alla posizione
di riposo, una volta terminato il dialogo con l’utente.
Riconoscimento presenza + riconoscimento
tipologia di utente (in particolare: adulto,
bambino in età 6-8 anni, bambino in età 8-18)
Il riconoscimento dell’utente attiva
un’interazione organizzata in chiave
modulare.
I moduli, oltre tenere conto della tipologia
di utente ingaggiato e riconosciuto, tiene
conto dei diversi life-cycle dell’interazione
dell’utente, fornendo possibili attività,
in grado di essere fruite secondo diversi
archi temporali.
Conclusione della
interazione + CTA (es.
generazione lead)
PORTFOLIO UX/UI
Robotoolkit
DEFINIZIONE DELLA MICRO-INTERAZIONE
Ciao Pepper! Ciao! Ti ricorderai
sicuramente quanti desideri
ha un bambino. Tu cosa
desideravi da piccolo?
La gestualità
guida
l’interazione
L’Utente sceglie la bicicletta
toccando l’immagine
corrispondente sullo schermo
Lo storyboard è costruito
tenendo conto dei diversi livelli di
interazione.
Il layer portante è quello
dell’esperienza utente
conversazionale.
La visualizzazione a schermo
supporta attraverso le immagini
la comunicazione verbale di
Pepper e interviene come
interazione sostitutiva, di tipo
touch-screen, nel caso quella
verbale non andasse a buon fine.
I livelli secondari di interazione
sono rappresentati dal
movimento e dall’espressione,
che comprendono la gestione
dello spazio e rendono human-
friendly l’esperienza utente.
PORTFOLIO UX/UI
Pepper è un robot
spaziale, che viene da
un pianeta dove non
conoscono il valore del
risparmio.
+
Per questo la sua scuola
è stata venduta e Pepper
ha deciso di partire per
salvarla.
+
È arrivato sul pianeta
Terra per imparare a
risparmiare.
+
Gli amici
NELLY PIGGY
Gli aiutanti
Il gioco del risparmio
I p r o t a g o n i s t i d e l g i o c o
Edutainment
Il progetto è basato sul dell’utilizzo dei contenuti digitali nei processi di attivazione
dell’apprendimento della “touch-screen generation” (target dai 4 ai 18 anni).
La creazione dei DLO (digital learning object) che compongono l’interfaccia
comprendono:
•	 lo studio di una struttura di UX che risponda agli elementi del processo di
apprendimento, con particolare attenzione alla tipologia di interazioni richieste
dalla fascia di età scolare (es: elemento della tangibilità, espresso dal drag&drop);
•	 L’utilizzo di diversi livelli di interazione in modalità complementare;
•	 Utilizzo dell’interazione vocale come comunicazione portante tra l’utente e il robot,
privilegiando le caratteristiche “umane”che possono essere veicolate attraverso
un’interfaccia conversazionale.
+
Sviluppo e
test utente
Assistenza allo sviluppo e
direzione dei test utente su
tablet incoprorato. “XME
dindi” è stato presentato
ufficialmente in occasione
del Lucca Comics 2018 e
al Museo del Risparmio di
Torino.
+
Pe pper
I colori e lo stile
Colori caldi ed intensi,scelti per
esprimere maggiore emozione.
+
CONCEPT: LA STORIA DI PEPPER
PORTFOLIO UX/UI
45
90
135
180
225
270
315
45315
TURBO
Brief
Progettazione della user experience e user interface della
piattaforma TurboADV, trading desk italiano di programmatic
advertising.
Obiettivi
Per TurboADV è stata programmata una consulenza
approfondita, la realizzazione della UI e art direction della
comunicazione digitale dei software di TurboADV,
Presentazione e racconto della suite attraverso un sito vetrina
sintetico e attento alla presentazione dei prodotti.
software
2016
PORTFOLIO UX/UI
45
13
180
225
270
315
Le GIF e le icone in movimento
Le GIF animate non necessitano spostamenti sulle assi X-Y. Sono contenute in una maschera
di ritaglio circolare.
CREATE CLUSTER
CONSIDER
18-30 36-40 46-50
1.500.000 Rate known 89%AGEUserUser
Gender
Age
Relationship
Children
Education
EventsEvents
Measures
Browsers
Location
O.S.
Coca-Cola
Cluster optionsCluster options
Coca-Cola for dinner
CriteriaCriteria
+Drag here another label
Coca-Cola for dinnerCoca-Cola for dinner
89%1.500.000
Age
1.200.000 56%
CONNECT
+/- Add “AND”Condition
56%
1.200.000
+
Software UI
Documentazione tecnica UI, sull’utilizzo e sul senso delle forme e dei colori nei servizi di Tur-
boADV. I colori, la dimensione e la posizione degli elementi guidano l’utente alla selezione di
funzioni primarie, secondarie e opzionali, valorizzando la user experience e le scelte imprendi-
toriali di vendita di prodotto.
3 K
5 K
7 K
10 K
Users
Events
500
1-10 11-100 101-1000
1 K
2 K
Active campaignsActive campaigns
User Consumption Range
Registered events by Advertiser New Users by Provider Top traffic
Top domains
Advertiser
OVERVIEW
Website New users Users Events
3.250lastampa.it 345 K
6.300autoscuola.it 120 K
2.400repubblica.it 900 K
3.560sole24ore.it 1.3 M
1.300libero.it 160 K
6 M
12 M
9 M
30 M
18 M
| Last 30 days
MOST ACTIVE
Coca-Cola
MAN LOVING FO...
IMPRESSION COUNT CLICKS CTR SEGMENT REACH CONVERSION
1 M 2.345 18% 20% 12
%
WEDNESDAY
4 PM
MilanMilan
Samsung
Heineken
Coca-Cola
Pepsi
FCA
1 M
2,2 M
146 K
122 K
500 K
23 K
Total
3 M
175 K
536 K
9,5 K
79 K
130 K
12 K
Total
932 K
Milan
Samsung
Heineken
Coca-Cola
Pepsi
FCA
Data visualization
+
I colori
+
+
PORTFOLIO UX/UI
software
TURBOADV
SELF SERVICE
2017
Brief
Creare una versione brandizzata del software TurboADV Self
Service offerto in White Label.
Creare una skin da applicare alle installazioni di TurboADV Self
Service dedicate ad un singolo cliente.
Obiettivi
PORTFOLIO UX/UI
Navigazione
La navigazione del software avviene su due livelli, mentre
l’interfaccia grafica distingue attraverso i colori gli elementi di
decoro dagli elementi di navigazione, cliccabili.
Guida UI
Al personale di sviluppo viene offerta una guida
tecnica sugli elementi della UI, per evitare
discostamenti tra il design e il prodotto finale.
+ +
PORTFOLIO UX/UI
Dashboard
Una dashboard modulare accoglie l’utente, segnalando
l’andamento sintetico delle proprie campagne pubblicitarie.
+
PORTFOLIO UX/UI
ANTEO
Brief
Anteo è una cooperativa sociale di servizi alla persona
che ha sede a Biella in Piemonte, ed opera in campo socio
sanitario, sociale ed educativo.
Obiettivi
Il progetto Anteo nasce con l’intento di creare una
dashboard di controllo, ad uso interno, per analizzare e
comparare l’andamento delle strutture di Anteo presenti
nel territorio italiano.
webapplication
2013
PORTFOLIO UX/UI
Mag GiuL ugpr
297.243 5.466.116 830.619 47.534
Data analysis
- strumento utile di navigazione, comparazione e analisi di dati
- alberatura a livelli, relativa al percorso effettuato
Data visualization
- realizzazione UI software di analisi
- personalizzazione charts UI Dashboard
- valorizzazione dell’immagine coordinata
- uso dei colori per facilitare la navigazione e i focus
+
+
PORTFOLIO UX/UI
software
ZEROSTORIES
2016
Brief
Zerostories realizza contenuti di marca innovativi, destinati a
una distribuzione multimediale. È necessario creare un catalogo
categorizzato per genere televisivo e target.
Permettere all’utente di fruire il catalogo delle serie televisive,
nonché ricercare con semplicità, accedere e visualizzare i dati
sulle serie di propria preferenza.
Obiettivi
PORTFOLIO UX/UI
Le copertine delle serie vengono
presentate come elemento di
navigazione principale.
Il catalogo è diviso in categorie,
filtrabili dall’utente.
Il campo di ricerca e i filtri
sul pubblico permettono di
incrociare i dati presenti delle
serie televisive e offrire all’utente
dei risultati di proprio interesse.
+
PORTFOLIO UX/UI
La scelta tipografica esalta i risultati presentati
in tabella e i titoli di prodotto.
Essendo il passaggio tra l’area Admin e
l’area Production un’azione frequente, è
stata preferita una navigazione laterale,
sempre presente in pagina.
+
Tutte le indicazioni sulla User
Interface vengono riassunte in
un documento PDF, sempre a
disposizione del team di sviluppo.
+
PORTFOLIO UX/UI
webapplication
NIENTE TV
2017 niente.tv
Brief
Creazione del portale di Niente TV, produttore online di serie
televisive e contenuti comici.
Mostrare il catalogo e le ultime serie pubblicate, attraverso una UI
vicina al mondo cinematografico.
Obiettivi
PORTFOLIO UX/UI
Pagina dedicata alla serie
Creare una pagina di archivio dedicata ad
una serie televisiva. L’intestazione si colora
automaticamente, a seconda del colore di
sfondo della foto caricata.
Homepage modulare
A seconda del numero di serie pubblicate,
il layout della homepage può essere
riadattato. I moduli posso essere catalogati
in sotto-insiemi e dare risalto alle serie più
in voga.
Slider
Le tre serie in evidenza sono raccolte in
uno slider, che accoglie il visitatore in
homepage.
+
+
+
PORTFOLIO UX/UI
WEBSITE
Brief
Gaia Italia è un brand italiano attento alla realizzazione di prodotti
per l’acquariofilia di alta gamma, dalle vasche ai mobili realizzati su
misura. Gaia Italia, attraverso i suoi prodotti, mira alla riscoperta
del legame profondo tra l’uomo e la natura.
Obiettivi
Il sito di Gaia Italia racconta in 4 lingue, la filosofia dell’azienda e
tutta la gamma di prodotti. Ogni prodotto ha una pagina dedicata,
con una struttura grafica realizzata ad hoc, per valorizzare le
singole caratteristiche e rispecchiare i valori del clienti, basati sulla
personalizzazione come valore.
I punti chiave per lo sviluppo del sito web sono stati:
• Valorizzazione dell’azienda;
• Alberatura semplice;
• Rapidità di lettura;
• Esperienza multi-device
GAIA
website
gaia-italia.com2016
PORTFOLIO UX/UI
Valorizzazione
dell’azienda
e i suoi prodotti attraverso
schede tecniche e fotografie,
che celebrano anche
l’atmosfera italiana che
l’azienda vuole trasmettere.
Il logo è una spirale ellittica, dove un’onda genera l’esistenza di un
piccolo embrione, che si lega nuovamente all’acqua, creando un ciclo di
genesi infinito. Così come accade in natura, lì dove l’acqua passa nasce
la vita, un embrione, forma di vita che accomuna l’uomo a tutti gli altri
animali esistenti.
Poi ognuno prenderà la sua strada
Features
• Multilingua (EN, IT, DE, FR)
• Pagine Aquascaping
• Pagine prodotti (vasche,
mobili,accessori)
• Navigazione mobile
• Visualizzazione fotografica
responsive
Alberatura semplice
Il sito è stato concepito come
un viaggio, alla scoperta delle
ispirazioni italiane e della
filosofia che hanno ispirato i
prodotti.
+ + +
+
PORTFOLIO UX/UI
HABBLE
Brief
Realizzazione di un nuovo concept di comunicazione e del sito
web Habble.it, basato sulla valorizzazione di contenuti testuali e
iconografici, per presentare i nuovi prodotti in corso di sviluppo.
Obiettivi
Offrire una demo gratuita dei nuovi prodotti Habble e generare
lead generations sui prodotti Telco, attraverso un’esperienza
lineare, iconografica e immediata.
website
habble.it2018
PORTFOLIO UX/UI
Sitemap workshop
Definizione dello scopo del sito, delle singole pagine e dei flussi utente
Chi è Habble?
ABOUT CLIENTS SOLUTIONS HOW TO BUY
Cosa offre?Con chi lavora? A chi si rivolge?
FLUSSO
INFORMATIVO
FLUSSO DI
LEAD GENERATION
PORTFOLIO UX/UI
Creazione di un linguaggio
diretto e dedicato ad ogni
tipologia di cliente
Lo stile
Lo stile grafico gioca sui forti contrasti tra il bianco
e le gradazioni di blu, in alcuni casi utilizzati con
diversa opacità. In questo modo ne risulta un
fascio di luce, che guida e accompagna l’utente
nella comprensione dei contenuti.
L’assistente virtuale
Gli elementi di interazione sono presentati come
hotspot che permettono all’utente di scoprire
approfondimenti sui prodotti.
+
+
+
Infografiche
PORTFOLIO UX/UI
webtool
CHEBEC
Brief
Un web tool online, ospitato sulle piattaforme partner del
progetto Chebec, dedicato alle realtà industriali culturali e
creative, progettato per misurare la propria predisposizione
all’internazionalizzazione.
Generare una valutazione numerica e testuale, utili a creare
una completa consapevolezza sugli step necessari da compiere
per rendere il proprio modello internazionale. Ogni valutazione
tiene in considerazione le peculiarità legate alle tipologie di
professionisti e imprese del settore ICC (professionisti o ditte
individuali, microimprese con ridotte competenze imprenditoriali/
manageriali).
Obiettivi
2019
You ART
the World:
ready to
conquer it?
PORTFOLIO UX/UI
Sito del partner
L’utente può accedere al tool
cliccando sul banner presente
sui siti partner
Assessment
Ogni utente può compilare il
questionario di assessment
in forma anonima
Dashboard
informativa
Ogni assessment genera
un output personalizzato:
la valutazione comprende
una parte numerica,
quantificabile e comparabile,
e una parte descrittiva
consulenziale
Welcome page
Una pagina introduttiva descrive
all’utente gli obiettivi dell’assessment
IR WEB TOOL
Progettazione User flow
Utente
Inteso come professionista,
operatore o istituzione
culturale
PORTFOLIO UX/UI
Framework di IR Struttura di assessment
La metodologia Delphi
È una tecnica di indagine iterativa utilizzata con l’obiettivo di
ottenere risposte ad un problema, coinvolgendo un panel di
esperti indipendenti. 
La metodologia, grazie alla sua particolare struttura, consente di
ottenere non soltanto opinioni singole, ma di sollevare un
confronto intorno all’oggetto di una ricerca, tra gli esperti
selezionati. Si tratta di un metodo qualitativo, partecipativo,
previsionale e di confronto
Web form
Per ciascuna area vengono elaborate 10 domande a scelta multipla, con l’obiettivo di indagare il grado di
predisposizione all’internazionalizzazione del beneficiario rispettivamente all’asset specifico. Alle risposte sono
attribuiti punteggi pesati sulla base dell’influenza di ciascuna competenza nel quadro della strategia complessiva di
internazionalizzazione.
Dashboard informativa condivisibile
Al termine dell’assessment viene generata una
dashboard riepilogativa, composta da elementi di natura
quantitativa e qualitativa:
• Livello complessivo di IR, tra tre macro livelli (seed,
plant, tree);
• Radar chart, per capire i punti di forza e debolezza;
• Punteggio per ogni singola area;
• Feedback testuale consulenziale.
+
+
+
D o m a n d a 1 D o m a n d a 2 D o m a n d a 3 D o m a n d a 4 D o m a n d a 5 D o m a n d a 6
1
Area 2
Area 1Area 5
Area 4
Area 3
R a d a r c h a r t
Area 1 40/40
2 3 4 5 6
Area 2 20/40
Area 3 11/40
Area 4 31/40
Area 5 28/40
I l f r a m e w o r k , e l a b o r a t o t r a m i t e m e t o d o l o g i a
D e l p h i , f o r n i s c e l a b a s e p e r l a s t r u t t u r a z i o n e d e l
q u e s t i o n a r i o d i a s s e s s m e n t .
PORTFOLIO UX/UI
Brief
Bioindustry park è il parco scientifico tecnologico situato a
Colleretto Giacosa (TO).
Obiettivi
Creazione dell’identità visiva digitale per la comunicazione di
Bioindustry Park, il più grande parco biotecnologico italiano.
Posizionare Bioindustry Park come luogo ottimale dove far
crescere le imprese del settore della salute.
Revisione completa e set-up sito web di BiPCa in lingua italiana e in
lingua inglese, sia dal punto di vista contenutistico sia del lay-out.
BIOINDUSTRY
PARK
website
2016 bioindustrypark.eu
PORTFOLIO UX/UI
Data visualization
Le chart si basano sulla monocromia di azzurri,
possono essere a più livelli e in più versioni a
seconda del colore dello sfondo.
+
I colori
I colori comunicano la sobrietà e la
professionalità del luogo, attraverso le
tonalità di azzurro.
Le icone, selezionate ad hoc, valorizzano
le diverse tematiche e comunicano
attraverso le infografiche.
+
257257257
Alberatura
- sitemap gerarchica
- custom post types
- generazione archivi multilingua
(partner, progetti, aziende)
+
Mappa, foto e video
- realizzazione mappa vettoriale
- realizzazione video Motion Graphic
- realizzazione e cura del taglio fotografico
+
PORTFOLIO UX/UI
PAZIENTI
website
2018 pazienti.it
Brief
Riprogettazione della User Experience e User Interface
del portale online di Pazienti, vetrina dedicata
all’informazione nel campo della Salute.
Progettare l’esperienza desktop e responsive in vista del
lancio del nuovo servizio di videoconsulto online.
Obiettivi
PORTFOLIO UX/UI
Gli specialisti
Videoconsulto online
Prenota un videconsulto online, scegliendo
tra gli specialisti di Pazienti. Il servizio è
disponibile sia da app che dal sito.
Consulta gli specialisti e cerca
tutto ciò di cui hai bisogno per
la tua salute
Scegli una specialità
Milano - Via Galileo Galilei, 48
Dermatologo
(12)
Dr. Maria Rossi
PRENOTA UN VIDEOCONSULTO
LEGGI DI PIÙ
Videoconsulto AccountCerca
2
12:30
Prototipazione+
La progettazione dell’esperienza
utente si basa su una navigazione
organizzata per:
- Servizi (menu di primo livello)
- Esperienza di ricerca (strutture,
medici, farmaci, ecc.)
PORTFOLIO UX/UI
Pazienti.itPazienti.it Pazienti.it Videoconsulti.itVideoconsulti.it
Menu apertoHomepage Videoconsulto landing page
Videoconsulti.it
Risultati di ricerca Specialista Login/Register - step 1 Login/Register - step 2 Homepage Homepage - Dettaglio appuntamento Homepage - Apertura della Sala d’attesa Homepage - Appuntamento in scadenza Homepage - Test effettuato
Pazienti.it
Cerca specialisti + risultati di ricerca
Pazienti.it
Specialista
!
Videoconsulti.it
Videoconsulti.it
Videoconsulti.it
Videoconsulti.it
Videoconsulti.it
Videoconsulti.it
Videoconsulti.it
Videoconsulto
Pagina profilo
Pazienti.it
Pazienti.it
Pazienti.it
Pazienti.it
Pazienti.it
Pagina profilo utente Homepage
Vai al profilo
Pazienti.it
Videoconsulto VideoconsultoVideoconsulto
Videoconsulto
Pazienti.it Pazienti.it
Pazienti.it
Videoconsulto
Ciao Mario
I TUOI DATI
Nome: MARIO ROSSI
Codice fiscale: MZRRNN91L41E202D
Videoconsulti prenotati
Videoconsulto da 15 min
01/01/2019 ore 15:00
Dr. Nome Cognome
Professione
Cancella appuntamento
In attesa di conferma
Avvia il test Carica documenti
Le tue
domande
Elementi
salvati
I tuoi
videoconsulti
Videoconsulto Videoconsulto Videoconsulto Videoconsulto
Login/Register - step 1 Login/Register - step 2
Prenotazione
Videoconsulto
A B
Videoconsulto Videoconsulto Videoconsulto
RICERCA SPECIALISTA ACCESSO BOOKING
Termine
prenotazione
User flows
+
La progettazione dell’esperienza di
prenotazione di un videoconsulto
PORTFOLIO UX/UI
WOW effect
Guidelines
+
+
Definizione dei momenti esperienziali, strategici per valorizzare il
raggiungimento degli obiettivi del sito.
Rappresentazione grafica delle transizioni, con legenda
comportamentale laterale utile al team di sviluppo.
Scroll-then-fix
Vertical scrollback
Horizontal scrolling
PORTFOLIO UX/UI
platform
FERROVIE
NORD
MILANO
2018
Brief
Restyling del portale di FNM Group, leader lombardo
della mobilità, ponendo un forte accento sull’apertura
agli stakeholder, all’accessibilità dei contenuti e alla
pubblicazione interattiva dell’archivio multimediale e
dei bilanci di sostenibilità.
Creare un forte senso di discontinuità con la
comunicazione digitale del passato, aprendo ad
un maggiore movimento ed enfasi dei contenuti:
ogni sezione è concepita come un viaggio virtuale,
di cui ogni pagina è una tappa fondamentale.
Obiettivi
fnmgroup.it
PORTFOLIO UX/UI
Breadcrumb
Nell’header viene
segnalato il nome della
sezione in cui l’utente
si trova, mentre il
breadcrumb anticipa i
contenuti.
+
Accessibilità
L’intero portale è
ottimizzato per essere
navigato da ipovedenti e
non vedenti, garantendo
una navigazione tramite
keyboard.
+
Menu nascosto
La sitemap è raccolta in
un hamburger button e
nessuna voce principale
viene esplosa nell’header.
In questo modo l’utente si
concentra maggiormente
sulla lettura dei contenuti
e tramite uno scorrimento
può raggiungere la
navigazione consigliata e
le call to action di pagina.
+
Navigazione
secondaria
Una navigazione a tappe
incuriosisce l’utente e lo
trasporta verso la scoperta
dei contenuti. Per un
senso di completezza,
l’utente che atterra in
una pagina, sarà portato
a visitarle tutte, per
compiere il percorso.
+
Pattern
Ogni pagina presenta un titolo nella stessa
posizione e stile. Un pattern su cui si basa
l’utente durante la navigazione.
+
Sfondo e movimento
Immagini e contenuti iconografici sono
utilizzati come sfondo e richiamano
l’attenzione attraverso semplici movimenti.
+
Focus
Alcuni concetti sono enfatizzati da un utilizzo
sproporzionato del carattere tipografico,
garantendo la chiarezza della comunicazione.
+
PORTFOLIO UX/UI
Navigazione da footer
L’intero portale ribalta le comuni regole della navigazione,
portando nel footer le principali azioni:
ad ogni pié di pagina vengono consigliate una tappa
precedente e successiva del percorso, tre link principali e una
descrizione delle principali sezioni, che dona all’utente un
motivo per il quale percorrere un viaggio digitale.
+
Sitemap a comparsa
In ogni momento l’utente può utilizzare
l’hamburger button per esplodere la sitemap
del portale e raggiungere ogni pagina.
+
PORTFOLIO UX/UI
Multimedia
Gallerie fotografiche,
grafici interattivi,
icone in movimento
e contenuti navigabili
da tastiera rendono la
navigazione del portale
una piacevole scoperta,
sia da desktop, che da
mobile, esprimendo
a pieno il payoff del
cliente:
idee in movimento.
+
PORTFOLIO UX/UI
FONDAZIONE
CARIVERONA
Brief
Fondazione Cariverona ha maturato l’esigenza di evolvere la propria web
experience, per renderla più attuale, completa e soddisfacente e per avvicinarsi
ai propri stakeholder in modo tale che questi siano invogliati a ricercare le
informazioni utili all’interno del sito.
Obiettivi
Il progetto di re-design dell’architettura dell’informazione, della UI e della UX è
stato caratterizzato da una fase iniziale di ascolto, che ha visto partecipi prima gli
interlocutori interni della Fondazione, attraverso interviste semi-strutturate e poi
gli stakeholder esterni, con l’invio di una survey dedicata.
L’obiettivo generale di questa fase iniziale è stato quello di evidenziare gli obiettivi
comunicativi e di interazione con gli stakeholder a cui il nuovo sito doveva
rispondere, approfondendo le questioni più rilevanti.
2017 fondazionecariverona.org
website
PORTFOLIO UX/UI
I colori
Colori primari del sito
+
Colori secondari del sito
Hover button
L’hover dei pulsanti al passaggio del mouse,
dal colore pieno all’outline.
+
Responsive
Un sito web adatto a qualsiasi dispositivo
+ Le pagine interne
Il sito web è stato sviluppato basandosi sul Content Management System
(CMS) Wordpress ed ottimizzato per la visualizzazione da smartphone e
tablet (mobile responsive). Le pagine create sono state ottimizzate per la
ricerca sui motori di ricerca rispetto agli aspetti di interesse.
+
PORTFOLIO UX/UI
website
Brief
Fondazione Mediolanum Onlus è attiva a sostegno dell’infanzia
disagiata attraverso il finanziamento di progetti di solidarietà e
sviluppo in Italia e nel Mondo.
Obiettivi
Dotare la Fondazione degli strumenti digitali funzionali al
conseguimento della sua online mission.
Il progetto web offre un’ampia vetrina sui contenuti istituzionali
legati alla Fondazione, sul racconto delle attività realizzate e sui
risultati raggiunti. L’interazione si focalizza sui meccanismi studiati
per le operazioni di crowdfunding collegate ai progetti caricati
sulla piattaforma.
FONDAZIONE
MEDIOLANUM
2013 fondazionemediolanum.it
PORTFOLIO UX/UI
VOTA VOTA VOTA
Normal Hove rActive
I progettiInfografiche
I contenuti del sito vengono
enfatizzati e resi interattivi, grazie
ad una serie di infografiche,
per rappresentare gli obiettivi
raggiunti e I valori da condividere.
Elementi grafici
Filtri e schede progetto sono
rappresentati graficamente da
una serie di icone personalizzate
ed elementi grafici, studiati per
ottimizzare le anteprime sui
canali social.
+
+
PORTFOLIO UX/UI
X2
Le iniziative
Il catalogo di iniziative di raccolta fondi
di Mediolanum è accessibile dal menu
principale. Ogni iniziativa presenta una
scheda personalizzata con un’infografica
interattiva, che racconta all’utente i fondi
raccolti sino a quel momento.
L’infografica sottostante racconta
i fondi raccolti da Fondazione
Mediolanum attraverso le cene
solidali, organizzate ad ogni arrivo
di tappa del Giro d’Italia.
Nelle iniziative di Fondazione
Mediolanum, per ogni euro raccolto,
la fondazione si impegna ad
aggiungerne un altro, raddoppiando i
fondi raccolti.
L’archivio interattivo Il Giro d’Italia
+ +
PORTFOLIO UX/UI
platform
INTESA SAN PAOLO
TOOLKITS
2016
Brief
Definire gli strumenti di service design utili per il team di
Innovation Center di Intesa Sanpaolo.
Realizzazione di un portale per i dipendenti dedicato alle
metodologie utilizzate dal LAB dell’Innovation Center. All’interno
del portale è possibile scaricare gli strumenti tipici del service
design, per progetti e workshop; visionare i casi studio realizzati
in azienda in collaborazione con il LAB.design, per progetti
e workshop; visionare i casi studio realizzati in azienda in
collaborazione con il LAB.
Obiettivi
PORTFOLIO UX/UI
Navigazione illustrata
Dopo aver selezionato una raccolta di tools tipici del service design, questi
sono stati associati per:
- Fase del progetto (esplorativa, ideativa, progettuale, esecutiva)
- Ambito progettuale (servizio, prodotto, spazio)
- Bisogno (riprendendo quelli presenti in home page)
Ogni utente, selezionando uno o più dei parametri, può individuare i tools più
adatti alle sue esigenze progettuali.
I parametri sono presentati sotto forma di filtri, consentendo una navigazione
dinamica dell’archivio.
+
TITOLO
TOOLS CORREL ATI
CASI STUDIO CORRE LATIAPPROFONDIMENTO METODOLOGICO SUL TOOL S
LABL OG INMETODOLOGI AT OOL SC ASE STUDIES
IMMAGINE TOOL
“NEEDS” NA VBAR
LABL OG INMETODOLOGI AT OOL SC ASE STUDIES
SLIDER DI PRESENT AZIONE PROGETTO
LOGO
BISOGNO 1
BISOGNO 2
BISOGNO 3
BISOGNO 4
BISOGNO 5
BISOGNO 6
BISOGNO 7
TITOLO
FILTRINEEDS NA VBAR
LABL OG INMETODOLOGI AT OOL SC ASE STUDIES
IMMAGIN E
LOGO
TOOLS
Home page
L’esigenza primaria della piattaforma è quella
permettere ai proprio utenti di individuare
gli strumenti più adatti alle proprie necessità
progettuali. L’elemento che contraddistingue
la navigazione è la “Needs” Navbar, un elenco
di bisogni progettuali disponibili fin dall’home
page che permette di accedere ad una selezione
pre-filtrata degli strumenti.
+
Archivio dei tool
Una pagina dedicata a tutti i tools a
disposizione, selezionabili tramite
filtri, per individuare quelli più
adatti al proprio progetto.
La pagina dei tool
Ogni tool può essere approfondito nella
pagina dedicata, dove è possibile salvare
il tool, scaricarne una copia cartacea,
conoscere i casi studio aziendali dove
è stato utilizzato, approfondirne la
conoscenza con spiegazioni aggiuntive.
+ +
Filtri
PORTFOLIO UX/UI
E-COMMERCE
Brief
Realizzazione di un portale in cui l’utente può consultare e
acquistare contenuti esclusivi, mediante un abbonamento,
dedicati alla creazione di un percorso di crescita personale della
durata di 4 settimane.
Obiettivi
SHINE aiuta le donne a raggiungere una nuova consapevolezza
attraverso un percorso suddiviso in aree tematiche.
I contenuti del percorso vengono sbloccati settimanalmente in
modo che l’utente possa seguire il programma a step quotidiani.
L’obiettivo, oltre a quello della vendita del primo percorso, è
anche di mantenere un abbonamento attivo ad un prezzo più
conveniente e con la possibilità di fruire settimanalmente nuovi
contenuti esclusivi.
Con l’iscrizione al programma si entrerà anche a far parte di una
community per poter partecipare agli eventi di SHINE.
e-commerce
SHINE
2019 shine-program.com
PORTFOLIO UX/UI
Funzionalità
La piattaforma è stata sviluppata tramite il CMS Wordpress,
e implementando le funzionalità di accesso alle aree riservate ai soli
utenti che acquistano il perscorso SHINE.
L’area di percorso è gestita tramite LMS (sistema di diffusione
di contenuti e-learning), in modo che l’utente possa intervenire
autonomamente nella fruizione dei contenuti e monitorarne gli sviluppi.
È stato integrato il sistema di pagamento PayPal per l’acquisto dei
prodotti e per poter permettere al cliente la gestione dei pagamenti
direttamente sulla piattaforma PayPal.
Un sistema di fatturazione elettronica permette la gestione degli
acquisti e la generarazione di fatture in linea con gli standard richiesti.
PayPal
L-CMS
Fatturazione
Users Role
Percorso
CMS Wordpress
LMS
Sistema di pagamento
Fatturazione elettronica
+
+
+
+
PORTFOLIO UX/UI
Percorso
Attraverso una dashboard di gestione
corsi e andamenti espressi dalla data
visualization, l’utente può tenere traccia
dei suoi progressi durante il percorso.
+
Responsive
SHINE si adatta a qualsiasi device, dando
la possibilità agli utenti di consultare i
contenuti in mobilità o in altri scenari.
+
Contenuti dedicati
Setup di un’area riservata dove è possibile
accedere ad archivi di ricette, video e
documenti riservati solo ai membri della
community.
+
Tone of voice
“Fly me to the moon” è il concept creato
per delineare l’esperienza utente sulla
piattaforma, enfatizzando il percorso
di crescita degli utenti, attraverso il
coinvolgimento della sfera emozionale.
+
PORTFOLIO UX/UI
Brief
Cyrcus un progetto dello Studio Santachiara, a cui si è unito
Coppa+Landini, nato per essere una piattaforma di e-commerce
che produce in digital fabrication professionale e propone la
vendita diretta di prodotti in collaborazione con le grandi firme
del design.
Obiettivi
Cyrcus crede e promuove la digital fabrication come strumento
abilitante di innovazione, affiancandolo alla cultura di progetto
sia internamente che attraverso i designer della piattaforma.
Il meglio del design d’autore a portata di click. Ogni prodotto è
realizzato in esclusiva per Cyrcus, personalizzabile secondo le
richieste dell’utente del design.
L’obiettivo non è solo quello di un semplice e-commerce di design
ma è di trasmettere ai visitatori i valori di digitalizzazione del
design.
e-commerce
CYRCUS
2015 cyrcus.it
PORTFOLIO UX/UI
+
Le collezioni e la personalizzazione
Il sito Cyrcus.it è diviso in collezioni in cui sono
contenuti i pezzi di design in digital fabrication.
Ogni prodotto è associato a una pagina autore con
biografia e tutti i prodotti a lui legati. Ogni prodotto
inoltre è possibile comprarlo in diverse dimensioni,
materiali e finiture.
+
Le icone
Ogni prodotto è caratterizzato da un’icona che indica
con che tecnologia è stato realizzato tra stampa 3D,
taglio laser e CNC.
+
Responsive
Cyrcus.it si adatta su ogni dispositivo:
mobile, tablet, pc per permettere
all’utente di sfogliare e acquistare con
un semplice click i prodotti di design.
Anelli : FELIX by Anna Gili;
Porta matite: BABEL, Penholder by Gian
Luca Silvestrini, Fabrizio Guarrasi, Mattia
Antonetti, Maxe van Heeswijk
PORTFOLIO UX/UI
BENERKAAN
Brief
Benerkaan è un’azienda che realizza jeans classici e attraenti per
le nuove generazioni. La combinazione di bellezza e comfort è
essenziale quando nei prodotti di Benerkaan.
Obiettivi
Un sito e-commerca dallo stile minimale e attuale con foto e testi
ridotti all’essenziale.
Le proposte cromatiche dell’e-commerce sono con colori caldi
(come ecrù e grigio industrial), texture ed atmosfere rilassanti.
e-commerce
2017 benerkaan.it
PORTFOLIO UX/UI
Brief
Pamaco è un brand di cioccolato svizzero artigianale che
ha il suo canale di vendita online e in diversi punti vendita
sparsi nel territorio svizzero.
Obiettivi
Creare un canale di vendita online dei diversi prodotti di
Pamaco, divisi per categorie. Non solo un e-commerce, ma
uno spazio che racconti i prodotti e la storia del brand.
Un sito web di facile lettura e adatto a ogni tipo di
dispositivo.
e-commerce
PAMACO
2017
PORTFOLIO UX/UI
I prodotti
Le foto dei prodotti sono ambientati
e contestualizzati per dare un’immagine
accattivante alle pagine dell’e-commerce.
Sono tutti divisi per categorie.
+
PORTFOLIO UX/UI
LANDING PAGE
Brief
Creare un format di template per il lancio del nuovo blog.
Obiettivi
Definire un template unico per distinguere i post creati dai Guest
di Landis+Gyr dagli autori interni e ridefinire la user experience
dell’intero blog.
landingpage
LANDIS
+GYR
2018 eu.landisgyr.com/blog
PORTFOLIO UX/UI
Guest post
Analytics
+
+
Tracciamento sull’andamento dei singoli
post e delle Call to action tracciabili
unicamente.
Template dinamico basato su 6 lingue
e Guest Card
PORTFOLIO UX/UI
INFRONT
landingpage
2019 blog.infrontsports.com
Brief
Creare un format di template per il lancio di campagne
marketing.
Obiettivi
Realizzazione di un design sistemico per la creazione di moduli e
templates flessibili, secondo le esigenze delle campagne.
PORTFOLIO UX/UI
Templates modulari
Analytics
+
+
Tracciamento sull’andamento dei singoli
post, pagine e delle Call to action tracciabili
unicamente.
Composizione di pagine tramite drag
and drop di moduli, dal layout flessibile a
seconda del numero di contenuti presenti
PORTFOLIO UX/UI
VIZ
ECLIPSE
Brief
Lancio di un nuovo prodotto sul mercato attraverso una landing
page, correlata da white papers e case studies.
Obiettivi
Offrire un’esperienza interattiva ed ingaggiante per esaltare il
prodotto nella sua natura innovativa e rivoluzionaria.
website
vizeclipse.com2019
PORTFOLIO UX/UI
Interactive experience
Tabelloni side interattivi che cambiano
sponsor seguendo lo scroll verticale
della pagina
Lead generation e content download
+ +
PORTFOLIO UX/UI
+ INTERACTION + ENGAGEMENT
PORTFOLIO UX/UI
landingpage
CLUBHOUSE
BRERA
2016
Brief
Creazione di una landing page per il lancio di ClubHouse Brera,
membership club esclusivo di Milano.
Illustrare il luogo e i servizi offerti da ClubHouse Brera, nonché
permettere ai visitatori di prenotare una giornata gratuita di
prova all’interno del club.
Obiettivi
PORTFOLIO UX/UI
Storytelling
L’alternanza tra contenuti testuali e
fotografici esalta lo storytelling dedicato
al club.
CTA
Ogni sezione fotografica accoglie una call
to action, per guidare l’utente verso
la prenotazione di una giornata di prova.
+ +
PORTFOLIO UX/UI
Brief
Ware è un Digital Integrator che supporta i clienti nella
trasformazione del business. Le soluzioni di Ware si basano su
un mix di competenze in ambito design thinking, Iot e mobility.
Obiettivi
Per Ware è stata realizzata una landing page a supporto delle
capabilities e delle soluzioni offerte dal Digital Integrator.
La landing page è stata realizzata con CMS wordpress creando
un tema custom su misura per l’azienda.
landingpage
WARE
2018 ware.expert
PORTFOLIO UX/UI
APP
PORTFOLIO UX/UI
PAZIENTI
website
2018 pazienti.it
Brief
Progettazione della User Experience e User Interface
dell’app di Pazienti, vetrina dedicata all’informazione nel
campo della Salute.
Progettare l’esperienza smartphone e tablet in vista del
lancio del nuovo servizio di videoconsulto online.
Obiettivi
SMARTPHONE TABLET
PORTFOLIO UX/UI
Prototipazione dei flussi di acquisto, accesso all’area
riservata, esperienza di videoconsulto e test con peer
virtuale.
Progettazione user flows e interazione+
A V V I O F L U S S O D I P R E N O T A Z I O N E V I D E O C O N S U L T O
PORTFOLIO UX/UI
Realizzazione dell’esperienza di videoconsulto peer to peer,
con area commenti, chat real-time e sala d’attesa virtuale.
Progettazione esperienza di videoconsulto+
F L U S S O D I R E A L I Z Z A Z I O N E V I D E O C O N S U L T O
Vuole far prolungare il
videoconsulto di 5 minuti?
D O T T O R E
P A Z I E N T E Prolunga di 5 minuti
PORTFOLIO UX/UI
Realizzazione di test di usabilità e organizzazione
invito agli utenti con format promozionale
Test utente e pubblicazione finale+
PORTFOLIO UX/UI
Brief
LEOOH si inserisce nel panorama delle ricerche di mercato
qualitative, affiancando gli attuali strumenti
esistenti. Ne completa e ne rafforza il valore aggiunto,
offrendo ancora più spunti e insight. Nel contesto fuori casa
contano le esperienze “qui ed ora”, i micro-momenti.
Obiettivi
LEOOH permette di analizzare e contestualizzare le
emozioni legate alla user experience autentica nel
contesto fuori casa. Con LEOOH è possibile portare
l’analisi del consumatore nella sua vita quotidiana, con
l’utilizzo di una applicazione mobile attraverso cui vengono
somministrati test e domande nel momento in cui il
consumatore si confronta con brand o con il servizio.
LEOOH
website+app
2015 leooh.it
PORTFOLIO UX/UI
La home dell’app
è progettata per
micromoduli di
esperienza attraverso
delle schede.
L’utente fotografa e aggiunge
emozioni, testi e registrazioni
audio, per raccontare come
si sente, che emozioni
l’esperienza ha suscitato,
cosa gli piace e cosa non gli
piace.
Landing Page
Tutte le interazioni della
app sono state progettate
per avere un’esperienza
inituitiva e breve da parte
dell’utente.
A supporto del processo di
vendita è stata progettata
una landing page che
descrive le funzionalità
dell’app.
PORTFOLIO UX/UI
app
COOPSAPEVOLE
2012
Brief
Ideazione e realizzazione di un’app con la quale i
clienti Coop Lombardia possono scoprire l’impatto
ambientale della propria spesa.
Rendere consapevoli gli utenti dell’impatto
ambientale che la produzione di alcuni alimenti
può comportare.
Obiettivi
PORTFOLIO UX/UI
Navigazione illustrata
L’utente naviga all’interno di un
supermercato illustrato,
scoprendo l’intero catalogo prodotti
e consultando, in maniera ludica,
l’impatto ambientale che ha ogni
prodotto.
+
PORTFOLIO UX/UI
Comparazione
È possibile comparare due prodotti per
scoprire quali dei due ha un impatto
minore sull’ambiente, così come avere un
riepilogo mensile sul proprio impatto.
Consultazione
Attraverso una bilancia, l’utente può
ottenere una quotazione dell’impatto
ambientale, relativa al quantitativo
acquistato del singolo alimento.
+ +
PORTFOLIO UX/UI
GRAZIE
Marcello Coppa
marcello.coppa@gellify.com
349 311 6330
gellify.com

Weitere ähnliche Inhalte

Was ist angesagt?

UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.Michele Riccio
 
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionLezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionMarco Buonvino
 
User Experience - tra design e sviluppo
User Experience - tra design e sviluppoUser Experience - tra design e sviluppo
User Experience - tra design e sviluppoMatteo Trapella
 
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche UX Genova 2016 - Dalla UX alla UI: interfacce grafiche
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche Francesco Acerbi
 
Dalla UX alla UI: interfacce grafiche
Dalla UX alla UI: interfacce graficheDalla UX alla UI: interfacce grafiche
Dalla UX alla UI: interfacce graficheFrancesco Acerbi
 
User Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush MarathonUser Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush MarathonMarco Micheli
 
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...dario betti
 
Workshop User Experience per Coworking Multiverso Valdarno
Workshop User Experience per Coworking Multiverso ValdarnoWorkshop User Experience per Coworking Multiverso Valdarno
Workshop User Experience per Coworking Multiverso ValdarnoSimone Giomi
 
Progettare esperienze per emozionare. La transizione dalla UX alla UI.
Progettare esperienze per emozionare. La transizione dalla UX alla UI.Progettare esperienze per emozionare. La transizione dalla UX alla UI.
Progettare esperienze per emozionare. La transizione dalla UX alla UI.Coppa+Landini
 
Progettare un'applicazione mobile. Approccio. Workflow. Design
Progettare un'applicazione mobile. Approccio. Workflow. DesignProgettare un'applicazione mobile. Approccio. Workflow. Design
Progettare un'applicazione mobile. Approccio. Workflow. DesignElena Demidenko
 
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari uxfun
 
Lean UX: Sviluppo Software Agile e Incentrato sull'Utente
Lean UX: Sviluppo Software Agile e Incentrato sull'UtenteLean UX: Sviluppo Software Agile e Incentrato sull'Utente
Lean UX: Sviluppo Software Agile e Incentrato sull'UtenteSteve Maraspin
 
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - SynesthesiaLo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - SynesthesiaFrancesco Ronchi
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAlberto Mucignat
 
Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Marco Buonvino
 

Was ist angesagt? (20)

UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.
 
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionLezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
 
HCI to UX to HCI - Parte B
HCI to UX to HCI - Parte BHCI to UX to HCI - Parte B
HCI to UX to HCI - Parte B
 
User Experience - tra design e sviluppo
User Experience - tra design e sviluppoUser Experience - tra design e sviluppo
User Experience - tra design e sviluppo
 
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche UX Genova 2016 - Dalla UX alla UI: interfacce grafiche
UX Genova 2016 - Dalla UX alla UI: interfacce grafiche
 
Dalla UX alla UI: interfacce grafiche
Dalla UX alla UI: interfacce graficheDalla UX alla UI: interfacce grafiche
Dalla UX alla UI: interfacce grafiche
 
User Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush MarathonUser Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush Marathon
 
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
 
pdfPresFeb2014
pdfPresFeb2014pdfPresFeb2014
pdfPresFeb2014
 
Workshop User Experience per Coworking Multiverso Valdarno
Workshop User Experience per Coworking Multiverso ValdarnoWorkshop User Experience per Coworking Multiverso Valdarno
Workshop User Experience per Coworking Multiverso Valdarno
 
UX TTC
UX TTCUX TTC
UX TTC
 
Progettare esperienze per emozionare. La transizione dalla UX alla UI.
Progettare esperienze per emozionare. La transizione dalla UX alla UI.Progettare esperienze per emozionare. La transizione dalla UX alla UI.
Progettare esperienze per emozionare. La transizione dalla UX alla UI.
 
HCI to UX to HCI - Parte A
HCI to UX to HCI - Parte AHCI to UX to HCI - Parte A
HCI to UX to HCI - Parte A
 
Progettare un'applicazione mobile. Approccio. Workflow. Design
Progettare un'applicazione mobile. Approccio. Workflow. DesignProgettare un'applicazione mobile. Approccio. Workflow. Design
Progettare un'applicazione mobile. Approccio. Workflow. Design
 
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
 
User Experience
User ExperienceUser Experience
User Experience
 
Lean UX: Sviluppo Software Agile e Incentrato sull'Utente
Lean UX: Sviluppo Software Agile e Incentrato sull'UtenteLean UX: Sviluppo Software Agile e Incentrato sull'Utente
Lean UX: Sviluppo Software Agile e Incentrato sull'Utente
 
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - SynesthesiaLo Zen e l'arte dello UX Design Mobile -  festival ICT 2015 - Synesthesia
Lo Zen e l'arte dello UX Design Mobile - festival ICT 2015 - Synesthesia
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioni
 
Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013
 

Ähnlich wie Portfolio ux ui_gellify

Portfolio matteo vacca
Portfolio matteo vaccaPortfolio matteo vacca
Portfolio matteo vaccaMatteo Vacca
 
Progettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del softwareProgettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del softwareLuca Mascaro
 
Global Brand Experience & UX Strategy
Global Brand Experience & UX StrategyGlobal Brand Experience & UX Strategy
Global Brand Experience & UX StrategyTiziano Luccarelli
 
Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Filippo Andolfatto
 
Model view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designModel view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designStefano Bussolon
 
Portfolio-Nausica Tempesti-UI designer.pdf
 Portfolio-Nausica Tempesti-UI designer.pdf Portfolio-Nausica Tempesti-UI designer.pdf
Portfolio-Nausica Tempesti-UI designer.pdfNausicaTempesti
 
Multimedia E formazione - Prof. Maurizio Masini
Multimedia E formazione - Prof. Maurizio MasiniMultimedia E formazione - Prof. Maurizio Masini
Multimedia E formazione - Prof. Maurizio MasiniCulturaInnovazione
 
Lavoratori del Web: coniugare diritti e opportunità
Lavoratori del Web: coniugare diritti e opportunitàLavoratori del Web: coniugare diritti e opportunità
Lavoratori del Web: coniugare diritti e opportunitàFrancesca Tomasi
 
Usabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazioneUsabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazionesemrush_webinars
 
WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015Maurizio Pelizzone
 
Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018Redazione InnovaPuglia
 
Relazione finale progetto Pedalami
Relazione finale progetto PedalamiRelazione finale progetto Pedalami
Relazione finale progetto PedalamiMelaniaMauri
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience designLuca Mascaro
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience designUXconference
 

Ähnlich wie Portfolio ux ui_gellify (20)

Portfolio matteo vacca
Portfolio matteo vaccaPortfolio matteo vacca
Portfolio matteo vacca
 
Progettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del softwareProgettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del software
 
Ux activities
Ux activitiesUx activities
Ux activities
 
Layout tesi stampa
Layout tesi stampaLayout tesi stampa
Layout tesi stampa
 
B com 2014 | Caffeina
B com 2014 | CaffeinaB com 2014 | Caffeina
B com 2014 | Caffeina
 
Global Brand Experience & UX Strategy
Global Brand Experience & UX StrategyGlobal Brand Experience & UX Strategy
Global Brand Experience & UX Strategy
 
Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...
 
Model view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction designModel view controller: un pattern per l’interaction design
Model view controller: un pattern per l’interaction design
 
Ux scrum e gilde...
Ux scrum e gilde...Ux scrum e gilde...
Ux scrum e gilde...
 
Portfolio-Nausica Tempesti-UI designer.pdf
 Portfolio-Nausica Tempesti-UI designer.pdf Portfolio-Nausica Tempesti-UI designer.pdf
Portfolio-Nausica Tempesti-UI designer.pdf
 
Ux fast - workshop
Ux fast - workshop Ux fast - workshop
Ux fast - workshop
 
Multimedia E formazione - Prof. Maurizio Masini
Multimedia E formazione - Prof. Maurizio MasiniMultimedia E formazione - Prof. Maurizio Masini
Multimedia E formazione - Prof. Maurizio Masini
 
UX Scrum e... gilde
UX Scrum e... gildeUX Scrum e... gilde
UX Scrum e... gilde
 
Lavoratori del Web: coniugare diritti e opportunità
Lavoratori del Web: coniugare diritti e opportunitàLavoratori del Web: coniugare diritti e opportunità
Lavoratori del Web: coniugare diritti e opportunità
 
Usabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazioneUsabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazione
 
WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015
 
Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018
 
Relazione finale progetto Pedalami
Relazione finale progetto PedalamiRelazione finale progetto Pedalami
Relazione finale progetto Pedalami
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience design
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience design
 

Mehr von GELLIFY

Crowdfluencing Marketing - presentazione Gianluca Bernardi
Crowdfluencing Marketing - presentazione Gianluca Bernardi Crowdfluencing Marketing - presentazione Gianluca Bernardi
Crowdfluencing Marketing - presentazione Gianluca Bernardi GELLIFY
 
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani Data-Driven Business vs. Data businesses - presentazione di Michele Giordani
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani GELLIFY
 
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...GELLIFY
 
Conoscere le regole per giocare all'attacco: la componente legal nei business...
Conoscere le regole per giocare all'attacco: la componente legal nei business...Conoscere le regole per giocare all'attacco: la componente legal nei business...
Conoscere le regole per giocare all'attacco: la componente legal nei business...GELLIFY
 
"Explore Talks" Servitization - presentazione di Sara Michelazzo
"Explore Talks" Servitization - presentazione di Sara Michelazzo"Explore Talks" Servitization - presentazione di Sara Michelazzo
"Explore Talks" Servitization - presentazione di Sara MichelazzoGELLIFY
 
"Explore Talks" Servitization - presentazione di Valeria Murru
"Explore Talks" Servitization - presentazione di Valeria Murru"Explore Talks" Servitization - presentazione di Valeria Murru
"Explore Talks" Servitization - presentazione di Valeria MurruGELLIFY
 
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...GELLIFY
 
BY-entO, la startup che estrae principi attivi dagli insetti
BY-entO, la startup che estrae principi attivi dagli insetti  BY-entO, la startup che estrae principi attivi dagli insetti
BY-entO, la startup che estrae principi attivi dagli insetti GELLIFY
 
I Food Trends 2018 presentati da Valeria Murru
I Food Trends 2018 presentati da Valeria MurruI Food Trends 2018 presentati da Valeria Murru
I Food Trends 2018 presentati da Valeria MurruGELLIFY
 
Food Trends 2018 by GELLIFY_abstract
Food Trends 2018 by GELLIFY_abstractFood Trends 2018 by GELLIFY_abstract
Food Trends 2018 by GELLIFY_abstractGELLIFY
 
Trend healthcare, evento Pazienti.it
Trend healthcare, evento Pazienti.itTrend healthcare, evento Pazienti.it
Trend healthcare, evento Pazienti.itGELLIFY
 
Start-ups in B2B. Harder. Better. Faster. Stronger
Start-ups in B2B. Harder. Better. Faster. StrongerStart-ups in B2B. Harder. Better. Faster. Stronger
Start-ups in B2B. Harder. Better. Faster. StrongerGELLIFY
 

Mehr von GELLIFY (12)

Crowdfluencing Marketing - presentazione Gianluca Bernardi
Crowdfluencing Marketing - presentazione Gianluca Bernardi Crowdfluencing Marketing - presentazione Gianluca Bernardi
Crowdfluencing Marketing - presentazione Gianluca Bernardi
 
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani Data-Driven Business vs. Data businesses - presentazione di Michele Giordani
Data-Driven Business vs. Data businesses - presentazione di Michele Giordani
 
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...
L’intelligenza artificiale come soluzione ai problemi in azienda - presentazi...
 
Conoscere le regole per giocare all'attacco: la componente legal nei business...
Conoscere le regole per giocare all'attacco: la componente legal nei business...Conoscere le regole per giocare all'attacco: la componente legal nei business...
Conoscere le regole per giocare all'attacco: la componente legal nei business...
 
"Explore Talks" Servitization - presentazione di Sara Michelazzo
"Explore Talks" Servitization - presentazione di Sara Michelazzo"Explore Talks" Servitization - presentazione di Sara Michelazzo
"Explore Talks" Servitization - presentazione di Sara Michelazzo
 
"Explore Talks" Servitization - presentazione di Valeria Murru
"Explore Talks" Servitization - presentazione di Valeria Murru"Explore Talks" Servitization - presentazione di Valeria Murru
"Explore Talks" Servitization - presentazione di Valeria Murru
 
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...
Explore Talks "Food Trends 2018" | presentazione Michele Cadamuro di Electrol...
 
BY-entO, la startup che estrae principi attivi dagli insetti
BY-entO, la startup che estrae principi attivi dagli insetti  BY-entO, la startup che estrae principi attivi dagli insetti
BY-entO, la startup che estrae principi attivi dagli insetti
 
I Food Trends 2018 presentati da Valeria Murru
I Food Trends 2018 presentati da Valeria MurruI Food Trends 2018 presentati da Valeria Murru
I Food Trends 2018 presentati da Valeria Murru
 
Food Trends 2018 by GELLIFY_abstract
Food Trends 2018 by GELLIFY_abstractFood Trends 2018 by GELLIFY_abstract
Food Trends 2018 by GELLIFY_abstract
 
Trend healthcare, evento Pazienti.it
Trend healthcare, evento Pazienti.itTrend healthcare, evento Pazienti.it
Trend healthcare, evento Pazienti.it
 
Start-ups in B2B. Harder. Better. Faster. Stronger
Start-ups in B2B. Harder. Better. Faster. StrongerStart-ups in B2B. Harder. Better. Faster. Stronger
Start-ups in B2B. Harder. Better. Faster. Stronger
 

Portfolio ux ui_gellify

  • 2. EXPLORE DESIGN MAKE Ogni fase di realizzazione segue un processo ben definito e validato nel tempo IL NOSTRO METODO Ogni progetto inizia con una ricerca esplorativa, per analizzare i pain e i need e identificare e classificare i problemi o i limiti progettuali. La ricerca segue tre aspetti principali: Organizzazione (definizione degli asset, del business model, del brand, delle persone e dell’ambito culturale); Contesto (definizione dei valori, dei trend, dei benchmark); Utenti. In questa fase definiamo le soluzioni e i concetti, attraverso la realizzazione di prototipi, da testare e validare. Seguendo i principi del design thinking, il nostro approccio è human-centred: mettiamo al centro le persone, i loro bisogni e le loro percezioni al centro del processo. Adottiamo un approccio design-centric quando le tempistiche di progetto sono ristrette e coinvolgiamo team e utenti in qorkwhop di co-design. Nella fase del make realizziamo gli output finali, che portano alla luce e rispecchiano nel dettaglio le idee e le soluzioni proposte. Seguiamo ogni parte di implementazione e sviluppo del progetto, creando output di ottima qualità e guidelines utili ai collaboratori di progetto.
  • 3. DELIVERY OUTPUTS EXPLORE DESIGN MAKE + + +User research (Interviste, focus group, mistery) Product vision MVP Definition Personas (Profili utente, goal e motivazioni) + + +Benchmarking Value proposition Product ownership Inspiration (Booklet/moodboard) + + +Trend research Service map UX Guidelines (Navigation patterns, Micro UX, User tests/ analytics, First use experience) User journeys + + +AS IS picture (Analisi dello stato dell’arte) UX concept (Architettura dell’informazione, wireframes, flow chart, User stories) UI Guidelines (CSS, HTML, JS, Librerie di riferimento) Features map / Gap Analisys + UI concepts (Design system, mockup)+ UX/UI evaluation (Valutazione) UX/UI Analysis Blueprints UI patterns Mockups Temporary product ownership (UX Governance) Canvas UX guidelines Sitemap User tests / Analytics Format validati nel tempo e personalizzabili Competitors map MVP Definition CSS / HTML UI / Data visualization library Micro UX guidelines 600ms 1st Goal 20 Clicks </> + UX Governance
  • 4. NELLO SPECIFICO USER EXPERIENCE USER INTERFACE Dopo una fase di studio dei comportamenti degli utenti, definiamo gli user goals e i modelli di interazione applicabili, a seconda del settore, dell’ambito e del contesto. Il metodo che seguiamo include interviste, ricerche e benchmarking. La nostra concezione di user interface design integra gli aspetti di estetica, ai principi di usabilità, alle conoscenze tecnologiche, per progettare software che lascino il segno.
  • 6. UNDISCLOSED GLOBAL SOFTWARE VENDOR webapplication 2019 Brief Creazione della versione browser di un software leader di mercato, dedicato alla gestione di studi professionali. Obiettivi Realizzare un percorso di consulenza e re-design, in collaborazione con i team business, di sviluppo e design interni alla società, per realizzare la nuova versione browser, applicando la metodologia Agile alla roadmap di sviluppo. PORTFOLIO UX/UI
  • 7. L a n o s t r a m e t o d o l o g i a Ricerca del contesto e dei nuovi trends Ricerca esplorativa per ispirare la strategia da attuare e la tipologia di prodotto da realizzare su browser. I trend presentano una serie di casi, valutati secondo una scala e dei valori predefiniti. + EXPLORE 1 Cloud Mobile Chatbot Smart working Cyber security Performance tracking Machine learning Subscription business model Case 1 Virtual firm Tech driven cases Strategic keywords Case study overview SCREENSHOT BENCHMARK USABILITY LOOK & FEEL INTEGRATIONSMULTI-DEVICE SPECIFIC FEATURES Ricerca esplorativa PORTFOLIO UX/UI
  • 8. L a n o s t r a m e t o d o l o g i a EXPLORE 1 Creazione degli user scenarios Definizione degli user insights+ Ricerca esplorativa 20 5 5 I n t e r v i s t e P a e s i P e r s o n a s d e f i n i t e + ACTIVITIES NOTES PERSONAS 1 Definizione dei comportamenti e delle azioni quotidiane degli utenti, al di fuori dell’utilizzo del software Creazione delle Personas e analisi peculiare dell’utilizzo delle aree del software PORTFOLIO UX/UI
  • 9. L a n o s t r a m e t o d o l o g i a Wireframe Definizione degli elementi e del layout in base allo scopo di pagina +Definizione UX Panels Tutte le interfacce, costruite su una griglia di 12 colonne, sono state pensate per raccogliere al loro interno contenitori flessibili o fissi in cui vengono presentati i contenuti di pagina, di dettaglio, di overview, oppure di navigazione gerarchica interna alla pagina. + DESIGN 2 UX in motion Definizione delle animazioni e del tempo di comparsa per focalizzare, educare o intrattenere l’utente in base allo scopo di pagina 100ms 400ms 600ms Scopo WOW effect Scopo Focus Scopo Educate + Scopo Presentare una serie Scopo Visualizzare dettagli Scopo Navigare rapidamente PORTFOLIO UX/UI
  • 10. A concept based on Mobility needs L a n o s t r a m e t o d o l o g i a UI concepts e Test MAKE 3 Sessioni di co-design Il design della piattaforma viene seguito in piena collaborazione con le aree business, di sviluppo e design + 3N u o v i c o n c e p t 2D e s i g n S p r i n t 30T e s t e r c o i n v o l t i U s a b i l i t y I n t u i t i v i t y C o n c e p t 1 A concept based on the WOW effect U s a b i l i t y I n t u i t i v i t y C o n c e p t 2 A concept that improve performances U s a b i l i t y I n t u i t i v i t y C o n c e p t 3 Validazioni test utente Vengono realizzati a seconda degli scopi: Definizione MVP: Closed card sorting Validazione UX/UI: Interactive test on mockup Direct feedback: Survey e interviste mirate + PORTFOLIO UX/UI
  • 11. EDUCAZIONE FINANZIARIA software 2018 Banca dei Territori Brief Progettazione dell’educazione finanziaria, veicolata attraverso l’edutainment, supportato da un’esperienza utente studiata in modo specifico per rispondere ai requisiti dei processi di digital learning. Obiettivi Definire tutti gli aspetti dell’esperienza di interazione tra gli utenti (bambini 4-12 anni, da soli, accompagnati da un adulto o in gruppo, o adulti da soli) e il robot umanoide Pepper. Sviluppare un’applicazione interattiva, basata su trigger visivi, vocali e meccanismi di gamification. È stata concepita una cornice di storytelling all’interno della quale sono stati sviluppati dei giochi interattivi. Il robot è stato presentato ufficialmente al Lucca Comics e al Museo Del Risparmio di Torino per pubblicizzare il nuovo conto XME dindi. PORTFOLIO UX/UI
  • 12. Progettare la relazione uomo e macchina U t e n t i U t e n t i R o b o t S p a z i o S p a z i o R o b o t RUOLO DEL ROBOT La costruzione del personaggio di Pepper è basata sul framework narrativo del viaggio dell’Eroe, in cui Pepper è, insieme all’utente, protagonista dell’apprendimento. A supporto del meccanismo story-based sono presenti specifici moduli di gioco, inseriti in una narrazione complessiva, in cui ci sono personaggi secondari, il cui ruolo è funzionale al fornire risposte a tutte le domande riguardanti le modalità di risparmio. + CHI SONO GLI UTENTI? Creazione delle Personas tramite interviste e analisi utenti. + • Analisi sul campo • Mistery • Definizione degli scenari • Analisi dei bisogni • Personas • Analisi delle funzionalità • Definizione degli obiettivi LE COMPONENTI DELL’INTERAZIONE DEFINIZIONE DELL’INTERAZIONE Quali sono le funzionalità che il touchpoint robotico può erogare? Chi fruirà dell’esperienza? Concept Quali sono i fattori esterni che possono influenzare l’esperienza? SOFIA FRANCESCO E MARTA Pepper sa spiegare ed esprimere le proprie emozioni in modo semplice e divertente. PORTFOLIO UX/UI
  • 13. Robotoolkit Chiusura Riposo Svolgimento Ingaggio DEFINIZIONE DELLA USER JOURNEY IL CICLO DI INTERAZIONE Nelle interazione uomo-robot, le user journey sono di tipo circolare. Da una posizione di riposo iniziale del robot, un trigger attiva l’ingaggio con l’utente, che si completa con il ritorno alla posizione di riposo, una volta terminato il dialogo con l’utente. Riconoscimento presenza + riconoscimento tipologia di utente (in particolare: adulto, bambino in età 6-8 anni, bambino in età 8-18) Il riconoscimento dell’utente attiva un’interazione organizzata in chiave modulare. I moduli, oltre tenere conto della tipologia di utente ingaggiato e riconosciuto, tiene conto dei diversi life-cycle dell’interazione dell’utente, fornendo possibili attività, in grado di essere fruite secondo diversi archi temporali. Conclusione della interazione + CTA (es. generazione lead) PORTFOLIO UX/UI
  • 14. Robotoolkit DEFINIZIONE DELLA MICRO-INTERAZIONE Ciao Pepper! Ciao! Ti ricorderai sicuramente quanti desideri ha un bambino. Tu cosa desideravi da piccolo? La gestualità guida l’interazione L’Utente sceglie la bicicletta toccando l’immagine corrispondente sullo schermo Lo storyboard è costruito tenendo conto dei diversi livelli di interazione. Il layer portante è quello dell’esperienza utente conversazionale. La visualizzazione a schermo supporta attraverso le immagini la comunicazione verbale di Pepper e interviene come interazione sostitutiva, di tipo touch-screen, nel caso quella verbale non andasse a buon fine. I livelli secondari di interazione sono rappresentati dal movimento e dall’espressione, che comprendono la gestione dello spazio e rendono human- friendly l’esperienza utente. PORTFOLIO UX/UI
  • 15. Pepper è un robot spaziale, che viene da un pianeta dove non conoscono il valore del risparmio. + Per questo la sua scuola è stata venduta e Pepper ha deciso di partire per salvarla. + È arrivato sul pianeta Terra per imparare a risparmiare. + Gli amici NELLY PIGGY Gli aiutanti Il gioco del risparmio I p r o t a g o n i s t i d e l g i o c o Edutainment Il progetto è basato sul dell’utilizzo dei contenuti digitali nei processi di attivazione dell’apprendimento della “touch-screen generation” (target dai 4 ai 18 anni). La creazione dei DLO (digital learning object) che compongono l’interfaccia comprendono: • lo studio di una struttura di UX che risponda agli elementi del processo di apprendimento, con particolare attenzione alla tipologia di interazioni richieste dalla fascia di età scolare (es: elemento della tangibilità, espresso dal drag&drop); • L’utilizzo di diversi livelli di interazione in modalità complementare; • Utilizzo dell’interazione vocale come comunicazione portante tra l’utente e il robot, privilegiando le caratteristiche “umane”che possono essere veicolate attraverso un’interfaccia conversazionale. + Sviluppo e test utente Assistenza allo sviluppo e direzione dei test utente su tablet incoprorato. “XME dindi” è stato presentato ufficialmente in occasione del Lucca Comics 2018 e al Museo del Risparmio di Torino. + Pe pper I colori e lo stile Colori caldi ed intensi,scelti per esprimere maggiore emozione. + CONCEPT: LA STORIA DI PEPPER PORTFOLIO UX/UI
  • 16. 45 90 135 180 225 270 315 45315 TURBO Brief Progettazione della user experience e user interface della piattaforma TurboADV, trading desk italiano di programmatic advertising. Obiettivi Per TurboADV è stata programmata una consulenza approfondita, la realizzazione della UI e art direction della comunicazione digitale dei software di TurboADV, Presentazione e racconto della suite attraverso un sito vetrina sintetico e attento alla presentazione dei prodotti. software 2016 PORTFOLIO UX/UI
  • 17. 45 13 180 225 270 315 Le GIF e le icone in movimento Le GIF animate non necessitano spostamenti sulle assi X-Y. Sono contenute in una maschera di ritaglio circolare. CREATE CLUSTER CONSIDER 18-30 36-40 46-50 1.500.000 Rate known 89%AGEUserUser Gender Age Relationship Children Education EventsEvents Measures Browsers Location O.S. Coca-Cola Cluster optionsCluster options Coca-Cola for dinner CriteriaCriteria +Drag here another label Coca-Cola for dinnerCoca-Cola for dinner 89%1.500.000 Age 1.200.000 56% CONNECT +/- Add “AND”Condition 56% 1.200.000 + Software UI Documentazione tecnica UI, sull’utilizzo e sul senso delle forme e dei colori nei servizi di Tur- boADV. I colori, la dimensione e la posizione degli elementi guidano l’utente alla selezione di funzioni primarie, secondarie e opzionali, valorizzando la user experience e le scelte imprendi- toriali di vendita di prodotto. 3 K 5 K 7 K 10 K Users Events 500 1-10 11-100 101-1000 1 K 2 K Active campaignsActive campaigns User Consumption Range Registered events by Advertiser New Users by Provider Top traffic Top domains Advertiser OVERVIEW Website New users Users Events 3.250lastampa.it 345 K 6.300autoscuola.it 120 K 2.400repubblica.it 900 K 3.560sole24ore.it 1.3 M 1.300libero.it 160 K 6 M 12 M 9 M 30 M 18 M | Last 30 days MOST ACTIVE Coca-Cola MAN LOVING FO... IMPRESSION COUNT CLICKS CTR SEGMENT REACH CONVERSION 1 M 2.345 18% 20% 12 % WEDNESDAY 4 PM MilanMilan Samsung Heineken Coca-Cola Pepsi FCA 1 M 2,2 M 146 K 122 K 500 K 23 K Total 3 M 175 K 536 K 9,5 K 79 K 130 K 12 K Total 932 K Milan Samsung Heineken Coca-Cola Pepsi FCA Data visualization + I colori + + PORTFOLIO UX/UI
  • 18. software TURBOADV SELF SERVICE 2017 Brief Creare una versione brandizzata del software TurboADV Self Service offerto in White Label. Creare una skin da applicare alle installazioni di TurboADV Self Service dedicate ad un singolo cliente. Obiettivi PORTFOLIO UX/UI
  • 19. Navigazione La navigazione del software avviene su due livelli, mentre l’interfaccia grafica distingue attraverso i colori gli elementi di decoro dagli elementi di navigazione, cliccabili. Guida UI Al personale di sviluppo viene offerta una guida tecnica sugli elementi della UI, per evitare discostamenti tra il design e il prodotto finale. + + PORTFOLIO UX/UI
  • 20. Dashboard Una dashboard modulare accoglie l’utente, segnalando l’andamento sintetico delle proprie campagne pubblicitarie. + PORTFOLIO UX/UI
  • 21. ANTEO Brief Anteo è una cooperativa sociale di servizi alla persona che ha sede a Biella in Piemonte, ed opera in campo socio sanitario, sociale ed educativo. Obiettivi Il progetto Anteo nasce con l’intento di creare una dashboard di controllo, ad uso interno, per analizzare e comparare l’andamento delle strutture di Anteo presenti nel territorio italiano. webapplication 2013 PORTFOLIO UX/UI
  • 22. Mag GiuL ugpr 297.243 5.466.116 830.619 47.534 Data analysis - strumento utile di navigazione, comparazione e analisi di dati - alberatura a livelli, relativa al percorso effettuato Data visualization - realizzazione UI software di analisi - personalizzazione charts UI Dashboard - valorizzazione dell’immagine coordinata - uso dei colori per facilitare la navigazione e i focus + + PORTFOLIO UX/UI
  • 23. software ZEROSTORIES 2016 Brief Zerostories realizza contenuti di marca innovativi, destinati a una distribuzione multimediale. È necessario creare un catalogo categorizzato per genere televisivo e target. Permettere all’utente di fruire il catalogo delle serie televisive, nonché ricercare con semplicità, accedere e visualizzare i dati sulle serie di propria preferenza. Obiettivi PORTFOLIO UX/UI
  • 24. Le copertine delle serie vengono presentate come elemento di navigazione principale. Il catalogo è diviso in categorie, filtrabili dall’utente. Il campo di ricerca e i filtri sul pubblico permettono di incrociare i dati presenti delle serie televisive e offrire all’utente dei risultati di proprio interesse. + PORTFOLIO UX/UI
  • 25. La scelta tipografica esalta i risultati presentati in tabella e i titoli di prodotto. Essendo il passaggio tra l’area Admin e l’area Production un’azione frequente, è stata preferita una navigazione laterale, sempre presente in pagina. + Tutte le indicazioni sulla User Interface vengono riassunte in un documento PDF, sempre a disposizione del team di sviluppo. + PORTFOLIO UX/UI
  • 26. webapplication NIENTE TV 2017 niente.tv Brief Creazione del portale di Niente TV, produttore online di serie televisive e contenuti comici. Mostrare il catalogo e le ultime serie pubblicate, attraverso una UI vicina al mondo cinematografico. Obiettivi PORTFOLIO UX/UI
  • 27. Pagina dedicata alla serie Creare una pagina di archivio dedicata ad una serie televisiva. L’intestazione si colora automaticamente, a seconda del colore di sfondo della foto caricata. Homepage modulare A seconda del numero di serie pubblicate, il layout della homepage può essere riadattato. I moduli posso essere catalogati in sotto-insiemi e dare risalto alle serie più in voga. Slider Le tre serie in evidenza sono raccolte in uno slider, che accoglie il visitatore in homepage. + + + PORTFOLIO UX/UI
  • 29. Brief Gaia Italia è un brand italiano attento alla realizzazione di prodotti per l’acquariofilia di alta gamma, dalle vasche ai mobili realizzati su misura. Gaia Italia, attraverso i suoi prodotti, mira alla riscoperta del legame profondo tra l’uomo e la natura. Obiettivi Il sito di Gaia Italia racconta in 4 lingue, la filosofia dell’azienda e tutta la gamma di prodotti. Ogni prodotto ha una pagina dedicata, con una struttura grafica realizzata ad hoc, per valorizzare le singole caratteristiche e rispecchiare i valori del clienti, basati sulla personalizzazione come valore. I punti chiave per lo sviluppo del sito web sono stati: • Valorizzazione dell’azienda; • Alberatura semplice; • Rapidità di lettura; • Esperienza multi-device GAIA website gaia-italia.com2016 PORTFOLIO UX/UI
  • 30. Valorizzazione dell’azienda e i suoi prodotti attraverso schede tecniche e fotografie, che celebrano anche l’atmosfera italiana che l’azienda vuole trasmettere. Il logo è una spirale ellittica, dove un’onda genera l’esistenza di un piccolo embrione, che si lega nuovamente all’acqua, creando un ciclo di genesi infinito. Così come accade in natura, lì dove l’acqua passa nasce la vita, un embrione, forma di vita che accomuna l’uomo a tutti gli altri animali esistenti. Poi ognuno prenderà la sua strada Features • Multilingua (EN, IT, DE, FR) • Pagine Aquascaping • Pagine prodotti (vasche, mobili,accessori) • Navigazione mobile • Visualizzazione fotografica responsive Alberatura semplice Il sito è stato concepito come un viaggio, alla scoperta delle ispirazioni italiane e della filosofia che hanno ispirato i prodotti. + + + + PORTFOLIO UX/UI
  • 31. HABBLE Brief Realizzazione di un nuovo concept di comunicazione e del sito web Habble.it, basato sulla valorizzazione di contenuti testuali e iconografici, per presentare i nuovi prodotti in corso di sviluppo. Obiettivi Offrire una demo gratuita dei nuovi prodotti Habble e generare lead generations sui prodotti Telco, attraverso un’esperienza lineare, iconografica e immediata. website habble.it2018 PORTFOLIO UX/UI
  • 32. Sitemap workshop Definizione dello scopo del sito, delle singole pagine e dei flussi utente Chi è Habble? ABOUT CLIENTS SOLUTIONS HOW TO BUY Cosa offre?Con chi lavora? A chi si rivolge? FLUSSO INFORMATIVO FLUSSO DI LEAD GENERATION PORTFOLIO UX/UI
  • 33. Creazione di un linguaggio diretto e dedicato ad ogni tipologia di cliente Lo stile Lo stile grafico gioca sui forti contrasti tra il bianco e le gradazioni di blu, in alcuni casi utilizzati con diversa opacità. In questo modo ne risulta un fascio di luce, che guida e accompagna l’utente nella comprensione dei contenuti. L’assistente virtuale Gli elementi di interazione sono presentati come hotspot che permettono all’utente di scoprire approfondimenti sui prodotti. + + + Infografiche PORTFOLIO UX/UI
  • 34. webtool CHEBEC Brief Un web tool online, ospitato sulle piattaforme partner del progetto Chebec, dedicato alle realtà industriali culturali e creative, progettato per misurare la propria predisposizione all’internazionalizzazione. Generare una valutazione numerica e testuale, utili a creare una completa consapevolezza sugli step necessari da compiere per rendere il proprio modello internazionale. Ogni valutazione tiene in considerazione le peculiarità legate alle tipologie di professionisti e imprese del settore ICC (professionisti o ditte individuali, microimprese con ridotte competenze imprenditoriali/ manageriali). Obiettivi 2019 You ART the World: ready to conquer it? PORTFOLIO UX/UI
  • 35. Sito del partner L’utente può accedere al tool cliccando sul banner presente sui siti partner Assessment Ogni utente può compilare il questionario di assessment in forma anonima Dashboard informativa Ogni assessment genera un output personalizzato: la valutazione comprende una parte numerica, quantificabile e comparabile, e una parte descrittiva consulenziale Welcome page Una pagina introduttiva descrive all’utente gli obiettivi dell’assessment IR WEB TOOL Progettazione User flow Utente Inteso come professionista, operatore o istituzione culturale PORTFOLIO UX/UI
  • 36. Framework di IR Struttura di assessment La metodologia Delphi È una tecnica di indagine iterativa utilizzata con l’obiettivo di ottenere risposte ad un problema, coinvolgendo un panel di esperti indipendenti.  La metodologia, grazie alla sua particolare struttura, consente di ottenere non soltanto opinioni singole, ma di sollevare un confronto intorno all’oggetto di una ricerca, tra gli esperti selezionati. Si tratta di un metodo qualitativo, partecipativo, previsionale e di confronto Web form Per ciascuna area vengono elaborate 10 domande a scelta multipla, con l’obiettivo di indagare il grado di predisposizione all’internazionalizzazione del beneficiario rispettivamente all’asset specifico. Alle risposte sono attribuiti punteggi pesati sulla base dell’influenza di ciascuna competenza nel quadro della strategia complessiva di internazionalizzazione. Dashboard informativa condivisibile Al termine dell’assessment viene generata una dashboard riepilogativa, composta da elementi di natura quantitativa e qualitativa: • Livello complessivo di IR, tra tre macro livelli (seed, plant, tree); • Radar chart, per capire i punti di forza e debolezza; • Punteggio per ogni singola area; • Feedback testuale consulenziale. + + + D o m a n d a 1 D o m a n d a 2 D o m a n d a 3 D o m a n d a 4 D o m a n d a 5 D o m a n d a 6 1 Area 2 Area 1Area 5 Area 4 Area 3 R a d a r c h a r t Area 1 40/40 2 3 4 5 6 Area 2 20/40 Area 3 11/40 Area 4 31/40 Area 5 28/40 I l f r a m e w o r k , e l a b o r a t o t r a m i t e m e t o d o l o g i a D e l p h i , f o r n i s c e l a b a s e p e r l a s t r u t t u r a z i o n e d e l q u e s t i o n a r i o d i a s s e s s m e n t . PORTFOLIO UX/UI
  • 37. Brief Bioindustry park è il parco scientifico tecnologico situato a Colleretto Giacosa (TO). Obiettivi Creazione dell’identità visiva digitale per la comunicazione di Bioindustry Park, il più grande parco biotecnologico italiano. Posizionare Bioindustry Park come luogo ottimale dove far crescere le imprese del settore della salute. Revisione completa e set-up sito web di BiPCa in lingua italiana e in lingua inglese, sia dal punto di vista contenutistico sia del lay-out. BIOINDUSTRY PARK website 2016 bioindustrypark.eu PORTFOLIO UX/UI
  • 38. Data visualization Le chart si basano sulla monocromia di azzurri, possono essere a più livelli e in più versioni a seconda del colore dello sfondo. + I colori I colori comunicano la sobrietà e la professionalità del luogo, attraverso le tonalità di azzurro. Le icone, selezionate ad hoc, valorizzano le diverse tematiche e comunicano attraverso le infografiche. + 257257257 Alberatura - sitemap gerarchica - custom post types - generazione archivi multilingua (partner, progetti, aziende) + Mappa, foto e video - realizzazione mappa vettoriale - realizzazione video Motion Graphic - realizzazione e cura del taglio fotografico + PORTFOLIO UX/UI
  • 39. PAZIENTI website 2018 pazienti.it Brief Riprogettazione della User Experience e User Interface del portale online di Pazienti, vetrina dedicata all’informazione nel campo della Salute. Progettare l’esperienza desktop e responsive in vista del lancio del nuovo servizio di videoconsulto online. Obiettivi PORTFOLIO UX/UI
  • 40. Gli specialisti Videoconsulto online Prenota un videconsulto online, scegliendo tra gli specialisti di Pazienti. Il servizio è disponibile sia da app che dal sito. Consulta gli specialisti e cerca tutto ciò di cui hai bisogno per la tua salute Scegli una specialità Milano - Via Galileo Galilei, 48 Dermatologo (12) Dr. Maria Rossi PRENOTA UN VIDEOCONSULTO LEGGI DI PIÙ Videoconsulto AccountCerca 2 12:30 Prototipazione+ La progettazione dell’esperienza utente si basa su una navigazione organizzata per: - Servizi (menu di primo livello) - Esperienza di ricerca (strutture, medici, farmaci, ecc.) PORTFOLIO UX/UI
  • 41. Pazienti.itPazienti.it Pazienti.it Videoconsulti.itVideoconsulti.it Menu apertoHomepage Videoconsulto landing page Videoconsulti.it Risultati di ricerca Specialista Login/Register - step 1 Login/Register - step 2 Homepage Homepage - Dettaglio appuntamento Homepage - Apertura della Sala d’attesa Homepage - Appuntamento in scadenza Homepage - Test effettuato Pazienti.it Cerca specialisti + risultati di ricerca Pazienti.it Specialista ! Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulti.it Videoconsulto Pagina profilo Pazienti.it Pazienti.it Pazienti.it Pazienti.it Pazienti.it Pagina profilo utente Homepage Vai al profilo Pazienti.it Videoconsulto VideoconsultoVideoconsulto Videoconsulto Pazienti.it Pazienti.it Pazienti.it Videoconsulto Ciao Mario I TUOI DATI Nome: MARIO ROSSI Codice fiscale: MZRRNN91L41E202D Videoconsulti prenotati Videoconsulto da 15 min 01/01/2019 ore 15:00 Dr. Nome Cognome Professione Cancella appuntamento In attesa di conferma Avvia il test Carica documenti Le tue domande Elementi salvati I tuoi videoconsulti Videoconsulto Videoconsulto Videoconsulto Videoconsulto Login/Register - step 1 Login/Register - step 2 Prenotazione Videoconsulto A B Videoconsulto Videoconsulto Videoconsulto RICERCA SPECIALISTA ACCESSO BOOKING Termine prenotazione User flows + La progettazione dell’esperienza di prenotazione di un videoconsulto PORTFOLIO UX/UI
  • 42. WOW effect Guidelines + + Definizione dei momenti esperienziali, strategici per valorizzare il raggiungimento degli obiettivi del sito. Rappresentazione grafica delle transizioni, con legenda comportamentale laterale utile al team di sviluppo. Scroll-then-fix Vertical scrollback Horizontal scrolling PORTFOLIO UX/UI
  • 43. platform FERROVIE NORD MILANO 2018 Brief Restyling del portale di FNM Group, leader lombardo della mobilità, ponendo un forte accento sull’apertura agli stakeholder, all’accessibilità dei contenuti e alla pubblicazione interattiva dell’archivio multimediale e dei bilanci di sostenibilità. Creare un forte senso di discontinuità con la comunicazione digitale del passato, aprendo ad un maggiore movimento ed enfasi dei contenuti: ogni sezione è concepita come un viaggio virtuale, di cui ogni pagina è una tappa fondamentale. Obiettivi fnmgroup.it PORTFOLIO UX/UI
  • 44. Breadcrumb Nell’header viene segnalato il nome della sezione in cui l’utente si trova, mentre il breadcrumb anticipa i contenuti. + Accessibilità L’intero portale è ottimizzato per essere navigato da ipovedenti e non vedenti, garantendo una navigazione tramite keyboard. + Menu nascosto La sitemap è raccolta in un hamburger button e nessuna voce principale viene esplosa nell’header. In questo modo l’utente si concentra maggiormente sulla lettura dei contenuti e tramite uno scorrimento può raggiungere la navigazione consigliata e le call to action di pagina. + Navigazione secondaria Una navigazione a tappe incuriosisce l’utente e lo trasporta verso la scoperta dei contenuti. Per un senso di completezza, l’utente che atterra in una pagina, sarà portato a visitarle tutte, per compiere il percorso. + Pattern Ogni pagina presenta un titolo nella stessa posizione e stile. Un pattern su cui si basa l’utente durante la navigazione. + Sfondo e movimento Immagini e contenuti iconografici sono utilizzati come sfondo e richiamano l’attenzione attraverso semplici movimenti. + Focus Alcuni concetti sono enfatizzati da un utilizzo sproporzionato del carattere tipografico, garantendo la chiarezza della comunicazione. + PORTFOLIO UX/UI
  • 45. Navigazione da footer L’intero portale ribalta le comuni regole della navigazione, portando nel footer le principali azioni: ad ogni pié di pagina vengono consigliate una tappa precedente e successiva del percorso, tre link principali e una descrizione delle principali sezioni, che dona all’utente un motivo per il quale percorrere un viaggio digitale. + Sitemap a comparsa In ogni momento l’utente può utilizzare l’hamburger button per esplodere la sitemap del portale e raggiungere ogni pagina. + PORTFOLIO UX/UI
  • 46. Multimedia Gallerie fotografiche, grafici interattivi, icone in movimento e contenuti navigabili da tastiera rendono la navigazione del portale una piacevole scoperta, sia da desktop, che da mobile, esprimendo a pieno il payoff del cliente: idee in movimento. + PORTFOLIO UX/UI
  • 47. FONDAZIONE CARIVERONA Brief Fondazione Cariverona ha maturato l’esigenza di evolvere la propria web experience, per renderla più attuale, completa e soddisfacente e per avvicinarsi ai propri stakeholder in modo tale che questi siano invogliati a ricercare le informazioni utili all’interno del sito. Obiettivi Il progetto di re-design dell’architettura dell’informazione, della UI e della UX è stato caratterizzato da una fase iniziale di ascolto, che ha visto partecipi prima gli interlocutori interni della Fondazione, attraverso interviste semi-strutturate e poi gli stakeholder esterni, con l’invio di una survey dedicata. L’obiettivo generale di questa fase iniziale è stato quello di evidenziare gli obiettivi comunicativi e di interazione con gli stakeholder a cui il nuovo sito doveva rispondere, approfondendo le questioni più rilevanti. 2017 fondazionecariverona.org website PORTFOLIO UX/UI
  • 48. I colori Colori primari del sito + Colori secondari del sito Hover button L’hover dei pulsanti al passaggio del mouse, dal colore pieno all’outline. + Responsive Un sito web adatto a qualsiasi dispositivo + Le pagine interne Il sito web è stato sviluppato basandosi sul Content Management System (CMS) Wordpress ed ottimizzato per la visualizzazione da smartphone e tablet (mobile responsive). Le pagine create sono state ottimizzate per la ricerca sui motori di ricerca rispetto agli aspetti di interesse. + PORTFOLIO UX/UI
  • 49. website Brief Fondazione Mediolanum Onlus è attiva a sostegno dell’infanzia disagiata attraverso il finanziamento di progetti di solidarietà e sviluppo in Italia e nel Mondo. Obiettivi Dotare la Fondazione degli strumenti digitali funzionali al conseguimento della sua online mission. Il progetto web offre un’ampia vetrina sui contenuti istituzionali legati alla Fondazione, sul racconto delle attività realizzate e sui risultati raggiunti. L’interazione si focalizza sui meccanismi studiati per le operazioni di crowdfunding collegate ai progetti caricati sulla piattaforma. FONDAZIONE MEDIOLANUM 2013 fondazionemediolanum.it PORTFOLIO UX/UI
  • 50. VOTA VOTA VOTA Normal Hove rActive I progettiInfografiche I contenuti del sito vengono enfatizzati e resi interattivi, grazie ad una serie di infografiche, per rappresentare gli obiettivi raggiunti e I valori da condividere. Elementi grafici Filtri e schede progetto sono rappresentati graficamente da una serie di icone personalizzate ed elementi grafici, studiati per ottimizzare le anteprime sui canali social. + + PORTFOLIO UX/UI
  • 51. X2 Le iniziative Il catalogo di iniziative di raccolta fondi di Mediolanum è accessibile dal menu principale. Ogni iniziativa presenta una scheda personalizzata con un’infografica interattiva, che racconta all’utente i fondi raccolti sino a quel momento. L’infografica sottostante racconta i fondi raccolti da Fondazione Mediolanum attraverso le cene solidali, organizzate ad ogni arrivo di tappa del Giro d’Italia. Nelle iniziative di Fondazione Mediolanum, per ogni euro raccolto, la fondazione si impegna ad aggiungerne un altro, raddoppiando i fondi raccolti. L’archivio interattivo Il Giro d’Italia + + PORTFOLIO UX/UI
  • 52. platform INTESA SAN PAOLO TOOLKITS 2016 Brief Definire gli strumenti di service design utili per il team di Innovation Center di Intesa Sanpaolo. Realizzazione di un portale per i dipendenti dedicato alle metodologie utilizzate dal LAB dell’Innovation Center. All’interno del portale è possibile scaricare gli strumenti tipici del service design, per progetti e workshop; visionare i casi studio realizzati in azienda in collaborazione con il LAB.design, per progetti e workshop; visionare i casi studio realizzati in azienda in collaborazione con il LAB. Obiettivi PORTFOLIO UX/UI
  • 53. Navigazione illustrata Dopo aver selezionato una raccolta di tools tipici del service design, questi sono stati associati per: - Fase del progetto (esplorativa, ideativa, progettuale, esecutiva) - Ambito progettuale (servizio, prodotto, spazio) - Bisogno (riprendendo quelli presenti in home page) Ogni utente, selezionando uno o più dei parametri, può individuare i tools più adatti alle sue esigenze progettuali. I parametri sono presentati sotto forma di filtri, consentendo una navigazione dinamica dell’archivio. + TITOLO TOOLS CORREL ATI CASI STUDIO CORRE LATIAPPROFONDIMENTO METODOLOGICO SUL TOOL S LABL OG INMETODOLOGI AT OOL SC ASE STUDIES IMMAGINE TOOL “NEEDS” NA VBAR LABL OG INMETODOLOGI AT OOL SC ASE STUDIES SLIDER DI PRESENT AZIONE PROGETTO LOGO BISOGNO 1 BISOGNO 2 BISOGNO 3 BISOGNO 4 BISOGNO 5 BISOGNO 6 BISOGNO 7 TITOLO FILTRINEEDS NA VBAR LABL OG INMETODOLOGI AT OOL SC ASE STUDIES IMMAGIN E LOGO TOOLS Home page L’esigenza primaria della piattaforma è quella permettere ai proprio utenti di individuare gli strumenti più adatti alle proprie necessità progettuali. L’elemento che contraddistingue la navigazione è la “Needs” Navbar, un elenco di bisogni progettuali disponibili fin dall’home page che permette di accedere ad una selezione pre-filtrata degli strumenti. + Archivio dei tool Una pagina dedicata a tutti i tools a disposizione, selezionabili tramite filtri, per individuare quelli più adatti al proprio progetto. La pagina dei tool Ogni tool può essere approfondito nella pagina dedicata, dove è possibile salvare il tool, scaricarne una copia cartacea, conoscere i casi studio aziendali dove è stato utilizzato, approfondirne la conoscenza con spiegazioni aggiuntive. + + Filtri PORTFOLIO UX/UI
  • 55. Brief Realizzazione di un portale in cui l’utente può consultare e acquistare contenuti esclusivi, mediante un abbonamento, dedicati alla creazione di un percorso di crescita personale della durata di 4 settimane. Obiettivi SHINE aiuta le donne a raggiungere una nuova consapevolezza attraverso un percorso suddiviso in aree tematiche. I contenuti del percorso vengono sbloccati settimanalmente in modo che l’utente possa seguire il programma a step quotidiani. L’obiettivo, oltre a quello della vendita del primo percorso, è anche di mantenere un abbonamento attivo ad un prezzo più conveniente e con la possibilità di fruire settimanalmente nuovi contenuti esclusivi. Con l’iscrizione al programma si entrerà anche a far parte di una community per poter partecipare agli eventi di SHINE. e-commerce SHINE 2019 shine-program.com PORTFOLIO UX/UI
  • 56. Funzionalità La piattaforma è stata sviluppata tramite il CMS Wordpress, e implementando le funzionalità di accesso alle aree riservate ai soli utenti che acquistano il perscorso SHINE. L’area di percorso è gestita tramite LMS (sistema di diffusione di contenuti e-learning), in modo che l’utente possa intervenire autonomamente nella fruizione dei contenuti e monitorarne gli sviluppi. È stato integrato il sistema di pagamento PayPal per l’acquisto dei prodotti e per poter permettere al cliente la gestione dei pagamenti direttamente sulla piattaforma PayPal. Un sistema di fatturazione elettronica permette la gestione degli acquisti e la generarazione di fatture in linea con gli standard richiesti. PayPal L-CMS Fatturazione Users Role Percorso CMS Wordpress LMS Sistema di pagamento Fatturazione elettronica + + + + PORTFOLIO UX/UI
  • 57. Percorso Attraverso una dashboard di gestione corsi e andamenti espressi dalla data visualization, l’utente può tenere traccia dei suoi progressi durante il percorso. + Responsive SHINE si adatta a qualsiasi device, dando la possibilità agli utenti di consultare i contenuti in mobilità o in altri scenari. + Contenuti dedicati Setup di un’area riservata dove è possibile accedere ad archivi di ricette, video e documenti riservati solo ai membri della community. + Tone of voice “Fly me to the moon” è il concept creato per delineare l’esperienza utente sulla piattaforma, enfatizzando il percorso di crescita degli utenti, attraverso il coinvolgimento della sfera emozionale. + PORTFOLIO UX/UI
  • 58. Brief Cyrcus un progetto dello Studio Santachiara, a cui si è unito Coppa+Landini, nato per essere una piattaforma di e-commerce che produce in digital fabrication professionale e propone la vendita diretta di prodotti in collaborazione con le grandi firme del design. Obiettivi Cyrcus crede e promuove la digital fabrication come strumento abilitante di innovazione, affiancandolo alla cultura di progetto sia internamente che attraverso i designer della piattaforma. Il meglio del design d’autore a portata di click. Ogni prodotto è realizzato in esclusiva per Cyrcus, personalizzabile secondo le richieste dell’utente del design. L’obiettivo non è solo quello di un semplice e-commerce di design ma è di trasmettere ai visitatori i valori di digitalizzazione del design. e-commerce CYRCUS 2015 cyrcus.it PORTFOLIO UX/UI
  • 59. + Le collezioni e la personalizzazione Il sito Cyrcus.it è diviso in collezioni in cui sono contenuti i pezzi di design in digital fabrication. Ogni prodotto è associato a una pagina autore con biografia e tutti i prodotti a lui legati. Ogni prodotto inoltre è possibile comprarlo in diverse dimensioni, materiali e finiture. + Le icone Ogni prodotto è caratterizzato da un’icona che indica con che tecnologia è stato realizzato tra stampa 3D, taglio laser e CNC. + Responsive Cyrcus.it si adatta su ogni dispositivo: mobile, tablet, pc per permettere all’utente di sfogliare e acquistare con un semplice click i prodotti di design. Anelli : FELIX by Anna Gili; Porta matite: BABEL, Penholder by Gian Luca Silvestrini, Fabrizio Guarrasi, Mattia Antonetti, Maxe van Heeswijk PORTFOLIO UX/UI
  • 60. BENERKAAN Brief Benerkaan è un’azienda che realizza jeans classici e attraenti per le nuove generazioni. La combinazione di bellezza e comfort è essenziale quando nei prodotti di Benerkaan. Obiettivi Un sito e-commerca dallo stile minimale e attuale con foto e testi ridotti all’essenziale. Le proposte cromatiche dell’e-commerce sono con colori caldi (come ecrù e grigio industrial), texture ed atmosfere rilassanti. e-commerce 2017 benerkaan.it PORTFOLIO UX/UI
  • 61. Brief Pamaco è un brand di cioccolato svizzero artigianale che ha il suo canale di vendita online e in diversi punti vendita sparsi nel territorio svizzero. Obiettivi Creare un canale di vendita online dei diversi prodotti di Pamaco, divisi per categorie. Non solo un e-commerce, ma uno spazio che racconti i prodotti e la storia del brand. Un sito web di facile lettura e adatto a ogni tipo di dispositivo. e-commerce PAMACO 2017 PORTFOLIO UX/UI
  • 62. I prodotti Le foto dei prodotti sono ambientati e contestualizzati per dare un’immagine accattivante alle pagine dell’e-commerce. Sono tutti divisi per categorie. + PORTFOLIO UX/UI
  • 64. Brief Creare un format di template per il lancio del nuovo blog. Obiettivi Definire un template unico per distinguere i post creati dai Guest di Landis+Gyr dagli autori interni e ridefinire la user experience dell’intero blog. landingpage LANDIS +GYR 2018 eu.landisgyr.com/blog PORTFOLIO UX/UI
  • 65. Guest post Analytics + + Tracciamento sull’andamento dei singoli post e delle Call to action tracciabili unicamente. Template dinamico basato su 6 lingue e Guest Card PORTFOLIO UX/UI
  • 66. INFRONT landingpage 2019 blog.infrontsports.com Brief Creare un format di template per il lancio di campagne marketing. Obiettivi Realizzazione di un design sistemico per la creazione di moduli e templates flessibili, secondo le esigenze delle campagne. PORTFOLIO UX/UI
  • 67. Templates modulari Analytics + + Tracciamento sull’andamento dei singoli post, pagine e delle Call to action tracciabili unicamente. Composizione di pagine tramite drag and drop di moduli, dal layout flessibile a seconda del numero di contenuti presenti PORTFOLIO UX/UI
  • 68. VIZ ECLIPSE Brief Lancio di un nuovo prodotto sul mercato attraverso una landing page, correlata da white papers e case studies. Obiettivi Offrire un’esperienza interattiva ed ingaggiante per esaltare il prodotto nella sua natura innovativa e rivoluzionaria. website vizeclipse.com2019 PORTFOLIO UX/UI
  • 69. Interactive experience Tabelloni side interattivi che cambiano sponsor seguendo lo scroll verticale della pagina Lead generation e content download + + PORTFOLIO UX/UI
  • 70. + INTERACTION + ENGAGEMENT PORTFOLIO UX/UI
  • 71. landingpage CLUBHOUSE BRERA 2016 Brief Creazione di una landing page per il lancio di ClubHouse Brera, membership club esclusivo di Milano. Illustrare il luogo e i servizi offerti da ClubHouse Brera, nonché permettere ai visitatori di prenotare una giornata gratuita di prova all’interno del club. Obiettivi PORTFOLIO UX/UI
  • 72. Storytelling L’alternanza tra contenuti testuali e fotografici esalta lo storytelling dedicato al club. CTA Ogni sezione fotografica accoglie una call to action, per guidare l’utente verso la prenotazione di una giornata di prova. + + PORTFOLIO UX/UI
  • 73. Brief Ware è un Digital Integrator che supporta i clienti nella trasformazione del business. Le soluzioni di Ware si basano su un mix di competenze in ambito design thinking, Iot e mobility. Obiettivi Per Ware è stata realizzata una landing page a supporto delle capabilities e delle soluzioni offerte dal Digital Integrator. La landing page è stata realizzata con CMS wordpress creando un tema custom su misura per l’azienda. landingpage WARE 2018 ware.expert PORTFOLIO UX/UI
  • 75. PAZIENTI website 2018 pazienti.it Brief Progettazione della User Experience e User Interface dell’app di Pazienti, vetrina dedicata all’informazione nel campo della Salute. Progettare l’esperienza smartphone e tablet in vista del lancio del nuovo servizio di videoconsulto online. Obiettivi SMARTPHONE TABLET PORTFOLIO UX/UI
  • 76. Prototipazione dei flussi di acquisto, accesso all’area riservata, esperienza di videoconsulto e test con peer virtuale. Progettazione user flows e interazione+ A V V I O F L U S S O D I P R E N O T A Z I O N E V I D E O C O N S U L T O PORTFOLIO UX/UI
  • 77. Realizzazione dell’esperienza di videoconsulto peer to peer, con area commenti, chat real-time e sala d’attesa virtuale. Progettazione esperienza di videoconsulto+ F L U S S O D I R E A L I Z Z A Z I O N E V I D E O C O N S U L T O Vuole far prolungare il videoconsulto di 5 minuti? D O T T O R E P A Z I E N T E Prolunga di 5 minuti PORTFOLIO UX/UI
  • 78. Realizzazione di test di usabilità e organizzazione invito agli utenti con format promozionale Test utente e pubblicazione finale+ PORTFOLIO UX/UI
  • 79. Brief LEOOH si inserisce nel panorama delle ricerche di mercato qualitative, affiancando gli attuali strumenti esistenti. Ne completa e ne rafforza il valore aggiunto, offrendo ancora più spunti e insight. Nel contesto fuori casa contano le esperienze “qui ed ora”, i micro-momenti. Obiettivi LEOOH permette di analizzare e contestualizzare le emozioni legate alla user experience autentica nel contesto fuori casa. Con LEOOH è possibile portare l’analisi del consumatore nella sua vita quotidiana, con l’utilizzo di una applicazione mobile attraverso cui vengono somministrati test e domande nel momento in cui il consumatore si confronta con brand o con il servizio. LEOOH website+app 2015 leooh.it PORTFOLIO UX/UI
  • 80. La home dell’app è progettata per micromoduli di esperienza attraverso delle schede. L’utente fotografa e aggiunge emozioni, testi e registrazioni audio, per raccontare come si sente, che emozioni l’esperienza ha suscitato, cosa gli piace e cosa non gli piace. Landing Page Tutte le interazioni della app sono state progettate per avere un’esperienza inituitiva e breve da parte dell’utente. A supporto del processo di vendita è stata progettata una landing page che descrive le funzionalità dell’app. PORTFOLIO UX/UI
  • 81. app COOPSAPEVOLE 2012 Brief Ideazione e realizzazione di un’app con la quale i clienti Coop Lombardia possono scoprire l’impatto ambientale della propria spesa. Rendere consapevoli gli utenti dell’impatto ambientale che la produzione di alcuni alimenti può comportare. Obiettivi PORTFOLIO UX/UI
  • 82. Navigazione illustrata L’utente naviga all’interno di un supermercato illustrato, scoprendo l’intero catalogo prodotti e consultando, in maniera ludica, l’impatto ambientale che ha ogni prodotto. + PORTFOLIO UX/UI
  • 83. Comparazione È possibile comparare due prodotti per scoprire quali dei due ha un impatto minore sull’ambiente, così come avere un riepilogo mensile sul proprio impatto. Consultazione Attraverso una bilancia, l’utente può ottenere una quotazione dell’impatto ambientale, relativa al quantitativo acquistato del singolo alimento. + + PORTFOLIO UX/UI