Collaboration and open communication tend to be categorized as “soft skills” and are often overlooked in organizations. In this session, he is going to discuss how to develop an effective strategy in bridging the gap between product, design, and engineering teams. He will also share some tips for including developers in different stages of design — from planning features to usability testing.

1. The designers’ guide
to working with
development
teams
C O L L A B O R A T E O R D I E

4. Design?
eh???

12. …for humans
“Design is not just
what it looks like and
feels like. Design is
how it works.”
- Steve Jobs
…for humans
- UX Designers

13. expectation
Design for humans

14. for humans
Design

15. DEFINE
IDEATE
PROTOTYPEIMPLEMENT
ANALYZE
ITERATE
Design Process

16. DEFINE IDEATE PROTOTYPE
Designers deep dive into
the problem
Designers conduct
research and interviews
Developers don’t do
anything
Designers look for
meaningful patterns
Designers try to come up
with solutions
Developers don’t do
anything
Designers create high-
fidelity prototypes
Designers get feedback
from product. Iterate.
Developers don’t do
anything
Design Process

17. IMPLEMENT ANALYZE
Designers come to
developers with mockups
Designers and developers
lost so much time and don’t
even get here.
Design Process
Developer
Developers start to
criticize their ideas,
asking questions,
suggesting new ideas
and give feedback to
things that will take ages
to implement.

18. Designer’s ideas may be difficult to
implement on a tight deadline
Designers are unaware of technical
possibilities that can make their solution
better.
Developers feel disengaged because
they are just handed the solution and
they don’t understand the reasons that
brought to it.
Stop wasting your
time working on a
solution that is never
gonna be developed,
and only makes your
developers frustrated

19. Collaborative Design Process
DEFINE
IDEATE
PROTOTYPE
IMPLEMENT
ANALYZE
Invite developers to attend initial
meeting, or at least one user interview.
Create a bulleted summary of the
problem or the insights from research,
and share them with developers.
Get inputs on technical constraints from
developers.

20. Collaborative Design Process
DEFINE
IDEATE
PROTOTYPE
IMPLEMENT
ANALYZE
Involve all designers and coders who will
be involved with the project.
Get in a room together, review all
research notes, make observations, and
turn them into ideas.

21. Collaborative Design Process
DEFINE
IDEATE
PROTOTYPE
IMPLEMENT
ANALYZE
Show the sketches/wireframes to
developers as early as possible
Hold regular Design Sparring meetings:
https://www.atlassian.com/team-
playbook/plays/sparring

22. Collaborative Design Process
Incorporate as realistic content as
possible (avoid Lorem Ipsum)
Consider designing for all viewports
(desktop, tablet, mobile)
Prototypes should account for data
extremes (short vs long names)
Prototypes should account for all
interaction states (hover, error,
transition)
Rename all your layers appropriately
Create as many reusable layers as
possible
Avoid using non-whole px values (0.5)
DEFINE
IDEATE
PROTOTYPE
IMPLEMENT
ANALYZE

23. Collaborative Design Process
DEFINE
IDEATE
PROTOTYPE
IMPLEMENT
ANALYZE
Delete all unused layers and guides
Render all asset files (fonts, images,
icons, svgs) and organize them in
subfolders
Document and annotate your designs
excessively
Ensure all documentation stays updated
to reflect the final system as it evolves.

24. Involve developers from start
to finish.
Document and annotate your
designs excessively.
Always create prototypes .
Be really organized
Adapt your processes.

25. Thanks!
See you later.