How to Sell Design to Developers
-
Upload
dave-stadler -
Category
Design
-
view
13.105 -
download
1
Transcript of How to Sell Design to Developers
![Page 1: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/1.jpg)
@_davestadler
How to sell design to developers.
Bridging the gap between two different ways of thinking.
@_davestadler
![Page 2: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/2.jpg)
@_davestadler
@_davestadlerHi, I’m dave
![Page 3: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/3.jpg)
@_davestadler
Expert on pointing at things.
![Page 4: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/4.jpg)
@_davestadler
@quickleft
![Page 5: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/5.jpg)
@_davestadler
we build web & mobile apps.
![Page 6: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/6.jpg)
@_davestadler
![Page 7: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/7.jpg)
@_davestadler
why must we sell design?
![Page 8: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/8.jpg)
@_davestadler
some designersjust want to create
selling
![Page 9: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/9.jpg)
@_davestadler
can no longer be silentdesign
![Page 10: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/10.jpg)
@_davestadler
Sales is perceived as… !
• Necessary
• Sleezy
• Unfair
• Unpleasant
common misconceptions of sales
![Page 11: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/11.jpg)
@_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
![Page 12: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/12.jpg)
@_davestadler
i.e. convincing a child to brush their teeth is the root of sales…
“tell me why?”
![Page 13: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/13.jpg)
@_davestadler
VOLDEMORT TEETH!
![Page 14: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/14.jpg)
@_davestadler
selling shouldn’t be fear based.
![Page 15: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/15.jpg)
@_davestadler
SalesValue Understanding
sales is a confluence
![Page 16: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/16.jpg)
@_davestadler
selling is
educating!
![Page 17: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/17.jpg)
@_davestadler
huh?
![Page 18: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/18.jpg)
@_davestadler
The sell
![Page 19: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/19.jpg)
@_davestadler
developers developers developers
target your audience:
![Page 20: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/20.jpg)
@_davestadler
what’s the goal for devs?
creating a great product!
![Page 21: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/21.jpg)
@_davestadler
ok, tell me more…
![Page 22: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/22.jpg)
@_davestadler
• To feel involved in the process
• Access to Designer
• Documentation
!
find out what developers need
![Page 23: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/23.jpg)
@_davestadler
• Concept is there
• Functional code
• Lack of empathy
• Lack of polish
!
development without design is bad
![Page 24: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/24.jpg)
@_davestadler
functioning Apps are not always easy to use…
![Page 25: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/25.jpg)
@_davestadler
• Product becomes more usable
• Making more profit
• Building team relationships
• Educating and learning from each other
benefits of buying design
![Page 26: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/26.jpg)
@_davestadler
just make it pretty!
watch out for,
![Page 27: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/27.jpg)
@_davestadler
…but ‘making it pretty’
doesn’t make it qualitatively good.
![Page 28: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/28.jpg)
@_davestadler
wait… so good teeth, are bad too?
![Page 29: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/29.jpg)
@_davestadler
design is not just decoration. it’s a craft.
![Page 30: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/30.jpg)
@_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”
![Page 31: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/31.jpg)
@_davestadler
craft not art
![Page 32: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/32.jpg)
@_davestadler
crafted apps are built to solve problems…
![Page 33: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/33.jpg)
@_davestadler
![Page 34: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/34.jpg)
@_davestadler
great user interface
problem solving+
crafted apps:
![Page 35: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/35.jpg)
@_davestadler
how do we get
there?
![Page 36: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/36.jpg)
@_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.
![Page 37: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/37.jpg)
@_davestadler
1: team approach
![Page 38: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/38.jpg)
@_davestadler
no waterfalls
![Page 39: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/39.jpg)
@_davestadler
teamwork makes the dream work
• Avoid Waterfalls
• All ideas are equal
• Passing the ball
• Kick-Off meetings are crucial
![Page 40: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/40.jpg)
@_davestadler
TEAMS!
great appscome from
![Page 41: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/41.jpg)
@_davestadler
![Page 42: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/42.jpg)
@_davestadler
Team kick-off meeting
• Fostering input from the team
• Building a collaborative vision
• Getting buy-in
• Avoiding pitfalls down the road
![Page 43: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/43.jpg)
@_davestadler
early on, try to avoid saying no!
![Page 44: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/44.jpg)
@_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
![Page 45: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/45.jpg)
@_davestadler
good ideas need
nurturing!
![Page 46: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/46.jpg)
@_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
![Page 47: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/47.jpg)
@_davestadler
Sprint 2 (Development)
Product Owner Review
Design Revisions 1
Client Review
Design Revisions 2
Sprint 3 (Design)
Sprint 1 (Design)
staggered sprints
![Page 48: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/48.jpg)
@_davestadler
2: answering the why.
![Page 49: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/49.jpg)
@_davestadler
make yourdesigns
bulletproof
![Page 50: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/50.jpg)
@_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
![Page 51: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/51.jpg)
@_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
![Page 52: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/52.jpg)
@_davestadler
motivations
uncoveruser
![Page 53: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/53.jpg)
@_davestadler
product definition
Client: Business Goals:Audience:
Value Proposition:
Assumptions: Unknowns:
Research Notes:
User Personas:
Stakeholder:
Contact Info:
Timeline:
Stakeholder Interview// PRODUCT DISCOVERY
![Page 54: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/54.jpg)
@_davestadler
competitive analysis
![Page 55: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/55.jpg)
@_davestadler
personas
![Page 56: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/56.jpg)
@_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)
![Page 57: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/57.jpg)
@_davestadler
that solvessomething
a need!
![Page 58: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/58.jpg)
@_davestadler
track clicks
• Google Analytics
• HootSuite
• MailChimp
• Binders full of spreadsheets
![Page 59: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/59.jpg)
@_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
![Page 60: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/60.jpg)
@_davestadler
always beatopinions
facts!
![Page 61: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/61.jpg)
@_davestadler
…well most of the time
![Page 62: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/62.jpg)
@_davestadler
3: make it easier
![Page 63: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/63.jpg)
@_davestadler
wireframes
![Page 64: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/64.jpg)
@_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
![Page 65: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/65.jpg)
@_davestadler
invision app
![Page 66: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/66.jpg)
@_davestadler
Working side by side
• Increases iterations
• Feedback loop is instantaneous
• Ideation can be tested quickly
• Google Hangouts when remote
![Page 67: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/67.jpg)
@_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
![Page 68: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/68.jpg)
@_davestadler
clean files
• Photoshop
• Sketch
• Illustrator
• InDesign
![Page 69: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/69.jpg)
@_davestadler
photoshop ettiquette
• File Organization
• Best Practices
• Naming Conventions
• Layer Organization
http://photoshopetiquette.com
![Page 70: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/70.jpg)
@_davestadler
![Page 71: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/71.jpg)
@_davestadler
annotated designs
![Page 72: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/72.jpg)
@_davestadler
style guide
![Page 73: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/73.jpg)
@_davestadler
user stories
![Page 74: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/74.jpg)
@_davestadler
project management
![Page 75: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/75.jpg)
@_davestadler
so when you get buy-in…
![Page 76: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/76.jpg)
@_davestadler
ok, tell me more…
![Page 77: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/77.jpg)
@_davestadler
…why are designers always touching their faces?
![Page 78: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/78.jpg)
@_davestadler
it must be demonstrated.
value is not always apparent
remember that
![Page 79: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/79.jpg)
@_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!
![Page 80: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/80.jpg)
@_davestadler
sellers!we’re all
![Page 81: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/81.jpg)
@_davestadler
So own that SHIT!
![Page 82: How to Sell Design to Developers](https://reader031.fdocuments.us/reader031/viewer/2022021814/58f9aa3e760da3da068b76fc/html5/thumbnails/82.jpg)
@_davestadler
fin