fitc 2016 - just make stuff!
TRANSCRIPT
@cattsmall@cattsmall
Just Make Stuff!FITC 2016 – Catt Small
@cattsmall@cattsmall
● Product Designer, SoundCloud● Co-founder, Brooklyn Gamery● Co-founder, Code Liberation● Maker of various things!
A little about me:
@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:
@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:
@cattsmall@cattsmall
Why thistalk matters
@cattsmall@cattsmall
A long time agoin a galaxy far, far away...
@cattsmall@cattsmall
Baby designer Catt!
I wanna be the very best!
@cattsmall@cattsmall
Waterfall
:(
:(
:(
@cattsmall@cattsmall
New methodologies!
:)
:):)
:)
@cattsmall@cattsmall
Lean UX
Make
Check
Think
@cattsmall@cattsmall
Agile
Ship
ShipShip
ShipStandupBacklog
Grooming
Sprint Planning
Retro
Sprint Review
@cattsmall@cattsmall
One-size-fits-all
50-person company
:)
:):)
:)
200-person company
:)
:):)
:)
1,000-person company
:)
:):)
:)
@cattsmall@cattsmall
It didn’t work
FAIL.
@cattsmall@cattsmall
To each their own.
@cattsmall@cattsmall
Why processes & tools can be good
@cattsmall@cattsmall
When it works, it works
@cattsmall@cattsmall
GuidanceWe have a
plan!
@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>
<div>
Efficient
It just works!
@cattsmall@cattsmall
Self-improvement
I’m a much better designer
now!
@cattsmall@cattsmall
Why they can be unhelpful
@cattsmall@cattsmall
When it doesn’t work,it doesn’t work
@cattsmall@cattsmall
Lots of hierarchy
PHPJava SQL C++ASP.NET
Objective C C#Ruby JS
Python
JS
Knockout MeteorBackbone
Angular ReactEmber
@cattsmall@cattsmall
Real vs. fakeI’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({
export function zipWith<A, B, R>(fn: (A, B) => R): ((ma: Maybe<A>, mb:
Maybe<B>) => Maybe<R>) {
return function(ma, mb) {
</> </>
@cattsmall@cattsmall
Right vs. wrong
Sketch Photoshop
@cattsmall@cattsmall
No room for variables
But that doesn’t work for our
team...
We should try this new method!
@cattsmall@cattsmall
But none of us know how
it works...
Power shifts & vacuumsThis is the best
framework!
@cattsmall@cattsmall
No time to celebrate
Work
Think about
what to improve
@cattsmall@cattsmall
How to refocus
@cattsmall@cattsmall
Breathe
@cattsmall@cattsmall
Accept imperfection.
@cattsmall@cattsmall
Stop unhelpful discussions
I think we should use–
Slow down.
@cattsmall@cattsmall
Consider your contextCompany size Team composition
@cattsmall@cattsmall
The how will arise from the what.
@cattsmall@cattsmall
Ask yourself questions● Are you feeling frustrated?● Does it benefit you enough to continue?● Where can you deviate?
@cattsmall@cattsmall
Make your own process
Ideate
Iterate
Learn Design
BuildCelebrate
Launch Test
@cattsmall@cattsmall
Pat yourself on the back
NOICE!
@cattsmall@cattsmall
Caveats
@cattsmall@cattsmall
If things get too loose, rein it in!
@cattsmall@cattsmall
Confused
What the heck are we making?
@cattsmall@cattsmall
Frustrated
I can’t take it anymore!
@cattsmall@cattsmall
Unsure
I don’t know what to do next...
@cattsmall@cattsmall
Lacking communication
What’s going on?!
@cattsmall@cattsmall
Sprinkle that process on top!
@cattsmall@cattsmall
Don’t let it get out of hand.
@cattsmall@cattsmall
Define objectives upfront
I think we should use–
What is our goal?
@cattsmall@cattsmall
W’s first
Definewho, what, when, where, why
Definehow
@cattsmall@cattsmall
Be flexibleThat’s not what the
book says, but it works for us!
@cattsmall@cattsmall
Ignore trendy hotnessReact worked well
for them, but Ember does the job for us!
@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.
@cattsmall@cattsmall
#celebrate!We’re such an
awesome team.
@cattsmall@cattsmall
Wrap-up
@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:
@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:
@cattsmall@cattsmall
Go out there & make cool stuff!
