Presented at FITC Toronto 2016 See details at www.fitc.ca Overview Tools help us create beautiful, usable experiences for devices. However, they can also get in the way of creativity; designers and developers sometimes spend more time thinking about process, software, and tools than making. In this talk, Catt will discuss reasons we get distracted by process and tools, why stepping away from process and tools can be helpful, as well as methods to focus more on getting things done. Objective To help people worry less and create more. Target Audience Designers and developers Five Things Audience Members Will Learn Reasons people get distracted by tools and processes. Why pausing conversations about tools and processes can be helpful. How to stop being distracted by the “how”. Methods to focus more on getting things done. When it’s okay to discuss processes and tools.

1. @cattsmall@cattsmall
Just Make Stuff!
FITC 2016 – Catt Small

2. @cattsmall@cattsmall
● Product Designer, SoundCloud
● Co-founder, Brooklyn Gamery
● Co-founder, Code Liberation
● Maker of various things!
A little about me:

3. @cattsmall@cattsmall
To help you worry less about the how
and more about the who, what,
when, where, and why.
The goal of today’s talk:

4. @cattsmall@cattsmall
● Why this subject matters
● What process is good for
● Why process can be unhelpful
● How to focus less on process
● When process is okay
Topics:

5. @cattsmall@cattsmall
Why this
talk matters

6. @cattsmall@cattsmall
A long time ago
in a galaxy far, far away...

7. @cattsmall@cattsmall
Baby designer Catt!
I wanna be the
very best!

8. @cattsmall@cattsmall
Waterfall
:(
:(
:(

9. @cattsmall@cattsmall
New methodologies!
:)
:):)
:)

10. @cattsmall@cattsmall
Lean UX
Make
Check
Think

11. @cattsmall@cattsmall
Agile
Ship
ShipShip
Ship
Standup
Backlog
Grooming
Sprint
Planning
Retro
Sprint
Review

12. @cattsmall@cattsmall
One-size-fits-all
50-person company
:)
:):)
:)
200-person company
:)
:):)
:)
1,000-person company
:)
:):)
:)

13. @cattsmall@cattsmall
It didn’t work
FAIL.

14. @cattsmall@cattsmall
To each their own.

15. @cattsmall@cattsmall
Why processes &
tools can be good

16. @cattsmall@cattsmall
When it works, it works

17. @cattsmall@cattsmall
Guidance
We have a
plan!

18. @cattsmall@cattsmall
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1"
tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2"
tabindex="3" value="choice-2" />
</div>
Efficient
It just works!

19. @cattsmall@cattsmall
Self-improvement
I’m a much
better designer
now!

20. @cattsmall@cattsmall
Why they can be
unhelpful

21. @cattsmall@cattsmall
When it doesn’t work,
it doesn’t work

22. @cattsmall@cattsmall
Lots of hierarchy
PHPJava SQL C++ASP.NET
Objective
C
C#Ruby JS
Python
JS
Knockout MeteorBackbone
Angular ReactEmber

23. @cattsmall@cattsmall
Real vs. fake
I’m a real
programmer!
export class Just<A> extends Maybe<A> {
constructor(public value: A) { super(); };
export class Nothing<A> extends Maybe<A> {
constructor() { super(); };
fold<R>(match) { return match.nothing; }
export function of<A>(value: A): Maybe<A> {
return new Just(value);
export function zero<A>(): Nothing<A> {
return new Nothing();
export function map<A, B>(fn: (a: A) => B): (m: Maybe<A>) => Maybe<B> {
return function morphism(ma) {
return ma.fold({
just: (a) => { return new Just(fn(a)) },
export function bind<A, B>(fn: (a: A) => Maybe<B>): (m: Maybe<A>) => Maybe<B>
return function morphism(ma) {
return ma.fold({
</> </>

24. @cattsmall@cattsmall
Right vs. wrong
Sketch Photoshop

25. @cattsmall@cattsmall
No room for variables
But that doesn’
t work for our
team...
We should try this
new method!

26. @cattsmall@cattsmall
But none of
us know how
it works...
Power shifts & vacuums
This is the best
framework!

27. @cattsmall@cattsmall
No time to celebrate
Work
Think
about
what to
improve

28. @cattsmall@cattsmall
How to refocus

29. @cattsmall@cattsmall
Breathe

30. @cattsmall@cattsmall
Accept imperfection.

31. @cattsmall@cattsmall
Stop unhelpful discussions
I think we should use–
Slow down.

32. @cattsmall@cattsmall
Consider your context
Company size Team composition

33. @cattsmall@cattsmall
The how will arise from the what.

34. @cattsmall@cattsmall
Ask yourself questions
● Are you feeling frustrated?
● Does it benefit you enough to continue?
● Where can you deviate?

35. @cattsmall@cattsmall
Make your own process
Ideate
Iterate
Learn Design
BuildCelebrate
Launch Test

36. @cattsmall@cattsmall
Pat yourself on the back
NOICE!

37. @cattsmall@cattsmall
Caveats

38. @cattsmall@cattsmall
If things get too loose, rein it in!

39. @cattsmall@cattsmall
Confused
What the heck are
we making?

40. @cattsmall@cattsmall
Frustrated
I can’t take it
anymore!

41. @cattsmall@cattsmall
Unsure
I don’t know what
to do next...

42. @cattsmall@cattsmall
Lacking communication
What’s going on?!

43. @cattsmall@cattsmall
Sprinkle that process on top!

44. @cattsmall@cattsmall
Don’t let it get out of hand.

45. @cattsmall@cattsmall
Define objectives upfront
I think we should use–
What is our goal?

46. @cattsmall@cattsmall
W’s first
Define
who, what, when, where, why
Define
how

47. @cattsmall@cattsmall
Be flexible
That’s not what the
book says, but it
works for us!

48. @cattsmall@cattsmall
Ignore trendy hotness
React worked well
for them, but Ember
does the job for us!

49. @cattsmall@cattsmall
//random integer method.
Lorem.prototype.randomInt = function (min, max) {
return Math.floor(Math.random() * (max - min +
1)) + min;
};
//text creator method with parameters: how many, what
Lorem.prototype.createText = function(count, type) {
switch (type) {
//paragraphs are loads of sentences.
case Lorem.TYPE.PARAGRAPH:
var paragraphs = new Array;
for (var i = 0; i < count; i++) {
var paragraphLength =
Share knowledge
Let’s break down how
this function works.

50. @cattsmall@cattsmall
#celebrate!
We’re such an
awesome team.

51. @cattsmall@cattsmall
Wrap-up

52. @cattsmall@cattsmall
● Process is a double-edged sword.
● A person’s right is another’s wrong.
● Power shifts/vacuums can happen
when one person advocates for a
new process or tool.
In summary:

53. @cattsmall@cattsmall
● Think about your context first.
● Always define project goals.
● Accept imperfection.
● Don’t worry about the new hotness.
● Celebrate what you make.
Advice:

54. @cattsmall@cattsmall
Go out there &
make cool stuff!

55. @cattsmall@cattsmall
Thank you.
Questions?
Tweet @cattsmall
Email catt@cattsmall.com