How to achieve an efficient work environment between designers and engineers.

1. GDG Leiria 2019
Maria Margarida
Unlocking ultimate
productivity between
engineers and designers

2. Product Designer
Passionate about solving real customer problems and
creating experiences that are easy to use.
Maria Margarida

3. First job
Only designer
Processes, methodologies
and communications skills

4. Unlocking ultimate productivity
between engineers and designers
How do we define
productive and
efficient teams?
Why and How to
successfully include
engineers in the design
phase
Hand-off Implementation and
support
Iterate on the process

5. How do we define
productive and efficient teams?

6. Inefficient team
Designs are
approved after hours and
hours of back and forth in
meetings
Devs take a long time
to implement the designs
because they had to book
several meetings with the
designers after
the handoff
Implementation
does not match
the mockups due to
improper communication
👨🎨 👩💻👨💻 🚨

7. Productive and efficient team
Implementations
always match
what the design
team envisioned
Research and designs
are being approved
and reviewed by
members of the company
Engineers are never
blocked on designers
for assets, and are not
blocked on designers
while implementing
their mockups
Teams searching to
see if there are doubts
to clarify before
the implementation
phase
📚 💪 🎨
Team members
do not spend more
than 3-5 hours per
week in meetings
📅
Engineers and
designers work together
to find compromises that
strike a good balance
between implementation
time and design outcome
🔍🤝

8. Why and How to successfully include
engineers in the design phase
1

9. Get everyone on board
Clarifies the solution that the team is proposing
Helps prioritise things during the implementation phase
Less meetings during the process
Less time wasted in the future
Clarifies the problems that needs to be solve
Why and How to successfully include
engineers in the design phase
Why

10. Designers should prepare for the “why’s”
Behind the task “why’s”
Visual “why’s”
A
How A
Why and How to successfully include
engineers in the design phase
Why

11. “Why are we build this feature like this?”
“Why are customers asking for this?”
“Why are we adding the button here and not there?”
“Why are we removing the footer from this section?”

13. Consider implementing asynchronous design meetings
B
Why and How to successfully include
engineers in the design phase
Why
How A B

14. Consider implementing asynchronous design meetings
B
Why and How to successfully include
engineers in the design phase
Why
How A B
What are those?

15. AsynchronousSynchronous
Classic type of meetings
(conferencing or in the same room)
Real time interaction
Designs are shared using modern tools
Stakeholders reply at any convenient time
What are those?

16. What are the advantages?
Consider implementing asynchronous design meetings
B
Why and How to successfully include
engineers in the design phase
Why
How A B

17. What are the advantages?
Team members don’t have to break their workflow
in order to attend design meetings.
Manage their own time to:
Focusing on their tasks
Review, see or test designs at any point of the day

18. Everything is stored, for future references all the
feedback form the team is gathered in the same place
What are the advantages?

19. Ability to think deeply about the problems
What are the advantages?

20. Can I have both?
Consider implementing asynchronous design meetings
B
Why and How to successfully include
engineers in the design phase
Why
How A B

21. What is the best way to prepare async meetings?
Consider implementing asynchronous design meetings
B
Why and How to successfully include
engineers in the design phase
Why
How A B

22. Abstract FigmaZeplin InVision
What is the best way to prepare async meetings?

23. Pixel-level adjustments
Complex UX flows
Abstract FigmaZeplin InVision
What is the best way to prepare async meetings?

25. Watch out!
Make sure that you always specify the type of
feedback that you are looking for
(by saying, for instance, “I am looking for feedback
on the user experience flow of this feature”)
Tip #1

27. Leave your design decisions as
comments on the tools that you use
Tip #2

29. Ask, ask, ask
C
Why and How to successfully include
engineers in the design phase
Why
How A B C

30. Reuse components
D
Why and How to successfully include
engineers in the design phase
Why
How A B C D
Developers can focus on the important things

31. Receive suggestions from them
Empower their relationship and empathy with users
Invite engineers to user testing sessions
E
Why and How to successfully include
engineers in the design phase
Why
How A EB C D

32. Why and How to successfully include
engineers in the design phase
Why
How A FB C D E
Speak the same language!
F

33. 33
Quiz time

34. Bottom drawer
Menu
List
What is the name of this element

35. Bottom drawer
Menu
List
What is the name of this element

36. 36
Tab
Text Field
Divider
What is the name of this element

37. 37
Tab
Text Field
Divider
What is the name of this element

38. 38
Header
Banner
Message
What is the name of this element

39. 39
Header
Banner
Message
What is the name of this element

40. 40
Congrats

41. Hand-off
2

42. Designs approved!

43. Try to keep mockups up to date
Hand-off
Try to keep mockups up to date

44. Do not forget about copy
Hand-off
Try to keep mockups up to date
Do not forget about copy

47. Interactivity
Hand-off
Try to keep mockups up to date
Do not forget about copy
Interactivity

48. Assets
Hand-off
Try to keep mockups up to date
Do not forget about copy
Interactivity
Assets

49. “Can you export this icon?”
“Where can I find this picture?”
“Can you compress this image! Thanks in advance. :Angel-emoji:”

51. Checklist time
Hand-off
Try to keep mockups up to date
Do not forget about copy
Interactivity
Assets
Checklist time

52. Implementation and support
3

53. Review engineers work
Implementation and support
Review engineers work

54. Frustrations and conversations
Review engineers work
Frustrations and conversations
Implementation and support

55. Sharing with everyone
Review engineers work
Frustrations and conversations
Sharing with everyone
Implementation and support

56. 56

57. Iterate on the process
4

58. The most important
part of the process is
for it to be adjustable!

59. And all of this to achieve…

60. Healthier and happy workplace
Empathy, transparency, confidence
Everyone informed about company/product decisions
Teams compromising on details
Educates new joiners
Better product/project

61. What about a bigger team?
Is this process scalable?
But…

62. How to get started
And finally,

63. Gather your team to see how can
you adapt these methodologies
into your company culture.
(I am here to help!)

64. 64

65. Thank you so much!
@maria_guigas
mariamargarida.me
mariamargaridals@gmail.com

66. Questions!