(Ita abstract). the are two possible standpoints you can have on digital interafces: you can see them as a product-service, a tool to get something done. Or, you can see them as communication media within a brand ecosystem. Bring these two together, to make better and more solid digital products

1. the web better
Un framework per marketer e creativi per
affrontare con successo il progetto digitale

2. Silvia Podestà
Design & Content Strategist
| ATC – All Things Communicate
designer strategico con un articolato background in
comunicazione e marketing per i media digitali. Nel corso
degli anni ha collaborato con aziende e agenzie in settori
diversi, sviluppando competenze tecniche e strategiche
in ambito di brand positioning. All’attività progettuale
affianca la ricerca e lo studio dei pattern
comportamentali dei consumatori, con particolare
riferimento alle interfacce web.
Agenda
Introduzione. verso una nuova cultura del
progetto digitale
The web better. un framework per creare
interfacce e prodotti di valore per il
business
9 ingredienti: i “pillar” della formula
Webbetter

3. Un framework
per il progetto
digitale
Introduzione

4. Vaste e diversificate competenze richieste dal
progetto digitale, scarso allineamento tra
stakeholder con diverso know how
Utenti sempre più skillati—- si alza
l’asticella per aziende e brand
1
2
Progettare
digitale oggi
3 La pandemia ha accelerato la corsa al
digitale >> competizione più accanita

5. La progettazione digitale in molti ambiti
risente della complessità del compito che
viene richiesto.
Specialmente in aziende o agenzie creative
nate con una vocazione non-digitale.
In particolare ciò è dovuto a un fattore
culturale: troppo spesso trascuriamo la
doppia natura del prodotto digitale.

6. Che differenza c’è?
1. CAMPAGNA
AFFISSIONI
2. SITO CORPORATE

7. Ma con punti di vista diversi
e complementari!
ENTRAMBI CREATIVI
Due
Possibili
Pubblicitario
DON DRAPER
Designer
IAN SPALTER
Punti di
vista

8. Supporta Le attività che l’utente online ha bisogno di
compiere!
AD ESEMPIO EFFETTUARE TRANSAZIONI | INTERAGIRE | MONITORARE DATI |
CREARE QUALCOSA | DIVERTIRSI |SOCIALIZZARE | IMPARARE
UN PRODOTTO DIGITALE E’ UNO STRUMENTO

9. Spesso nei team creativi alle prese con un progetto web o
digital si tende a privilegiare un approccio a scapito
dell’altro, e di conseguenza il sito o l’app:
1. Appaiono slegati
dalla strategia di
business complessiva=
inutilità lato brand 2. Risolvono male o
non risolvono le
necessità dell’utente =
irrilevanza lato utente
3. Non sfruttano
appieno le potenzialità
comunicative
dell’interfaccia digitale=
scarsa creatività,
standardizzazione,
opportunità di
marketing sprecate

10. Per ovviare a ciò occorre:
1. ripensare al prodotto digitale come un sistema prodotto-servizio-
comunicazione
2. Ridefinire la dicotomia design/comunicazione, e valorizzarne invece il
rapporto sinergico

11. INTRODUCING..
2.
the webbetter
framework

12. ew b b e et t r
WHY
EMPATHY
BUSINESS VALUE
BUILDING BLOCKS
ERGONOMICS
THRILL
TEAM
EMOTION
REACH
design with a
purpose
design to make your
company thrive
design with humans
in mind
Start from content and
architecture
Create usable
interfaces
Create engaging
interfaces
Enhance
Collaboration
Persuade users
to action
Let users find
your product

13. Webbetter perché
1. Aiuta a guardare alla big picture del progetto
digitale
2. Tiene in uguale considerazione le esigenze
del design e le necessità di comunicazione
3. Aiuta a comprendere la complessità e la
diversità delle varie competenze che vanno
coinvolte nella progettazione digitale

14. 1
Pillars
Progettare con
uno scopo
WHY

15. “What’s really making us
stand out is that we’ve
always had a very
distinctive purpose as a
product: creating a safe
space for users to express
themselves in a positive and
creative way”.
RICHARD WATERWORTH, TIKTOK UK & EUROPE
• Avere un obiettivo è cruciale per qualsiasi attività
strategica
• È essenziale che team creativi e top executives vengano
incoraggiati a stabilire uno scopo, un purpose che guidi
l’intero processo di design.
• Il purpose aiuta a:
1.Pensare in termini di bigger picture
2. Definire una forte e coerente value proposition
PROGETTARE CON UNO SCOPO

16. Definire gli obiettivi specifici di un prodotto digitale
all’interno di una strategia di brand complessiva e
relativamente alle diverse fasi del funnel di acquisizione
(awareness, considerazione, conversione, nurturing…)
KEY TAKEAWAY
💥

17. 2
Pillars
Progettare
“Human-centered”
EMPATHY

18. • Lo Human centred design è un aspetto imprescindibile
della progettazione digitale oggi
• Comprendere gli utenti: focus su tecniche di ricerca/analisi
più usate: personas, interviste qualitative, focus group,
scenario building
PROGETTARE HUMAN-CENTERED

19. Effettuare sempre ricerche di contesto per comprendere le
reali necessità, aspettative, desideri degli utenti. Progettare
di conseguenza è la chiave per il successo di lungo termine
dei prodotti digitali.
KEY TAKEAWAY
💥

20. 3
Web Better
Progettare per la
Unique Selling
Proposition
BUSINESS VALUE
3
Pillars
Design per la
USP
BUSINESS VALUE

21. PROGETTARE PER LA USP
• Domanda d’obbligo prima di iniziare il design:
come il nostro prodotto digitale può
differenziarsi dai competitor?
• Innovazione, creatività e applicazione di modelli
mentali alternativi per creare prodotti digitali
unici. Qualche esempio: Uber, Tinder.

22. Assicurarsi sempre che il prodotto digitale che abbiamo in
mente fornisca reale valore aggiunto agli utenti e all’azienda
e non sia la ripetizione di qualcosa di già esistente con cui è
difficile competere.
KEY TAKEAWAY
💥

23. 4
Web Better
Contenuti e
architettura
informativa
BUILDING BLOCKS2
Pillars
Progettare
“Human-centered”
EMPATHY

24. I FONDAMENTALI: UI, CONTENUTI
E ARCHITETTURA INFORMATIVA
• Come iniziare il design: inventario dei contenuti
del sito o della app, determinazione ranking di
priorità e creazione di una gerarchia dei
contenuti
• Dalla gerarchia all’architettura informativa
• Visualizzare per presentare al team o al
cliente: wireframe a bassa o alta fedeltà

25. A partire da una visione di globale di quante (e della tipologia
di) informazioni e contenuti il nostro sito dovrà ospitare,
progettiamo in modo flessibile e modulare, nell’ottica di
cambiamenti incrementali dei contenuti nel tempo.
KEY TAKEAWAY
💥

26. 5
Pillars
Design per
l’usabilità
ERGONOMICS

27. DESIGN PER L’USABILITA’
• Cosa significa User Experience? Efficacia,
efficienza e soddisfazione dell’utente.
• Gli elementi da progettare con cura:
navigazione, responsiveness, contenuti
multimediali e accessibilità.

28. Assicuriamoci che il nostro prodotto digitale sia efficace,
efficiente e soddisfacente per l’utente prestando attenzione
a: navigazione, accessibilità, responsiveness e adattabilità a
differenti devices.
KEY TAKEAWAY
💥

29. 6
Pillars
Design per
l’engagement
THRILL

30. DESIGN PER L’ENGAGEMENT
• Oggi gli utenti si aspettano interazioni fluide
con i prodotti digitali, ma anche esperienze
sorprendenti, divertenti, emozionanti.
• Attraverso un concept creativo originale e ad
un’art direction ben costruita, l’interfaccia
digitale diventa un mezzo di comunicazione
efficacissimo.
• Focus on>> elementi di art direction per il web:
tipografia, colori, elementi dinamici, interattività,
con alcuni esempi.

31. Per diventare uno strumento di comunicazione e di marketing
efficace, includiamo nel nostro prodotto digitale un concept
creativo unico e elementi di art direction differenzianti.
KEY TAKEAWAY
💥

32. 7
Pillars
Migliorare la
collaborazione nel
progetto digitale
TEAM

33. MIGLIORARE LA COLLABORAZIONE
• Ogni impresa creativa necessita di lavoro di
squadra. Il progetto digitale necessita della
coordinazione di molte squadre!
• Pensare Agile: quando è bene, quando meno
• Come facilitare la comunicazione tra developer,
designer, marketer, clienti in un contesto
variabile e soggetto a cambiamento continuo?

34. L’approccio agile consente di rispondere in maniera più
duttile a contesti e presupposti in continuo cambiamento, ma
necessita di grande collaborazione tra i team coinvolti e tra
fornitore e cliente.
KEY TAKEAWAY
💥

35. 8
Pillars
Design per la
persuasione online
EMOTION

36. DESIGN PER LA PERSUASIONE
• Psicologia degli utenti sul web
• Focus on>>Strumenti di persuasione
• Attenzione ai fattori culturali
• Persuadere, ma in modo etico: evitare i dark
pattern

37. Il design delle nostre interfacce web può renderle un mezzo
persuasivo potente per il marketing ,ma ricordiamoci del
punto di vista etico della nostra professione per evitare un
effetto “boomerang”.
KEY TAKEAWAY
💥

38. 9
Pillars
Farsi trovare
dalla nostra audience
REACH

39. FARSI TROVARE DALLA NOSTRA AUDIENCE
• Evitare le cattedrali nel deserto
• SEO tips per posizionare un website
• E/O Advertising per promuovere una
piattaforma, un sito o una app

40. Nessun prodotto digitale ha senso o valore se gli utenti non lo
utilizzano o lo navigano. L’ottimizzazione per i motori di
ricerca e la promozione del sito o della app attraverso
l’advertising sono aspetti cruciali all’interno del progetto
digitale.
KEY TAKEAWAY
💥

41. COMING SOON…
A POCKET GUIDE TO BUILD
BETTER AND BUSINESS VALUABLE
DIGITAL PRODUCTS
#THEWEBBETTER