Better ways for designers and clients to talk about design decisions and create better communication channels

1. communicating interaction design
getting better, more actionable feedback
from non-designers

2. Hi, I’m Michael
User experience design and strategy consultant
Fjord/Accenture | Salesforce | BAML | Leo Burnett
Creative director
Digital native
Fine artist
Teach experience design at Northwestern University

3. I love interaction design
how do we critique it?
how do we represent it?
how do we improve it?
how do we verbalize it?
How can the next 30 minutes
help you be better at talking
about design?

4. static design principles
gestalt
michaeldain.com

5. static design
print design
wyswiyg

6. static design
interaction changes the design
sometimes for the worse

7. game interaction design
inspirational
http://danielmall.com
my talk will be
less interactive :-(

8. communicating with words
computers are text-centric
word processors
keyboards
email
most of our interactions involve text

9. communicating with images

10. communicating with gestures

11. why is it hard to talk about design?

12. why is it hard to talk about design?

13. why is it hard to talk about design?

14. why is it hard to talk about design?
Fear of looking uninformed
Fear of aesthetic decisions
Fear of unknown
Lack of context

15. -Steve Jobs
“Designing a product is keeping five thousand things in your brain
and fitting them all together in new and different ways to get what
you want. And every day you discover something new that is a
new problem or a new opportunity to fit these things together a
little differently. And it’s that process that is the magic.”

16. -Mike Montiero
“A good designer finds an elegant way to put everything you
need on a page. A great designer convinces you half that shit is
unnecessary.”

17. thoughts about communicating interaction design
how can we make it easier?
1. artifacts
2. fidelity
3. feedback

18. goal
Break down silos and create conversation and
consensus around ideas and designs to connect with
our customers.
How do we learn from our decisions?

19. goal
discuss some tools and techniques
honestly

20. artifacts
Perhaps its the medium, not the
message.
We often view design in 2D
I think we need to show 3D

21. artifacts
eBay Mobile Strategy | Personas
Kate, PayPal Field Sales Rep
Key Attributes
AGE: 31 LOCATION: SAN FRANCISCO, CA
TECHINCAL PROFICIENCY
PAYPAL/EBAY EXPERIENCE
SALESFORCE EXPERIENCE
SALES EXPERIENCE TECHNOLOGY USAGE
40%
30%
10%
20%
KATE
“I want everything more simplified. There is a lot of steps I need to do, and it
is hard for me to muster up the energy to do it all at the end of the day.”
Key Goals
• Personal achievement and recognition
• Be on the top of the sales leader board
• Create memorable experiences for PayPal mer-
chants
• Be more efficient with the administrative part of the
job, so she can sell more
• Have happy customers
Key Painpoints/Frustrations
• Amount of repetitive data entry, from paper to digi-
tal.
• Data entry is done at the end of the day instead of
while on the go.
• Limited/No access to Salesforce while on the go.
• Difficult to plan my day due to ever changing needs.
• Too much time spent on relation mgmt vs. sales.
4 of 6
Kate’s Journey
PRE VISIT POST VISITVISIT
• Google Docs
• Salesforce.com
• Yelp
• Email
SYSTEMS
Looks up merchant
on Yelp and
matches them to
her prospect list on
GDocs and SFDC.
Reviews notes from
past couple of days
to see who she
needs to visit and
any leads.
Uses her iphone
to make a rough
route map to where
she needs to visit in
the morning.
During the meeting,
she shows the
merchant digital
collateral and runs
demos off her iPad
Mini.
She takes notes to
update her records,
both in GDocs as well
as SFDC, and tracks
any follow ups she
needs to make via
email.
As soon as
she leaves the
merchant, she
captures any notes
she didn’t want
to take during the
sales call.
She uses Google
Maps to find her
way to her next
appointment.
At the end of
the day, she
transcribes her
notes into SFDC,
Gdocs, and sends
any follow up
• Paypal Demos
• POS Vendor Demos
• Google Maps
• Google Docs
• Salesforce.com
personas
user research

22. artifacts
drawings
whiteboards
sketches

23. artifacts
wireframes
“blueprints”

24. artifacts
comps
mockup
desirability

25. –Gillian Crampton Smith
“There are three dimensions of an ‘interaction design language.’
In other words, these dimensions make up the interactions
themselves, and as a result they make up the communication
between a user and the screen.”

26. 3D artifacts
1D: words show how the interface talks to the user, what can
they interact with, what guides them to their goal.
2D: storyboard identifies a user and their goal and give a
storyboard of their interactions with the product.
3D: use in a situation or context refers to the physical
hardware, or a mobile device the product is used and time
spent or progress.

27. 1D words
sketch the verbal elements
instructions
examples
microcopy
http://notloremipsum.com/

28. hierarchy
emphasis
media types
indicate dynamic vs static
1D words

29. 1D words
pair designers + IA
pair UX with copywriters
get UX people that can write
netflix: art & copy

30. 1D words - feedback
mural.ly
invision
what is the tone?
what can the user do?
focus on emphasis

31. 2D storyboard
we all understand stories

32. 2D storyboard
indigo studio
comic books

33. 2D storyboard
start the story with your
persona

34. 2D storyboard
take pictures
layer new words
make a video!

35. paper prototypes 2.0
cheap
easy to iterate
2D storyboard

36. 2D storyboard
higher fidelity “wireframe”
show states
more complex verbiage
more text details

37. 2D storyboards
different personas
does the design change?

38. 2D storyboard feedback
easy to tell when story seems ‘wrong’
talk about reducing complexity
talk about when it “loses the plot”

39. 3D - prototypes
higher fidelity
typography
animation
context
emotion

40. 3D - prototypes
show rather than tell
see real emotions
excitement / frustration

41. 3D prototypes
words + stories
let real people try it
see if it holds true
micro-interactions
transitions

42. 3D - prototypes
webflow
uxpin.com
invision.com
proto.io
sketch
framer
axure
HTML

43. 3D - prototype feedback
discuss navigation!
discuss errors
find confusion
understand clickablity
emotion

44. change our artifacts change our feedback
1 sketches with descriptive copy
2 wireframes with story - storyboards
3 put them together and put them in real users hands - prototypes
make people more comfortable talking about “design” when it fits
into the goals of interaction goals
Summary #changeUXdesign
Do this first - add fonts/colors/pictures later! Realize they are one
of the easier elements to change, the other parts are hard! They can
also be dynamic!

45. thank you
Can you now look into the artifacts that help everyone
verbalize satisfaction or dissatisfaction with an
interface?
Please leave comments and keep
the conversation going
@michaeldain
michaeldain.com
michael.dain@gmail.com
bonus

46. bonus
remote teams
mural.co