Web design projects can be excruciatingly complex, often fraught with hidden stakeholders, nebulous business goals, and indiscriminate design approvals. With the explosion of Responsive Web Design, this equation has only gotten more complex. How are we able to better predict the common hurdles that can keep our projects from becoming a success? Instead of being caught off-guard when new issues arise, staying ahead of these frequent pain points can keep you focused on crafting beautiful, results-driven solutions for you clients. In this session, you’ll learn how to build a design process and deliverables strategy to ensure a successful engagement with your clients that keeps the communication with them open, fluid, and productive. We will break down the design process for Responsive Web Design to better diagnose what design artifacts work best when it comes to communicating design-thinking in the new multi-device customer landscape. You’ll gain confidence, learning how to break down traditional client-versus-vendor roles and, ultimately, shape a course of action that equates to a successful, productive, and collaborative relationship with your clients. Top 3 take-aways: Better diagnose what type of design deliverable works best for different problems and different clients Understand the common pitfalls that befall a Responsive Web Design project to better predict and get ahead of these issues Reevaluate the methods in how you communicate with your clients since traditional client-vendor working relationships are no longer enough

1. DESIGNING FOR
SUCCESS WITH
CLIENT INVOLVEMENT
Web Design Isn’t Ge﬙ing Easier Thanks to RWD
@CCASHDOLLAR

2. DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

3. DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

4. Design Intent
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

5. “
Many of our design deliverables,
such as wireframes, proto﬚pes,
and s﬚le guides, are as much
about ge﬙ing agreement on what
we intend as they are to move our
intentions closer to done. But the
deliverables themselves do not
produce the designs.”
—“Design is the Rendering of Intent” (Spool, 2013)
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

6. Your design solution is only
as strong as your abili﬚ to
communicate its merits.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

7. Always be closing
educating.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

8. Designing is Teaching
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

9. Create a
common language.
!
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

10. “
You need to hear a word seven
times to absorb it.”
—Señora Foxall, 9th Grade Spanish Teacher, 1992
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

11. Language: Design Characteristics
In relationship to the current
aesthetic, the new design
should...
1 2 3 4 5 6 7 8 9 10
Strictly
Adhere
Be a Radical
Departure
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

12. Language: Design Characteristics
In relationship to the current
aesthetic, the new design
should...
Your Score
1 2 3 4 5 6 7 8 9 10
Strictly
Adhere
Be a Radical
Departure
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

13. Language: Design Characteristics
In relationship to the current
aesthetic, the new design
should...
Client Score
1 2 3 4 5 6 7 8 9 10
Strictly
Adhere
Be a Radical
Departure
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

14. Language: Design Characteristics
In relationship to the current
aesthetic, the new design
should...
Your Score Client Score
1 2 3 4 5G a p i n 6 7 8 9 10
Strictly
Adhere
Be a Radical
Departure
Understanding
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

15. Language: Design Benchmarking
Weak and
Forge﬙able
Hogwarts School of
Witchcraſt and Wizardry
Memorable and
Compelling
1 2 3 4 5
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

16. Language: Design Benchmarking
Weak and
Forge﬙able
Hogwarts School of
Witchcraſt and Wizardry
Memorable and
Compelling
1 2 3 4 5
Your Score
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

17. Language: Design Benchmarking
Weak and
Forge﬙able
Hogwarts School of
Witchcraſt and Wizardry
Memorable and
Compelling
1 2 3 4 5
Client Score Your Score
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

18. Language: Design Benchmarking
Weak and
Forge﬙able
Hogwarts School of
Witchcraſt and Wizardry
Memorable and
Compelling
1 2 3 4 5
Discuss why.
Client Score Your Score
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

19. Language: Check the Standard
Deviation
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

20. Time The curse of
increasing fideli﬚
Time cost of explaining
design ideas
Artifact Fideli﬚
The Designer As Curator
designmind.frogdesign.com/blog/the-designer-as-curator.html
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

21. Time
The curse of
increasing fideli﬚
Time cost of demonstrating
design-thinking
Artifact Fideli﬚
The Designer As Curator
designmind.frogdesign.com/blog/the-designer-as-curator.html
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

22. Time
In RWD, taking
too much time to
make a decision is
a risk.
Artifact Fideli﬚
The Designer As Curator
designmind.frogdesign.com/blog/the-designer-as-curator.html
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

23. Time
Find the highest
amount of consent
with the least
amount of time
spent.
Artifact Fideli﬚
The Designer As Curator
designmind.frogdesign.com/blog/the-designer-as-curator.html
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

24. Minimum
Effective Dosage
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

25. Minimum
Effective Artifact
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

26. Use MEAs to formulate
the process that
matches your situation.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

27. Design Intent:
Content & UX

28. Aim higher.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

29. Validate thinking.
Get approval.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

30. Video of AECF wireframe

31. Adjust
and
inform.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

32. Minimum
effective
artifact
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

33. Design Intent:
Graphic Design.

34. Questions to
determine the MEA:
Is the brand established or evolving?
Who owns it?
Is it entirely new?
Who needs to approve it? Do they understand
abstraction?
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

35. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

36. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

37. Mood Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

38. Mood Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

39. Helps hone in on emotion
Good for stakeholders who
are indecisive about
brand/identi﬚
Good for new brands or
brands in flux
!
!
Poor at solving anything
related to web layout,
functionali﬚, UX
Familiari﬚ is expected
!
Mood Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

40. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

41. Sketches
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

42. Sketches
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

43. Easy to create and easy to
iterate
Good for ge﬙ing “big
picture” consensus
!
!
Poor for stakeholders
outside of the project team
Detail is depended on
fideli﬚
Sketches
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

44. S﬚le Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

45. S﬚le Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

46. Mimics web conventions
Mixes brand/identi﬚ with
UI pa﬙erns and content
Good for small teams with
web-comfortable
stakeholelders
Works for new or changing
brands
!
Can be misconstrued
Doesn’t diagnose
experience or functionali﬚
!
S﬚le Boards
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

47. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

48. Full Compositions
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

49. Full Compositions
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

50. Full Compositions
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

51. Full Compositions
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

52. Works for stakeholders
of all levels
Most accurate
representation outside
of code
Hints to functionali﬚
!
Time consuming
Assumes the view you
design is the most
important view
Full Compositions
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

53. Design Intent:
Behavior & Interaction

54. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

55. High Risk
COMPREHENSIVE MOCK-UPS
TRADITIONAL WIREFRAMES
MOOD BOARDS
SKETCHES
Low Risk
HTML WIREFRAMES
High
Return
Low
Return
ANIMATION PROTOTYPE
STYLE BOARDS
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

56. And then content
slides under the
layer-thing and
BOOM!”
“

57. Coldwell Banker:
Animation tactics to
determine behavior

58. Old Club Nintendo Coin
animation

59. Presenting Design with Motion Proto﬚pes
thinkdesigninteract.com/post/presenting-designs-with-motion-proto﬚pes/

60. “
At FastSpot we use AſterEffects
to create our proto﬚pes. This
gives us the most control,
allows us to work quickly and
ensures quali﬚ time is spent on
the design itself, not the
creation of the proto﬚pes.”
—Yiannia Mathioudakis, Senior Designer at FastSpot
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

61. Presenting Design with Motion Proto﬚pes
thinkdesigninteract.com/post/presenting-designs-with-motion-proto﬚pes/

62. Feedback ma﬙ers.
Coach clients on how to
provide it.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

63. If the client goes
against the strategy...
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

64. If the client goes
against the strategy...
¯_(ツ)_/¯
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

65. “
You should initiate a direct
conversation with the client
regarding why he is
contradicting agree-upon
standards, and capture the
rationale in writing.”
—David Sherwin, Success By Design
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

66. Avoid the big reveal.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

67. Avoid the big reveal.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

68. Start thinking
about design systems
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

69. “
Design depends largely on constraints.
Here is one of the few effective keys to
the design problem — his willingness
and enthusiasm for working within
these constraints. Constraints of price,
of size, of strength, of balance, of
surface, of time and so forth.”
!
—Charles Eames
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

70. Harvard Business School
hbs.edu

71. S﬚le Guide
for Harvard Business School

72. S﬚le Guide
for Harvard Business School

73. S﬚le Guide
for Harvard Business School

74. S﬚le Guide
for Harvard Business School

75. This is also called
Atomic modular
design
pa﬙ern lab
pa﬙ernlab.io

76. Combine to
Craſt a
Powerful
Design
Process.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

77. Everything *Is*
Awesome.
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

78. ARTICLES & RESOURCES
The Designer As Curator http://designmind.frogdesign.com/blog/the-designer-as-curator.html
Design Is The Rendering of Intent http://www.uie.com/articles/design_rendering_intent/
Zurb Foundation http://foundation.zurb.com/
Presenting Designs with Motion Prototypes http://www.thinkdesigninteract.com/
post/presenting-designs-with-motion-prototypes/
Pattern Lab http://patternlab.io
HBS Online Style Guide Pattern Lab http://www.hbs.edu/marketing/web-development/
“Gut Check” Design Exercise http://goodkickoffmeetings.com/2010/04/the-20-second-gut-test/
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR

79. COLOPHON
The typeface is Breakers by Kostic Type Foundry.
http://www.myfonts.com/foundry/Kostic/
Icons adapted from a set entitled Lil Pages by Lil
Squid on Creative Market: https://
creativemarket.com/lilsquid
DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT HOW INTERACTIVE DESIGN CONFERENCE 2014 @CCASHDOLLAR