design for your audience

34
Using UX, Stories, and WordPress to connect with your audience. DESIGN FOR YOUR AUDIENCE WALTER BREAKELL #wcdenver @walterbreakell

Upload: walter-breakell

Post on 28-Jul-2015

1.027 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Design for your audience

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

W A LT E R B R E A K E L L

#wcden ve r @wa l t e r b re a ke l l

Page 2: Design for your audience

W A 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

Page 3: Design for your audience

W O R K

Page 4: Design for your audience

W O R K

Page 5: Design for your audience

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

Page 6: Design for your audience

D E S I G N F O R Y O U R A U D I E N C E | W A 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.

Page 7: Design for your audience

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

Page 8: Design for your audience

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

Page 9: Design for your audience

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 R Y 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 ?

Page 10: Design for your audience

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 ?

Page 11: Design for your audience

F I X T H E M !

Page 12: Design for your audience

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 ?

Page 13: Design for your audience

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

Page 14: Design for your audience

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

Page 15: Design for your audience

S T E V E K R U G

• Don’t Make Me Think Revisited

• Rocket Surgery Made Easy

Page 16: Design for your audience

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!

Page 17: Design for your audience

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 R Y

Page 18: Design for your audience

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

Page 19: Design for your audience

D E S I G N F O R Y O U R A U D I E N C E | W A 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.

Page 20: Design for your audience

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

Page 21: Design for your audience

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

Page 22: Design for your audience

– Y O U R C U S T O M E R

“They Understand Me!”

Page 23: Design for your audience
Page 24: Design for your audience

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

Page 25: Design for your audience

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

Page 26: Design for your audience

D E S I G N F O R Y O U R A U D I E N C E | W A 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

Page 27: Design for your audience

D E S I G N F O R Y O U R A U D I E N C E | W A 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

Page 28: Design for your audience

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 ?

Page 29: Design for your audience

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?

Page 30: Design for your audience

– 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.” ”

Page 31: Design for your audience

Which one do you want to read?

Page 32: Design for your audience

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

Page 33: Design for your audience

U X + S T O R Y + 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 | W A LT E R B R E A K E L L

Page 34: Design for your audience

W A 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 r e a k e l l . c o m

@ w a l t e r b r e a k e l l