A NEW
TOOLBOX
S OPH I E SH E PH E R D & K E V I N SH A RON
Howdy
ATX
Disclaimer

We don’t know what we’re doing.
Artifact:
A New Toolbox
A New Toolbox

Research
A New Toolbox

Communication
A New Toolbox

Design
Research:
Why before what
Research

“

…for design to truly be great, [research]
needs to be built into your projects
from the very beginning.”

—Mi...
“How do you make a chair?”
“Go make mistakes”
This sucks.
We built it, launched it, it sucks,
and no one cares. Fix it?
Rush to MVP
That’s a whole ‘nuther talk.
Design Research is easy.
Interviews
Interviews

Stakeholders
Interviews

Users
Ethnio

ethn.io/
Design Values Survey
The Design Values Survey

Start a conversation
The Design Values Survey

Ask dumb questions
The Design Values Survey

Reveal your preconceptions
The Design Values Survey

Not everyone will agree
The Design Values Survey

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

“Should the new look reflect the
aesthetics of [
]?”
10 Second Gut Check
10 Second Gut Check

Benchmark
10 Second Gut Check
10 Second Gut Check

Define taste
10 Second Gut Check

Generate content ideas
Personality Test
Personality Test

“

Finding out who your
customers are is only half the
question. You also have to
understand who you are...
What is the personality of a site?

Voice
What is the personality of a site?

Tone
What is the personality of a site?

Feel /Mood
Communication:
Playing nice with
others
Design is a service
Service

Business
Goals

User Needs
Business Needs

Project goals
Business Needs

Requirements
Business Needs

Technology
User needs

Who is the audience?
User needs

Is there a new audience?
User needs

How do other people reach
this audience?
Client Capabilities

Client design team
Client Capabilities

Photography, Video, Infographics
Oh no, a dirty word:
Clients
You get the clients you deserve
Client Communication

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

“Let’s make the logo bigger“
Client Communication

“Our CEO’s favorite font is Arial“
The Elusive “Fold”

✄
weenudge.com/thefold/
This sucks.
It’s not a collaboration
if you don’t say “no.”
“When are you going to show me
something to look at?”
Early Design
Client Feedback

Restate the goals.
Client Feedback

What answers to you need to
move to the next step?
A Designer’s Job
Responsive
Web Design
Traditional Process
Research

UX

Graphic Design

Concept Board

Designer

Front-End Dev

Sub Pages

QA
Updated Process
Research

UX

Graphic Design

QA
Style Guide

Front-End Dev
Designer
Most of what I do
doesn’t look like a website.
Atomic Design
Atomic Design
Start With Content
• What did we learn from the research?
• Define Content Needs
Start With Content
• Sketch
• Collaborate
• Tool to prompt conversation amongst teams
Content as Modules
Modules as Hierarchy
0

Delete

3

Nice to Have

1

Not needed/
Can’t Maintain

4

Requested

2

Maybe, but not
important
...
Modules as Hierarchy

0

5

1

4

3

2

2

3

5
Modules as Prototypes
Modules as Requirements
• Functional Requirements
• Technical Requirements
• Content Requirements
Modules as Design Plan
• Which pages have unique layouts?
• Which modules can be designed
independent of layout?
Graphic Design

Style Boards
Full Page Comps
Big Screen
Small Screen

PSD vs. Browser
“

You Can’t Have Happy
Accidents in the Browser

— Mark Boulton
Design Tipping Point
When is it more efficient to move over to
working in the browser?
QA
Designer finds bug ➔ Files bug in Sifter ➔
Developer has question ➔ developer fixes
bug ➔ assign back to designer ➔ desig...
Style Guide

Design
System

Front-End
Code
Style Guide
Allows designer to see design
system through the lens of
front end code.
Tool for Clients
• Module Guide
• Visual Reference
• Technical Reference
• Content Guide
Experiment
April 1st, 2012
“

You’re going to design this site
using Keynote.”

—Kevin Sharon
“
“
“

Like, Keynote Keynote?”
Is this an April Fool’s joke?”
He’s serious. Deep breathes.”

—Sophie Shepherd (in her head...
Photoshop ≠ Browser
• Wrapping Text
• Multiple Widths

• Rounded Corners
• Consistent Type
Tools ≠ Precious
There is no “right” way of doing this stuff.
Design:
The details matter
“Designers”
Don’t be the “designer (who codes).”
Be a designer with a bigger toolbox.
This stuff ain’t easy
The one truth

“

FAIL. You’re doing it wrong… “

—the twitters

#jerks
That’s

Bullshit
No one knows what they’re doing.
Empathy
UX is everyone’s job.
The one true process is…
It all depends.
Process is decided by
• The required
deliverables
• The expected
outcomes
• The client’s needs
• The client’s
personality
...
Wireframes
Wireframes

whiteboard
Wireframes
Designer
=
Communicator
Don’t make easy the goal.
How do you scramble an egg?

+

+
youtu.be/PUP7U5vTMM0
Thanks!
Kevin Sharon
@kevinsharon

Sophie Shepherd
@sophshepherd
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
Upcoming SlideShare
Loading in …5
×

A New Toolbox: Artifact Providence 2013

337 views

Published on

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.

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
337
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

A New Toolbox: Artifact Providence 2013

  1. 1. A NEW TOOLBOX S OPH I E SH E PH E R D & K E V I N SH A RON
  2. 2. Howdy
  3. 3. ATX
  4. 4. Disclaimer We don’t know what we’re doing.
  5. 5. Artifact: A New Toolbox
  6. 6. A New Toolbox Research
  7. 7. A New Toolbox Communication
  8. 8. A New Toolbox Design
  9. 9. Research: Why before what
  10. 10. Research “ …for design to truly be great, [research] needs to be built into your projects from the very beginning.” —Mike Montiero
  11. 11. “How do you make a chair?”
  12. 12. “Go make mistakes”
  13. 13. This sucks.
  14. 14. We built it, launched it, it sucks, and no one cares. Fix it?
  15. 15. Rush to MVP
  16. 16. That’s a whole ‘nuther talk.
  17. 17. Design Research is easy.
  18. 18. Interviews
  19. 19. Interviews Stakeholders
  20. 20. Interviews Users
  21. 21. Ethnio ethn.io/
  22. 22. Design Values Survey
  23. 23. The Design Values Survey Start a conversation
  24. 24. The Design Values Survey Ask dumb questions
  25. 25. The Design Values Survey Reveal your preconceptions
  26. 26. The Design Values Survey Not everyone will agree
  27. 27. The Design Values Survey “Should the new site look like a magazine or a newspaper?”
  28. 28. The Design Values Survey “Should the new look reflect the aesthetics of [ ]?”
  29. 29. 10 Second Gut Check
  30. 30. 10 Second Gut Check Benchmark
  31. 31. 10 Second Gut Check
  32. 32. 10 Second Gut Check Define taste
  33. 33. 10 Second Gut Check Generate content ideas
  34. 34. Personality Test
  35. 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. 36. What is the personality of a site? Voice
  37. 37. What is the personality of a site? Tone
  38. 38. What is the personality of a site? Feel /Mood
  39. 39. Communication: Playing nice with others
  40. 40. Design is a service
  41. 41. Service Business Goals User Needs
  42. 42. Business Needs Project goals
  43. 43. Business Needs Requirements
  44. 44. Business Needs Technology
  45. 45. User needs Who is the audience?
  46. 46. User needs Is there a new audience?
  47. 47. User needs How do other people reach this audience?
  48. 48. Client Capabilities Client design team
  49. 49. Client Capabilities Photography, Video, Infographics
  50. 50. Oh no, a dirty word: Clients
  51. 51. You get the clients you deserve
  52. 52. Client Communication “You can’t use that shade of blue… “
  53. 53. Client Communication “Let’s make the logo bigger“
  54. 54. Client Communication “Our CEO’s favorite font is Arial“
  55. 55. The Elusive “Fold” ✄
  56. 56. weenudge.com/thefold/
  57. 57. This sucks.
  58. 58. It’s not a collaboration if you don’t say “no.”
  59. 59. “When are you going to show me something to look at?”
  60. 60. Early Design
  61. 61. Client Feedback Restate the goals.
  62. 62. Client Feedback What answers to you need to move to the next step?
  63. 63. A Designer’s Job
  64. 64. Responsive Web Design
  65. 65. Traditional Process Research UX Graphic Design Concept Board Designer Front-End Dev Sub Pages QA
  66. 66. Updated Process Research UX Graphic Design QA Style Guide Front-End Dev Designer
  67. 67. Most of what I do doesn’t look like a website.
  68. 68. Atomic Design
  69. 69. Atomic Design
  70. 70. Start With Content • What did we learn from the research? • Define Content Needs
  71. 71. Start With Content • Sketch • Collaborate • Tool to prompt conversation amongst teams
  72. 72. Content as Modules
  73. 73. 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
  74. 74. Modules as Hierarchy 0 5 1 4 3 2 2 3 5
  75. 75. Modules as Prototypes
  76. 76. Modules as Requirements • Functional Requirements • Technical Requirements • Content Requirements
  77. 77. Modules as Design Plan • Which pages have unique layouts? • Which modules can be designed independent of layout?
  78. 78. Graphic Design Style Boards Full Page Comps Big Screen Small Screen PSD vs. Browser
  79. 79. “ You Can’t Have Happy Accidents in the Browser — Mark Boulton
  80. 80. Design Tipping Point When is it more efficient to move over to working in the browser?
  81. 81. 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
  82. 82. Style Guide Design System Front-End Code
  83. 83. Style Guide Allows designer to see design system through the lens of front end code.
  84. 84. Tool for Clients • Module Guide • Visual Reference • Technical Reference • Content Guide
  85. 85. Experiment
  86. 86. April 1st, 2012
  87. 87. “ You’re going to design this site using Keynote.” —Kevin Sharon
  88. 88. “ “ “ Like, Keynote Keynote?” Is this an April Fool’s joke?” He’s serious. Deep breathes.” —Sophie Shepherd (in her head)
  89. 89. Photoshop ≠ Browser • Wrapping Text • Multiple Widths • Rounded Corners • Consistent Type
  90. 90. Tools ≠ Precious There is no “right” way of doing this stuff.
  91. 91. Design: The details matter
  92. 92. “Designers”
  93. 93. Don’t be the “designer (who codes).” Be a designer with a bigger toolbox.
  94. 94. This stuff ain’t easy
  95. 95. The one truth “ FAIL. You’re doing it wrong… “ —the twitters #jerks
  96. 96. That’s Bullshit
  97. 97. No one knows what they’re doing.
  98. 98. Empathy
  99. 99. UX is everyone’s job.
  100. 100. The one true process is…
  101. 101. It all depends.
  102. 102. 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
  103. 103. Wireframes
  104. 104. Wireframes whiteboard
  105. 105. Wireframes
  106. 106. Designer = Communicator
  107. 107. Don’t make easy the goal.
  108. 108. How do you scramble an egg? + +
  109. 109. youtu.be/PUP7U5vTMM0
  110. 110. Thanks! Kevin Sharon @kevinsharon Sophie Shepherd @sophshepherd

×