+

WATERFALLS ARE GREAT TO WATCH…

DIGITAL DESIGN THINKING.

+

WAIT, WHO ARE YOU?

DIGITAL DESIGN THINKING.

Carlo Frinolli

www.carlofrinolli.it • www.nois3.it @carl0s_

CEO + FOUNDER

Experience Designer, Founder & CEO @ nois3, I work, teach and live in Rome (Italy) – not necessarily in this order.

ITERATIVE DESIGN

In case you were asking… yep I’m Italian, I can cook :P

We were saying… Waterfalls: great to watch.

ITERATIVE DESIGN

Old but goldSo typical though.

Double diamonds are clients’ best friends…

Let’s try and clean some mess here.

ITERATIVE DESIGN

ITERATIVE DESIGN

The four phases… + 1… Told ya

1. Discover 2. Explore & Define 3. Prototype 4. Test 5. Repeat

+

1. DISCOVER

DIGITAL DESIGN THINKING.

First off: “who’s gonna use it?”

Think of two customers.“

One of them could be Prince Charles and the other one Ozzy Osbourne.

Both were born in 1948, male, raised in Great Britain, married, successful and wealthy. Furthermore, both of them have at least two children, like dogs and love the Alps…

T H I S I S S E R V I C E D E S I G N T H I N K I N G . ( VA R I O U S AU T H O R S )

ITERATIVE DESIGN

ITERATIVE DESIGN

Where do we find them?

Aren’t them all on a social network?

ITERATIVE DESIGN

ITERATIVE DESIGN

DIGITAL DESIGN THINKING.

+

We design responsive websites and digital strategies to connect organizations to their customers.

ITERATIVE DESIGN

You too might be tweeting… go on with #mobiletea!

Lots of people, including you, use social media continuously. They share moments, like contents, produce memories, profile themselves also unconsciously.

Okay, someone could be in the grey zone… But that’s another story.

Sharing is caring?There are zillions of data voluntarily created, they just wait to be interpreted and used.

F O R I N S TA N C E … H O W M A N Y O F YO U H AV E TA K E N A LO O K TO G O O G L E M A P S H I S TO R Y ? : )

ITERATIVE DESIGN

Reputation: you can either build it, or suffer from it. — Matteo Flora

“

ITERATIVE DESIGN

What if we analyse online conversations to get inspired on behavioural patterns and hidden needs that are not really or badly addressed? Using different sources and intersecting different results.

Customers & needs discoveryUnderstanding the Zero Moment of Truth

ITERATIVE DESIGN

ITERATIVE DESIGN

Monitoring platform, even powerful ones like Crimson Hexagon or Radian6 are not enough alone. On one hand people have different behaviours on different social networks, on the other because numbers don’t tell the story alone but they are a necessary starting point.

Not only auto-magicHINT! Humans needed to analyse data :)

ITERATIVE DESIGN

Some procedural steps

ITERATIVE DESIGN

C O N V E R S AT I O N S R E P O RT

DATA D R I V E N R E S U LT S & C O N C L U S I O N S

ITERATIVE DESIGN

Not only collecting conversations and cleaning up the messAnalysis of the

CONVERSATIONS

1

Choose keywords: themes, topics or hashtags to monitorElaboration of a

SEARCH HYPOTHESIS

0

Enriching results with human analysts

Enhancement of DATA & REVISION

2

User INTERVIEWS

3

Creation of the PERSONAS

4

“C L A S S I C ” U X P RO C E S S

Ok, Google... I’m confused.Empty search form might make you uncomfortable.

And if you’re looking for brand’s name, everything seems perfect.

ITERATIVE DESIGN

And the answer is 42.

Think as a user! Search IntentionallyStart from query, not from branded keywords

A user is not only a target. S/he’s a person who doesn’t search for an abstract service, or by service name, but for concrete solutions to her/his problem, precise informations.

“ How? Where? How come I can’t...?

ITERATIVE DESIGN

On Social Networks users deals directly with a brand mentioning handles, hashtag, products & services, links... Tells her/his issues, her/his needs, frustrations: her/his user-story.

F*** Google, Ask Tweet ME!People look for a dialog, a direct relationship with a brand.

ITERATIVE DESIGN

Search'em all. Data are everywhere.Nowadays there are search tools on most platforms: go monitor!

ITERATIVE DESIGN

Create a usable datasetDocumenting during the process helps the overall results

Keyword, topics Sources analysed and monitored Tools used Timeframe of analysis Anomalies or other events that influence the collected data. (es. viral content, breaking news)

ITERATIVE DESIGN

Defining insightsAnalysis and clustering of data is the most important part

ITERATIVE DESIGN

User interviews & ethnographyNarrative interviews & user research

ITERATIVE DESIGN

Convincing to tell you about satisfying experiences, frustration or even just anecdotes about the need you’re exploring tells you more than a thousand of quantitative research, right Mr. Osbourne?

Heisenberg, my friend…Not Bryan Cranston, the other guy.

ITERATIVE DESIGN

The observer influences the experiment.

Don’t pretend to be objective. You are human and people who you’re going to interview are human too.

+

2. EXPLORE & DEFINE

DIGITAL DESIGN THINKING.

UX is 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.

Wait, who’s the missing stakeholder?Companies or clients who want you to build something for them

ITERATIVE DESIGN

Build together with your clients, not for them

Co-creating and collaborating is way smarter and effective

ITERATIVE DESIGN

Digging in companies values is not easy. Companies are pretty used to giving you briefs or suggesting you the solution you should build for them.

That’s wrong. Ask them the need. How do we do it?

Discovery workshopsGet the client around the table with you, and have her/him play

ITERATIVE DESIGN

How do we dig to get meaningful informations?

Playing serious game with all the possible players

ITERATIVE DESIGN

Gamestormingnever heard of it?

ITERATIVE DESIGN

Cover story

Through this game all participants could envision the most incredible success for their project, or product.

In a nutshell you’ll discover what idea of success they might have.

Let’s envision the most ambitious success ever

ITERATIVE DESIGN

Pre-mortem

Envisioning the reason why we failed is one of the best ways to underline weaknesses and to let them emerge on the surface. You will be then able to avoid them or to address them. Or simply to assess them.

If they’re not superstitious

ITERATIVE DESIGN

Value proposition canvas

ITERATIVE DESIGN

Oh boy! I wanna do something, this stuff is so boring…

ITERATIVE DESIGN

It’s time to explore and brainstorm about our app, or whatever digital product is, thinking of our users and their expected results or needs. It’s time to design for their needs.

Design for their stories. But don’t design forever…

Now what?We’ve discovered so much about our users and the company…

ITERATIVE DESIGN

Waterfalls… no way: MVP way to go!

ITERATIVE DESIGN

Everyone loves stories,even developers.

© Kelly Mac Morris

ITERATIVE DESIGN

ITERATIVE DESIGN

As a <user> I want to do <action> in order to <benefit>“

Once you clearly understand on an abstract level what are the users’ needs and the company’s values that might match them, designing for people experience can be easier. But also test (on a human level :P) if your implementation works. And prioritise all the stories that deliver most of the solutions.

User stories help designers tooFrom great abstraction to small implementation details

ITERATIVE DESIGN

Jam sessions!

ITERATIVE DESIGN

Have you ever planned to cook some dishes without checking if all the ingredients are in place? Or if your local grocery have them all? Frustrating? This is not going to be developers’ problem. You’re the one that is not gonna eat.

Cooking without ingredientsHINT! Design Sprints or Co-Design Jams!

ITERATIVE DESIGN

Designing solutions without your devs is crazy too. Hiding in your cubicle, getting a perfect Photoshop mockup while they’re not involve co-creating it…

Well you might be lucky. And after all who uses Photoshop anymore!?

Designing with no devs? Just like the dish issue… Let’s establish some rules..

ITERATIVE DESIGN

There are so many ways to address a need. You as designer can find some sexy ones, but sometimes the dev team will hate you. So badly. Involve them in a preliminary exploration of concept will save you time, and headaches.

It’s time to explore ideas and conceptsBroken down into stories and validate them against users’ stories.

ITERATIVE DESIGN

Information Architecture - Card Sorting

ITERATIVE DESIGN

Wireframing - exploring ideas together

ITERATIVE DESIGN

+

3. PROTOTYPE

DIGITAL DESIGN THINKING.

Sketching and implementing the solution

ITERATIVE DESIGN

Ok great. You have tons of different tools. And this really depends on your workflow.

If you’re using Sketch, for example, Invisionapp or Marvelapp have plugins for it that helps you prototype better experiences.

Now you have concepts to play with.We can start building and testing.

ITERATIVE DESIGN

Ingredients!

ITERATIVE DESIGN

Atomic design: style guides

ITERATIVE DESIGN

Atomic design: Style tiles

ITERATIVE DESIGN

ITERATIVE DESIGN

Photoshop, what’s that? Sketch!

Marvelapp

ITERATIVE DESIGN

An example

ITERATIVE DESIGN

Our first try, dated back to 2014

ITERATIVE DESIGN

+

4. TEST & REPEAT

DIGITAL DESIGN THINKING.

Usability testing

ITERATIVE DESIGN

Don’t imitate me! Don’t put it on slide 63 of your process! Test something as soon as you can, even from paper prototypes. Have your Information Architecture tested, with tree testing, collect early feedback on wireframes, data and impressions.

Power is nothing without controlAs soon as possible: testing testing testing

ITERATIVE DESIGN

Remote user tracking

ITERATIVE DESIGN

Are results as expected and users happy?

Go on building next features or iterate on the present release. Or both.

ITERATIVE DESIGN

This process might never end

ITERATIVE DESIGN

Thanks for your attention.

ITERATIVE DESIGN

I’m still Carlo Frinolli

www.carlofrinolli.it • www.nois3.it @carl0s_

STILL CEO + FOUNDER

Still an Experience Designer, Founder & CEO @ nois3, I still work, teach and live in Rome (IT) – not necessarily in this order, nothing changed during this talk, I hope :D

ITERATIVE DESIGN