WordCamp Denver 2015. This talk covered how to use Stories, WordPress, and Experience Design to help you connect with your audience. There are some simple techniques that will help you connect the dots and create a better relationship with your audience.

1. Using UX, Stories, and WordPress to connect
with your audience.
D E S I G N F O R Y O U R A U D I E N C E
WA LT E R B R E A K E L L
# w c d e n v e r @ w a l t e r b re a k e l l

2. WA LT E R B R E A K E L L
• Creative Director/Art Director
• UX Design and Strategy
• Graphic and Web Designer
• Commercials and Feature Films
• College Teacher

3. W O R K

4. W O R K

5. I T I S T H E E X P E R I E N C E Y O U R C U S T O M E R H A S
W H E N U S I N G Y O U R P R O D U C T O R S E R V I C E .
U X = U S E R E X P E R I E N C E

6. D E S I G N F O R Y O U R A U D I E N C E | WA LT E R B R E A K E L L
The more we understand our customers the easier
it is to communicate or connect with them.

7. P E R S O N A
U N D E R S TA N D Y O U R
C U S T O M E R

8. P E R S O N A E X A M P L E

9. C U S T O M E R ’ S
O B J E C T I V E
W H A T A R E T H E Y T RY I N G T O D O
W H E N T H E Y V I S I T Y O U R S I T E ?

10. C U S T O M E R
C O N C E R N S
W H A T I S S U E S , P R O B L E M S , O R C O N C E R N S D O
T H E Y H A V E A C C O M P L I S H I N G T H E I R
O B J E C T I V E ?

11. F I X T H E M !

12. H O W D O W E F I N D T H E C U S T O M E R ’ S
O B J E C T I V E S A N D P R O B L E M S ?

13. A S K T H E M !
O B S E R VAT I O N | U S E R T E S T I N G

14. R U N A T E S T
• Test at least 5 people
• Test tasks or scenarios that mirror what the
customer would do on the site.
• Take notes, record the session.
• Prioritize the issues.
• Fix the most important issue/issues.
• Test again.
O V E R S I M P L I F I E D V E R S I O N

15. S T E V E K R U G
• Don’t Make Me Think
Revisited
• Rocket Surgery Made Easy

16. A C T O N T H E T E S T R E S U LT S
• They could not find what they were looking for…
Are your navigation labels clear?
• What words did your customer use to describe
content or areas of the site? Are you using the same
words that they use?
• When you feel good about the changes you made…
TEST AGAIN!

17. Y O U R S T O R I E S S H O U L D H E L P Y O U R
C U S T O M E R S W I T H T H E I R C O N C E R N S .
S T O RY

18. T H E I R S T O R I E S
W E R E F O C U S E D
O N T H E I R
P E R S P E C T I V E .
C A S E S T U D Y:
S E A D W E L L E R S

19. D E S I G N F O R Y O U R A U D I E N C E | WA LT E R B R E A K E L L
After listening to the concerns and fears of their
customers we told stories that addressed those
fears and concerns.

20. W I L L I D I E ?
!
I A M C L A U S T R O P H O B I C .
!
W H AT H A P P E N S I F…
C U S T O M E R C O N C E R N S

21. A D D R E S S T H E I R C O N C E R N S
• Help them achieve their goals
• Build Trust
• Create Connection with Your Customers
• Show them you are Listening
• Show them you Care

22. – Y O U R C U S T O M E R
“They Understand Me!”

24. W E F O C U S O N
W H AT W E
K N O W.
D E S I G N E R S , D E V E L O P E R S

25. F O C U S O N
L AY O U T, C O L O R ,
T Y P E , K E R N I N G ,
I M A G E S , E T C …
D E S I G N E R T H I N K

26. D E S I G N F O R Y O U R A U D I E N C E | WA LT E R B R E A K E L L
We need to look through the eyes of our customer.
Design/Developer Thinking ≠ Customer Thinking

27. D E S I G N F O R Y O U R A U D I E N C E | WA LT E R B R E A K E L L
WordPress allows us to focus on the important
things… The Content, The Story, The Experience

28. D E S I G N A D D S
VA L U E .
B U T W H A T A B O U T D E S I G N ?

29. D E S I G N F O R Y O U R A U D I E N C E
• Design to solve problems and support the content
• Design for Readability
• Design for Scan-ability
• Is The Content Inviting?
• Are the navigation and interactions clear?

30. – N I E L S E N N O R M A N G R O U P
“On the average Web page, users have time to
read at most 28% of the words during an average
visit; 20% is more likely.”
”

31. Which one do you want to read?

32. E S TA B L I S H E S A
P L AT F O R M T O M A N A G E
Y O U R C O N T E N T A N D
C R E AT E C L E A R
C O M M U N I C AT I O N S .
W O R D P R E S S

33. U X + S T O RY + W O R D P R E S S = T O O L S
T H AT W I L L H E L P Y O U
D E S I G N F O R Y O U R A U D I E N C E .
D E S I G N F O R Y O U R A U D I E N C E | WA LT E R B R E A K E L L

34. WA LT E R B R E A K E L L
U X B O U L D E R
w a l t e r b re a k e l l . c o m
@ w a l t e r b re a k e l l