empowering designers to code, diana mounter

69
<Empowering designers to code /> Diana Mounter Senior Product Designer at Etsy

Upload: future-insights

Post on 09-Apr-2017

437 views

Category:

Design


3 download

TRANSCRIPT

Page 1: Empowering Designers to Code, Diana Mounter

<Empowering designers to code />

Diana Mounter Senior Product Designer at Etsy

Page 2: Empowering Designers to Code, Diana Mounter

Diana Mounter @broccolini

Page 3: Empowering Designers to Code, Diana Mounter
Page 4: Empowering Designers to Code, Diana Mounter

<Empowering designers to code />

Page 5: Empowering Designers to Code, Diana Mounter

This is not about whether designers should code or not

Page 6: Empowering Designers to Code, Diana Mounter

Or how to make designers code if they don’t want to

Page 7: Empowering Designers to Code, Diana Mounter

This is about ways you can empower designers to code,

and some of it's benefits

Page 8: Empowering Designers to Code, Diana Mounter

The first website I built as part of my job was 10 years ago.

Page 9: Empowering Designers to Code, Diana Mounter

Etsy is the first place where I’ve really felt empowered to code.

Page 10: Empowering Designers to Code, Diana Mounter

My boss didn’t know what I was doing and just wanted the website built (for free)

Started at Etsy

Page 11: Empowering Designers to Code, Diana Mounter

Setup dev environment?

Git commit what?!

How to push O_o

Where is all the code?

How to run tests?

Page 12: Empowering Designers to Code, Diana Mounter

Designers who could code,but don’t as part of their job

Companies want designers who can code

Page 13: Empowering Designers to Code, Diana Mounter
Page 14: Empowering Designers to Code, Diana Mounter

Where to start?

Page 15: Empowering Designers to Code, Diana Mounter

<Start with onboarding />

Page 16: Empowering Designers to Code, Diana Mounter

Set up development environments from the beginning

Page 17: Empowering Designers to Code, Diana Mounter

Ship something

Page 18: Empowering Designers to Code, Diana Mounter
Page 19: Empowering Designers to Code, Diana Mounter
Page 20: Empowering Designers to Code, Diana Mounter

Install text editor Setup aliases in terminal Virtual Machine Authenticate SSH keys with GitHub Setup Bash files Know how to run tests Know the IRC commands for deploying

Page 21: Empowering Designers to Code, Diana Mounter

?

D E P L O Y I N G

The first push program demystifies the process. Anyone can push code, given the right support.

Page 22: Empowering Designers to Code, Diana Mounter

The first push program demystifies the process. Anyone can push code, given the right support.

Page 23: Empowering Designers to Code, Diana Mounter

The buddy system

Page 24: Empowering Designers to Code, Diana Mounter

Build relationships during onboarding and training

Page 25: Empowering Designers to Code, Diana Mounter

<Build confidence />

Page 26: Empowering Designers to Code, Diana Mounter

Give designers a safe way to practice with production code

Page 27: Empowering Designers to Code, Diana Mounter

Teach designers to use Git

Page 28: Empowering Designers to Code, Diana Mounter
Page 29: Empowering Designers to Code, Diana Mounter

Teach designers about branching

Page 30: Empowering Designers to Code, Diana Mounter

Encourage code reviews

Page 31: Empowering Designers to Code, Diana Mounter
Page 32: Empowering Designers to Code, Diana Mounter

Prototyping (with production code)

Page 33: Empowering Designers to Code, Diana Mounter

Code gives engineers a better idea of your intent

Page 34: Empowering Designers to Code, Diana Mounter
Page 35: Empowering Designers to Code, Diana Mounter

Designing in the browser

Page 36: Empowering Designers to Code, Diana Mounter

<Document everything />

Page 37: Empowering Designers to Code, Diana Mounter

Documentation allows people to be autonomous

Page 38: Empowering Designers to Code, Diana Mounter

There’s no silver bullet to keeping documentation up-to-date

Page 39: Empowering Designers to Code, Diana Mounter
Page 40: Empowering Designers to Code, Diana Mounter
Page 41: Empowering Designers to Code, Diana Mounter

Use routine events to review documentation

Page 42: Empowering Designers to Code, Diana Mounter

<Improve workflows with tooling />

Page 43: Empowering Designers to Code, Diana Mounter

Tooling can make designing in code much more enjoyable.

Page 44: Empowering Designers to Code, Diana Mounter

Make it easy to see how code impacts the user experience

Page 45: Empowering Designers to Code, Diana Mounter

Robots are better at testing than humans

Page 46: Empowering Designers to Code, Diana Mounter

Reduce the feedback loop

Page 47: Empowering Designers to Code, Diana Mounter

Reduce the feedback loop

Page 48: Empowering Designers to Code, Diana Mounter
Page 49: Empowering Designers to Code, Diana Mounter
Page 50: Empowering Designers to Code, Diana Mounter

<Culture />

Page 51: Empowering Designers to Code, Diana Mounter

Make coding part of your design culture

Page 52: Empowering Designers to Code, Diana Mounter
Page 53: Empowering Designers to Code, Diana Mounter
Page 54: Empowering Designers to Code, Diana Mounter

<What happens when designers code? />

Page 55: Empowering Designers to Code, Diana Mounter

They build a new style guide

Page 56: Empowering Designers to Code, Diana Mounter
Page 57: Empowering Designers to Code, Diana Mounter

It that means engineers can get further without designers

Page 58: Empowering Designers to Code, Diana Mounter

699 deletions

Page 59: Empowering Designers to Code, Diana Mounter
Page 60: Empowering Designers to Code, Diana Mounter
Page 61: Empowering Designers to Code, Diana Mounter
Page 62: Empowering Designers to Code, Diana Mounter

Start with onboarding

Page 63: Empowering Designers to Code, Diana Mounter

Start with onboarding Build confidence

Page 64: Empowering Designers to Code, Diana Mounter

Start with onboarding Build confidence Document everything

Page 65: Empowering Designers to Code, Diana Mounter

Start with onboarding Build confidence Document everything Improve workflows with tooling

Page 66: Empowering Designers to Code, Diana Mounter

Start with onboarding Build confidence Document everything Improve workflows with tooling Made coding part of design culture

Page 67: Empowering Designers to Code, Diana Mounter

True collaboration isn’t throwing designs over the wall

Page 68: Empowering Designers to Code, Diana Mounter

It’s sharing the responsibility with your team to build a quality product

Page 69: Empowering Designers to Code, Diana Mounter

Thanks!