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