Kevin and Sophie reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way. Find out what worked and what they learned. In the end, it should be clear that this is a time for experimentation and finding new approaches for new tasks.

1. A NEW
TOOLBOX
S OPH I E SH E PH E R D & K E V I N SH A RON

2. Howdy

3. ATX

4. Disclaimer
We don’t know what we’re doing.

5. Artifact:
A New Toolbox

6. A New Toolbox
Research

7. A New Toolbox
Communication

8. A New Toolbox
Design

9. Research:
Why before what

10. Research
“
…for design to truly be great, [research]
needs to be built into your projects
from the very beginning.”
—Mike Montiero

11. “How do you make a chair?”

12. “Go make mistakes”

13. This sucks.

14. We built it, launched it, it sucks,
and no one cares. Fix it?

15. Rush to MVP

16. That’s a whole ‘nuther talk.

17. Design Research is easy.

18. Interviews

19. Interviews
Stakeholders

20. Interviews
Users

21. Ethnio
ethn.io/

22. Design Values Survey

23. The Design Values Survey
Start a conversation

24. The Design Values Survey
Ask dumb questions

25. The Design Values Survey
Reveal your preconceptions

26. The Design Values Survey
Not everyone will agree

27. The Design Values Survey
“Should the new site look like a
magazine or a newspaper?”

28. The Design Values Survey
“Should the new look reflect the
aesthetics of [
]?”

29. 10 Second Gut Check

30. 10 Second Gut Check
Benchmark

31. 10 Second Gut Check

32. 10 Second Gut Check
Define taste

33. 10 Second Gut Check
Generate content ideas

34. Personality Test

35. Personality Test
“
Finding out who your
customers are is only half the
question. You also have to
understand who you are.”
—Aarron Walter

36. What is the personality of a site?
Voice

37. What is the personality of a site?
Tone

38. What is the personality of a site?
Feel /Mood

44. Communication:
Playing nice with
others

45. Design is a service

46. Service
Business
Goals
User Needs

47. Business Needs
Project goals

48. Business Needs
Requirements

49. Business Needs
Technology

50. User needs
Who is the audience?

51. User needs
Is there a new audience?

52. User needs
How do other people reach
this audience?

53. Client Capabilities
Client design team

54. Client Capabilities
Photography, Video, Infographics

55. Oh no, a dirty word:
Clients

56. You get the clients you deserve

57. Client Communication
“You can’t use that shade of blue… “

58. Client Communication
“Let’s make the logo bigger“

59. Client Communication
“Our CEO’s favorite font is Arial“

60. The Elusive “Fold”
✄

61. weenudge.com/thefold/

62. This sucks.

63. It’s not a collaboration
if you don’t say “no.”

64. “When are you going to show me
something to look at?”

65. Early Design

67. Client Feedback
Restate the goals.

68. Client Feedback
What answers to you need to
move to the next step?

69. A Designer’s Job

70. Responsive
Web Design

71. Traditional Process
Research
UX
Graphic Design
Concept Board
Designer
Front-End Dev
Sub Pages
QA

72. Updated Process
Research
UX
Graphic Design
QA
Style Guide
Front-End Dev
Designer

73. Most of what I do
doesn’t look like a website.

74. Atomic Design

75. Atomic Design

76. Start With Content
• What did we learn from the research?
• Define Content Needs

77. Start With Content
• Sketch
• Collaborate
• Tool to prompt conversation amongst teams

78. Content as Modules

79. Modules as Hierarchy
0
Delete
3
Nice to Have
1
Not needed/
Can’t Maintain
4
Requested
2
Maybe, but not
important
5
Utmost Importance

80. Modules as Hierarchy
0
5
1
4
3
2
2
3
5

81. Modules as Prototypes

82. Modules as Requirements
• Functional Requirements
• Technical Requirements
• Content Requirements

83. Modules as Design Plan
• Which pages have unique layouts?
• Which modules can be designed
independent of layout?

84. Graphic Design
Style Boards
Full Page Comps
Big Screen
Small Screen
PSD vs. Browser

85. “
You Can’t Have Happy
Accidents in the Browser
— Mark Boulton

86. Design Tipping Point
When is it more efficient to move over to
working in the browser?

87. QA
Designer finds bug ➔ Files bug in Sifter ➔
Developer has question ➔ developer fixes
bug ➔ assign back to designer ➔ designer
looks at page to confirm ➔ designer closes
ticket
Designer Finds Bug ➔ Designer Fixes Bug

88. Style Guide
Design
System
Front-End
Code

89. Style Guide
Allows designer to see design
system through the lens of
front end code.

90. Tool for Clients
• Module Guide
• Visual Reference
• Technical Reference
• Content Guide

91. Experiment

92. April 1st, 2012

93. “
You’re going to design this site
using Keynote.”
—Kevin Sharon

94. “
“
“
Like, Keynote Keynote?”
Is this an April Fool’s joke?”
He’s serious. Deep breathes.”
—Sophie Shepherd (in her head)

96. Photoshop ≠ Browser
• Wrapping Text
• Multiple Widths
• Rounded Corners
• Consistent Type

97. Tools ≠ Precious
There is no “right” way of doing this stuff.

98. Design:
The details matter

99. “Designers”

100. Don’t be the “designer (who codes).”
Be a designer with a bigger toolbox.

101. This stuff ain’t easy

102. The one truth
“
FAIL. You’re doing it wrong… “
—the twitters
#jerks

103. That’s
Bullshit

104. No one knows what they’re doing.

105. Empathy

106. UX is everyone’s job.

107. The one true process is…

108. It all depends.

109. Process is decided by
• The required
deliverables
• The expected
outcomes
• The client’s needs
• The client’s
personality
• Audience needs
• Budget
• Timeline
• Project teams
• Time zones
• Hurricanes
• The moon and
tides

110. Wireframes

111. Wireframes
whiteboard

112. Wireframes

113. Designer
=
Communicator

114. Don’t make easy the goal.

115. How do you scramble an egg?
+
+

116. youtu.be/PUP7U5vTMM0

117. Thanks!
Kevin Sharon
@kevinsharon
Sophie Shepherd
@sophshepherd