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

63

description

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.

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

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

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.

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

http://www. visualdesignthinking.it

foto del sentiero

Paved the wrong way, just like not localising the website.

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

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 @luccioleEthnographer, storyteller and visual designer. I believe in mistakes, and in fireflies. Co-founder @mokalab

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

+ +

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

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

http://www. visualdesignthinking.it

There are two keywords here.

User Experience

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

http://www. visualdesignthinking.it

EthnographyLet’s talk about users.

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

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.

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

http://www. visualdesignthinking.it

Why?

Wifi

Basic needs

Safety needs

Social needs

Esteem needs

Self-actualization

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

http://www. visualdesignthinking.it

When?

At the very beginning. When you need to know what’s going on.

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

http://www. visualdesignthinking.it

How?

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

http://www. visualdesignthinking.it

Useful tips

Average usersForget 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.

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

http://www. visualdesignthinking.it

Useful tips

Heisenberg, my friendDo not pretend to be objective. Interviews are between humans, and you are too, after all.

Data, big timeuse data. data are not evil. they can help you finding the right questions to ask.

One more thing…

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

http://www. visualdesignthinking.it

Take the right time for everything

Listen, observe, take notes. And then think.

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

http://www. visualdesignthinking.it

RIOS interviews for an open brand.

CASE STUDY pt. I

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

http://www. visualdesignthinking.it

Our three questions

1. The bar situationYou 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.

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

http://www. visualdesignthinking.it

Our three questions

3. The suitcaseImagine you are a salesman in a client's office with the RIOS suitcase. What's inside it?

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

http://www. visualdesignthinking.it

!

!

!

Your turn: time for the theme!Exercise #1

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

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.

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

http://www. visualdesignthinking.it

10 minutes! 5 questions/topics.

share results on Twitter with #VDT #bgws14

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

http://www. visualdesignthinking.it

Everybody loves stories. Even developers.

Even if they won’t ever admit it.

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

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.

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

http://www. visualdesignthinking.it

As a <role> I want to <action> in order to <benefit>

Yes, it’s from agile thinking.

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

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.

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

http://www. visualdesignthinking.it

Let's have an epic carpaccio

And thanks Fabio Armani for showing this.

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

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.

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

http://www. visualdesignthinking.it

10 minutes! Split the epic story into 5 smaller ones.

share results on Twitter with #VDT #bgws14

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

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?

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

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.

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

http://www. visualdesignthinking.it

It’s all about attitude, Sir.© Daniele Tamagni - Gentlemen of Bacongo

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

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.

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

http://www. visualdesignthinking.it

So CO-Design. Since branding.

Keep the client in the loop. Try and learn all you can from the client.

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

http://www. visualdesignthinking.it

Wed in Florence co-design process.

CASE STUDY pt. II: from sketching to branding.

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

Samadhi visual co-design/branding

CASE STUDY pt. III

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

Time for hints! Bike-sharing moodboard.

!

http://bit.ly/1ksNncb

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

http://www. visualdesignthinking.it

Why we're doing this you say

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

http://www. visualdesignthinking.it

It is now time to make web/app interface…

Think responsive. It’s not only shrinking.

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

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

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

+ +

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?

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

http://www. visualdesignthinking.it

Do not make the user think.

Remember? They’re human and fail badly.

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

http://www. visualdesignthinking.it

WMP2014 !

World Medicine ParkCASE STUDY pt. IV

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

http://www. visualdesignthinking.it

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

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.

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

http://www. visualdesignthinking.it

Digital totem 1080x1920

Smartphone (web)app 1080x1920

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

http://www. visualdesignthinking.it

10 minutes! Content and UI!

share results on Twitter with #VDT #bgws14

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

http://www. visualdesignthinking.it

Some useful tools we use.

From mood boarding to prototyping, and feedback!

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

http://www. visualdesignthinking.it

Pinterest for moodboards!

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

http://www. visualdesignthinking.it

Déjà vu? POST-IT!

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

http://www. visualdesignthinking.it

InvisionApp for prototypes

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

http://www. visualdesignthinking.it

Zurb Foundation for Interactive Wireframes

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

http://www. visualdesignthinking.it

Usersnap! For real, meaning feedback :)

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

http://www. visualdesignthinking.it

Wrap up. How your bike sharing service will look like?

Please share results on Twitter via #VDT #bgws14 :)

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

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.

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

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