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