@_davestadler

How to sell design to developers.

Bridging the gap between two different ways of thinking.

@_davestadler

@_davestadler

@_davestadlerHi, I’m dave

@_davestadler

Expert on pointing at things.

@_davestadler

@quickleft

@_davestadler

we build web & mobile apps.

@_davestadler

@_davestadler

why must we sell design?

@_davestadler

some designersjust want to create

selling

@_davestadler

can no longer be silentdesign

@_davestadler

Sales is perceived as… !

• Necessary

• Sleezy

• Unfair

• Unpleasant

common misconceptions of sales

@_davestadler

“Whether we’re employees pitching colleagues on a new idea, entrepreneurs enticing funders to invest, or parents and teachers cajoling children to study, we spend our days trying to move others. Like it or not, we’re all in sales now.”

!

~ Daniel H. Pink

@_davestadler

i.e. convincing a child to brush their teeth is the root of sales…

“tell me why?”

@_davestadler

VOLDEMORT TEETH!

@_davestadler

selling shouldn’t be fear based.

@_davestadler

SalesValue Understanding

sales is a confluence

@_davestadler

selling is

educating!

@_davestadler

huh?

@_davestadler

The sell

@_davestadler

developers developers developers

target your audience:

@_davestadler

what’s the goal for devs?

creating a great product!

@_davestadler

ok, tell me more…

@_davestadler

• To feel involved in the process

• Access to Designer

• Documentation

!

find out what developers need

@_davestadler

• Concept is there

• Functional code

• Lack of empathy

• Lack of polish

!

development without design is bad

@_davestadler

functioning Apps are not always easy to use…

@_davestadler

• Product becomes more usable

• Making more profit

• Building team relationships

• Educating and learning from each other

benefits of buying design

@_davestadler

just make it pretty!

watch out for,

@_davestadler

…but ‘making it pretty’

doesn’t make it qualitatively good.

@_davestadler

wait… so good teeth, are bad too?

@_davestadler

design is not just decoration. it’s a craft.

@_davestadler

“ I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration - likely because so much bad design simply is decoration. - Good design isn’t. !

- Good design is problem solving.

Jeffrey Veen”

@_davestadler

craft not art

@_davestadler

crafted apps are built to solve problems…

@_davestadler

@_davestadler

great user interface

problem solving+

crafted apps:

@_davestadler

how do we get

there?

@_davestadler

1. A say in what is being built.

2. Confidence in the design direction.

3. Annotated Design Files

if developers had…

they could ship great software.

@_davestadler

1: team approach

@_davestadler

no waterfalls

@_davestadler

teamwork makes the dream work

• Avoid Waterfalls

• All ideas are equal

• Passing the ball

• Kick-Off meetings are crucial

@_davestadler

TEAMS!

great appscome from

@_davestadler

@_davestadler

Team kick-off meeting

• Fostering input from the team

• Building a collaborative vision

• Getting buy-in

• Avoiding pitfalls down the road

@_davestadler

early on, try to avoid saying no!

@_davestadler

collaborative approach

• Discover and share with group

• Speed sketching sessions for features

• Divide and Conquer when appropriate

• Iterate upon prototypes

• Retrospective at end of sprints

@_davestadler

good ideas need

nurturing!

@_davestadler

UX inside an Agile environment

• Stagger your Sprints

• Put Design one sprint ahead of development

• Gives time for internal and external review, revisions, and sign-off.

• Keep whole team in these early meetings

• Dev feedback is necessary even before coding begins

@_davestadler

Sprint 2 (Development)

Product Owner Review

Design Revisions 1

Client Review

Design Revisions 2

Sprint 3 (Design)

Sprint 1 (Design)

staggered sprints

@_davestadler

2: answering the why.

@_davestadler

make yourdesigns

bulletproof

@_davestadler

designers do your homework

• Absorb any existing research done by client

• Discover personas

• Interview users

• Document user journeys

• Track clicks

• Record users’ interactions on-screen

@_davestadler

!

“If I had an hour to solve a problem

I'd spend 55 minutes thinking about the problem

and 5 minutes thinking about solutions.”

~ Alfred Einstein

@_davestadler

motivations

uncoveruser

@_davestadler

product definition

Client: Business Goals:Audience:

Value Proposition:

Assumptions: Unknowns:

Research Notes:

User Personas:

Stakeholder:

Contact Info:

Timeline:

Stakeholder Interview// PRODUCT DISCOVERY

@_davestadler

competitive analysis

@_davestadler

personas

@_davestadler

user journey maps

Ran

ge o

f Em

otio

ns

Del

ight

edFr

ustr

atte

d

Act

ion

Thou

ghts

// Persona #1: Alisa

“She used CIP for 2min and found a lead - Canadian company that was not on their radar -

and now the technology is under evaluation”

Feel

Curio

us.

Used Search to find a school/institution

Using w

ork-

arou

nd b

ecau

se it

’s ea

sier.

Used omni-search to find school.

Delight

ed to

find th

e sc

hool

I wan

ted.

Landed on University Profile page

Foun

d a ta

b for P

aten

ts as

exp

ecte

d.

Clicked ‘Patents’ tab on profile page.

Curio

us to

see

what I

can

find.

Searched 7 different terms within school.

Foun

d wha

t I w

as lo

oking

for!

Clicked on one patent.

Dissap

oint

ed th

at it

em w

asn’t

wor

thwhil

e.

Couldn’t find anything of interest.

Star

ting o

ver, t

rying

a ne

w sear

ch.

Went back to search another university,

Still

sear

ching

for m

y des

ired co

nten

t.

Clicked a few patents within a new school.

Foun

d a pro

file p

age,

this

could

be

good!

Clicked through to ‘Profile’ of indiviiual.

Sear

ching

thro

ugh

a lot

of p

ages

...

Continuing on, clicked through 30 pages.

Tried

feed

tab, t

o se

e wha

t it’s

abou

t.

Viewed ‘Tour’ of Feed

Feed

look

s use

ful, I

’ll try

it o

ut.

Went to create a new feed.

Confu

sed o

n wha

t to

do, le

ave

this

for n

ow.

Didn’t create theeee feed and left.

Curio

us w

hat i

s filin

gs? D

oesn

’t re

ally h

elp.

Clicked the ‘Filings’ tab and then left.

Seen

all t

he p

arts,

bac

k to

sear

ch fo

r me.

Goes back to search.

Didn’t

know

abou

t filte

rs, th

ese

can

help

.

Uses filters after they understand them.

Bette

r res

ults,

still t

akes

awhil

e to

filte

r.

Clicks through many pages until finding it.

// JOURNEY MAP #1: Company (Buy-Side)

@_davestadler

that solvessomething

a need!

@_davestadler

track clicks

• Google Analytics

• HootSuite

• MailChimp

• Binders full of spreadsheets

@_davestadler

Usability testing

• UserTesting.com

• SilverbackApp.com

• Screen Recordings

• i.e. QuickTime

• In-Person taking notes with User as they perform tasks

• i.e. Goose from Top Gun

@_davestadler

always beatopinions

facts!

@_davestadler

…well most of the time

@_davestadler

3: make it easier

@_davestadler

wireframes

@_davestadler

rapid prototypes

• InVision - http://www.invisionapp.com/ - $15 to 20 a month

• Balsamiq - http://balsamiq.com/ - $80

• OmniGraffle - http://www.omnigroup.com/omnigraffle/ - $200

• Axure - http://www.axure.com/ - $590

• Solidify - http://www.solidifyapp.com/ - $19 to 49 a month

• Flinto - https://www.flinto.com/ - $20 a month

@_davestadler

invision app

@_davestadler

Working side by side

• Increases iterations

• Feedback loop is instantaneous

• Ideation can be tested quickly

• Google Hangouts when remote

@_davestadler

uniform direction

• Use similar grids, patterns, elements, colors, and typography

• Cat-Herd the unseen use-cases that inevitably rear their heads

• Too many different paradigms can confuse users

• Sometimes compromises are needed

@_davestadler

clean files

• Photoshop

• Sketch

• Illustrator

• InDesign

@_davestadler

photoshop ettiquette

• File Organization

• Best Practices

• Naming Conventions

• Layer Organization

http://photoshopetiquette.com

@_davestadler

@_davestadler

annotated designs

@_davestadler

style guide

@_davestadler

user stories

@_davestadler

project management

@_davestadler

so when you get buy-in…

@_davestadler

ok, tell me more…

@_davestadler

…why are designers always touching their faces?

@_davestadler

it must be demonstrated.

value is not always apparent

remember that

@_davestadler

1. Share the discovery stage with the entire team.

2. Collect Research & Usability Data to drive problem solving

3. Create annotated documents to expedite development

if designers will…

they can ship great software!

@_davestadler

sellers!we’re all

@_davestadler

So own that SHIT!

@_davestadler

fin