http://www. visualdesignthinking.it
How much
a frustrating
User Experience
is harmful for
your success?
This is why we’re ...
http://www. visualdesignthinking.it
foto del sentiero
Paved the wrong way,
just like not localising the website.
http://www. visualdesignthinking.it
Carlo Frinolli @carl0s_
Passionate UX Designer and CEO at nois3.
I like to break thing...
+ +
http://www. visualdesignthinking.it
+ +
What we’ll
be doing
today
We’ll see what #VDT is about, just like
real speeche...
http://www. visualdesignthinking.it
There are two keywords here.
User
Experience
http://www. visualdesignthinking.it
Ethnography
Let’s talk about users.
http://www. visualdesignthinking.it
Know thy user!
Quality over quantity, relationships and shareholders (or
stakeholders)...
http://www. visualdesignthinking.it
Why?
Wifi
Basic needs
Safety needs
Social needs
Esteem needs
Self-actualization
http://www. visualdesignthinking.it
When?
At the very beginning.
When you need to know what’s going on.
http://www. visualdesignthinking.it
How?
http://www. visualdesignthinking.it
Useful
tips
Average users
Forget to meet them: they don’t exist.
Niches!
Focusing on a...
http://www. visualdesignthinking.it
Useful
tips
Heisenberg, my friend
Do not pretend to be objective.
Interviews are betwe...
http://www. visualdesignthinking.it
Take the right
time for everything
Listen, observe, take notes.
And then think.
http://www. visualdesignthinking.it
RIOS
interviews
for an open brand.
CASE STUDY pt. I
http://www. visualdesignthinking.it
Our three
questions
1. The bar situation
You meet an old friend in a bar just a few
mi...
http://www. visualdesignthinking.it
Our three
questions
3. The suitcase
Imagine you are a salesman in a client's
office wit...
http://www. visualdesignthinking.it
!
!
!
Your turn:
time for the theme!
Exercise #1
http://www. visualdesignthinking.it
Create a public
bike sharing service in Sofia
You have 10 minutes to write down
5 possi...
“
”
http://www. visualdesignthinking.it
10 minutes!
5 questions/topics.
share results on Twitter with #VDT #bgws14
http://www. visualdesignthinking.it
Everybody loves
stories.
Even developers.
Even if they won’t ever admit it.
http://www. visualdesignthinking.it
Quit tech specs,
go for user stories.
I don’t mean it literally.
But try to focus on w...
“
”
http://www. visualdesignthinking.it
As a <role> I want to <action>
in order to <benefit>
Yes, it’s from agile thinking.
http://www. visualdesignthinking.it
Sir, User stories
tend to be vague, sir.
It's not a bug, Sir.
It's a feature.
An epic ...
http://www. visualdesignthinking.it
Let's have
an epic carpaccio
And thanks Fabio Armani for showing this.
“
”
http://www. visualdesignthinking.it
As a citizen I want to get
a bike in order to ride
in the city freely
It’s kind of...
“
”
http://www. visualdesignthinking.it
10 minutes!
Split the epic story
into 5 smaller ones.
share results on Twitter wit...
http://www. visualdesignthinking.it
All by myself!?
So OK.
We're doing all by ourselves?
We researched for the users' iden...
http://www. visualdesignthinking.it
Each project
is a threesome.
UX it's not only a love affair with users.
!
It is a thre...
http://www. visualdesignthinking.it
It’s all about attitude, Sir.
© Daniele Tamagni - Gentlemen of Bacongo
“
”
http://www. visualdesignthinking.it
You can think about brand in three parts:
who you are, how you dress and how you a...
http://www. visualdesignthinking.it
So CO-Design.
Since branding.
Keep the client in the loop.
Try and learn all you can f...
http://www. visualdesignthinking.it
Wed in Florence
co-design process.
CASE STUDY pt. II: from sketching to branding.
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
Samadhi
visual co-design/
branding
CASE STUDY pt. III
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
“
”
http://www. visualdesignthinking.it
Time for hints!
Bike-sharing moodboard.
!
http://bit.ly/1ksNncb
http://www. visualdesignthinking.it
Why we're doing this you say
http://www. visualdesignthinking.it
It is now
time to make
web/app
interface…
Think responsive. It’s not only shrinking.
http://www. visualdesignthinking.it
Responsive has
lots of meaning
• be ready for mobility
• promptly respond to a query
•...
+ +
http://www. visualdesignthinking.it
+ +
Mobile first
approach
If you think mobile first, you’re
going to face more chall...
http://www. visualdesignthinking.it
Do not
make the
user think.
Remember? They’re human and fail badly.
http://www. visualdesignthinking.it
WMP2014
!
World
Medicine
Park
CASE STUDY pt. IV
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
http://www. visualdesignthinking.it
Time to design
responsive stuff
You have 10 minutes to design content
for the bike shar...
http://www. visualdesignthinking.it
Digital totem
1080x1920
Smartphone (web)app
1080x1920
“
”
http://www. visualdesignthinking.it
10 minutes!
Content and UI!
share results on Twitter with #VDT #bgws14
http://www. visualdesignthinking.it
Some useful
tools we use.
From mood boarding to prototyping, and feedback!
http://www. visualdesignthinking.it
Pinterest for moodboards!
http://www. visualdesignthinking.it
Déjà vu? POST-IT!
http://www. visualdesignthinking.it
InvisionApp for prototypes
http://www. visualdesignthinking.it
Zurb Foundation for Interactive Wireframes
http://www. visualdesignthinking.it
Usersnap! For real, meaning feedback :)
http://www. visualdesignthinking.it
Wrap up.
How your bike
sharing service
will look like?
Please share results on Twitter...
http://www. visualdesignthinking.it
People we appreciated
and helped us
Bogomil :), Florian, Fabio, Pierluigi, all the noi...
“
”
http://www. visualdesignthinking.it
Thank you, for your attention.
Any question?
!
Meet us later, or tonight.
Be sure ...
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the process and exercises!
Upcoming SlideShare
Loading in...5
×

Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the process and exercises!

2,155
-1

Published on

We presented this 1.30h talk at the Bulgaria Web Summit 2014 to show and review some of the progress we've done in months of application of this process.
____
Visual Design Thinking (#VDT) is a prototyping, cooperative methodology and a set of tools.

It is a work-in-progress project, a process you should try in order to create more empathy and more co-creation with your clients, but also with your team. Customer cooperation over contract negotiation as the Agile Manifesto says.

VDT is an experience - centered method with a focus on visual languages and techniques, our interdisciplinary approach to visual web design.

Published in: Design

Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the process and exercises!

  1. 1. http://www. visualdesignthinking.it How much a frustrating User Experience is harmful for your success? This is why we’re speaking in Italian right now.
  2. 2. http://www. visualdesignthinking.it foto del sentiero Paved the wrong way, just like not localising the website.
  3. 3. http://www. visualdesignthinking.it Carlo Frinolli @carl0s_ Passionate UX Designer and CEO at nois3. I like to break things to know how they works. Most of the times I have spare parts. Chiara Albanesi @lucciole Ethnographer, storyteller and visual designer. I believe in mistakes, and in fireflies. Co-founder @mokalab
  4. 4. + + http://www. visualdesignthinking.it + + What we’ll be doing today We’ll see what #VDT is about, just like real speeches. Then we’re going to get our hands dirty. ! Don’t turn your head we’re talking to you. Insights Case studies Three exercises! Discovery two row
  5. 5. http://www. visualdesignthinking.it There are two keywords here. User Experience
  6. 6. http://www. visualdesignthinking.it Ethnography Let’s talk about users.
  7. 7. http://www. visualdesignthinking.it Know thy user! Quality over quantity, relationships and shareholders (or stakeholders) over customers. ! I tell you a secret: Users are human not robots. They will fail badly. 
 Use a little bit of humanity then, please.
  8. 8. http://www. visualdesignthinking.it Why? Wifi Basic needs Safety needs Social needs Esteem needs Self-actualization
  9. 9. http://www. visualdesignthinking.it When? At the very beginning. When you need to know what’s going on.
  10. 10. http://www. visualdesignthinking.it How?
  11. 11. http://www. visualdesignthinking.it Useful tips Average users Forget to meet them: they don’t exist. Niches! Focusing on a niche will give better results than trying to meet everyone needs, at least if you’re not building the new Facebook.
  12. 12. http://www. visualdesignthinking.it Useful tips Heisenberg, my friend Do not pretend to be objective. Interviews are between humans, and you are too, after all. Data, big time use data. data are not evil. they can help you finding the right questions to ask. One more thing…
  13. 13. http://www. visualdesignthinking.it Take the right time for everything Listen, observe, take notes. And then think.
  14. 14. http://www. visualdesignthinking.it RIOS interviews for an open brand. CASE STUDY pt. I
  15. 15. http://www. visualdesignthinking.it Our three questions 1. The bar situation You meet an old friend in a bar just a few minutes after a RIOS meeting, and you start talking about what you're doing. How would you explain him what RIOS is? 2. Co-what? Think about the other people/companies members of RIOS. How can you define your collaboration with them? Try to use only few words.
  16. 16. http://www. visualdesignthinking.it Our three questions 3. The suitcase Imagine you are a salesman in a client's office with the RIOS suitcase. What's inside it?
  17. 17. http://www. visualdesignthinking.it ! ! ! Your turn: time for the theme! Exercise #1
  18. 18. http://www. visualdesignthinking.it Create a public bike sharing service in Sofia You have 10 minutes to write down 5 possible questions or topics for user research interviews.
  19. 19. “ ” http://www. visualdesignthinking.it 10 minutes! 5 questions/topics. share results on Twitter with #VDT #bgws14
  20. 20. http://www. visualdesignthinking.it Everybody loves stories. Even developers. Even if they won’t ever admit it.
  21. 21. http://www. visualdesignthinking.it Quit tech specs, go for user stories. I don’t mean it literally. But try to focus on what matters to end users, not to technicians, or ninjas.
  22. 22. “ ” http://www. visualdesignthinking.it As a <role> I want to <action> in order to <benefit> Yes, it’s from agile thinking.
  23. 23. http://www. visualdesignthinking.it Sir, User stories tend to be vague, sir. It's not a bug, Sir. It's a feature. An epic one.
  24. 24. http://www. visualdesignthinking.it Let's have an epic carpaccio And thanks Fabio Armani for showing this.
  25. 25. “ ” http://www. visualdesignthinking.it As a citizen I want to get a bike in order to ride in the city freely It’s kind of huge, right? Epic. Let’s split it up.
  26. 26. “ ” http://www. visualdesignthinking.it 10 minutes! Split the epic story into 5 smaller ones. share results on Twitter with #VDT #bgws14
  27. 27. http://www. visualdesignthinking.it All by myself!? So OK. We're doing all by ourselves? We researched for the users' identities, we decided for their user stories, alone?
  28. 28. http://www. visualdesignthinking.it Each project is a threesome. UX it's not only a love affair with users. ! It is a threesome. ! But don't be anxious, you will have toys EHM… tools to play with.
  29. 29. http://www. visualdesignthinking.it It’s all about attitude, Sir. © Daniele Tamagni - Gentlemen of Bacongo
  30. 30. “ ” http://www. visualdesignthinking.it You can think about brand in three parts: who you are, how you dress and how you act. ! Who you are is your brand strategy, how you dress is your brand identity and how you act is your marketing. Andrea Shillington, Branding for good.
  31. 31. http://www. visualdesignthinking.it So CO-Design. Since branding. Keep the client in the loop. Try and learn all you can from the client.
  32. 32. http://www. visualdesignthinking.it Wed in Florence co-design process. CASE STUDY pt. II: from sketching to branding.
  33. 33. http://www. visualdesignthinking.it
  34. 34. http://www. visualdesignthinking.it
  35. 35. http://www. visualdesignthinking.it
  36. 36. http://www. visualdesignthinking.it Samadhi visual co-design/ branding CASE STUDY pt. III
  37. 37. http://www. visualdesignthinking.it
  38. 38. http://www. visualdesignthinking.it
  39. 39. http://www. visualdesignthinking.it
  40. 40. “ ” http://www. visualdesignthinking.it Time for hints! Bike-sharing moodboard. ! http://bit.ly/1ksNncb
  41. 41. http://www. visualdesignthinking.it Why we're doing this you say
  42. 42. http://www. visualdesignthinking.it It is now time to make web/app interface… Think responsive. It’s not only shrinking.
  43. 43. http://www. visualdesignthinking.it Responsive has lots of meaning • be ready for mobility • promptly respond to a query • applicable brand identities • right content → right context • right interaction → right context
  44. 44. + + http://www. visualdesignthinking.it + + Mobile first approach If you think mobile first, you’re going to face more challenges sooner. This will force simplify, organise better and reduce. Cognitive payload Complexity and clu er Streamline interface Long shadows?
  45. 45. http://www. visualdesignthinking.it Do not make the user think. Remember? They’re human and fail badly.
  46. 46. http://www. visualdesignthinking.it WMP2014 ! World Medicine Park CASE STUDY pt. IV
  47. 47. http://www. visualdesignthinking.it
  48. 48. http://www. visualdesignthinking.it
  49. 49. http://www. visualdesignthinking.it
  50. 50. http://www. visualdesignthinking.it
  51. 51. http://www. visualdesignthinking.it Time to design responsive stuff You have 10 minutes to design content for the bike sharing service, and to sketch a couple of very rough ideas about User Interface in different application contexts.
  52. 52. http://www. visualdesignthinking.it Digital totem 1080x1920 Smartphone (web)app 1080x1920
  53. 53. “ ” http://www. visualdesignthinking.it 10 minutes! Content and UI! share results on Twitter with #VDT #bgws14
  54. 54. http://www. visualdesignthinking.it Some useful tools we use. From mood boarding to prototyping, and feedback!
  55. 55. http://www. visualdesignthinking.it Pinterest for moodboards!
  56. 56. http://www. visualdesignthinking.it Déjà vu? POST-IT!
  57. 57. http://www. visualdesignthinking.it InvisionApp for prototypes
  58. 58. http://www. visualdesignthinking.it Zurb Foundation for Interactive Wireframes
  59. 59. http://www. visualdesignthinking.it Usersnap! For real, meaning feedback :)
  60. 60. http://www. visualdesignthinking.it Wrap up. How your bike sharing service will look like? Please share results on Twitter via #VDT #bgws14 :)
  61. 61. http://www. visualdesignthinking.it People we appreciated and helped us Bogomil :), Florian, Fabio, Pierluigi, all the nois3 team in Rome and Milan, Raffaele, Alessio, Claudia, all our students and clients and the Etnograph team.
  62. 62. “ ” http://www. visualdesignthinking.it Thank you, for your attention. Any question? ! Meet us later, or tonight. Be sure to get our freshly printed business cards! ! C+c
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×