Unlocking collaboration: A framework for developers and designers - Alicia Calderón

Unlocking collaboration: A framework for developers and designers - Alicia Calderón

1. Who is responsible for how
good is the UI?

2. Unlocking collaboration
A framework for developers
and designers
Alicia Calderón González
Wey Wey Web Conference 2023

3. Designer-developer collaboration

4. We care about our practice

5. We care about UIs & products

6. In other words…
We kind of need to get along

7. Look mum,
I made a framework

8. Design tokens
Design system Annotations
Handoff

9. Some collaboration building blocks
Design system
Design tokens
Handoff

10. Just a bunch of bricks, not a wall

11. All bricks, no mortar

12. The “in-between stuff”

13. A collaboration framework

14. What does it take to
collaborate?

15. Zero collab
Community

16. Communication
Zero collab
Community

17. Zero collab
Community
Communication

18. Communication Collaboration
Zero collab
Community

19. Communication
Zero collab
Community
Collaboration

20. Communication Alignment
Zero collab
Community
Collaboration

21. Communication
Zero collab
Community
Collaboration Alignment

22. Level 1
Tools & Language

23. Before collaborating, we need
to start communicating

25. Common spaces Software tools

26. Common spaces

27. Translations Software tools

28. Images from help.figma.com “Design, prototype, and explore layer properties in the right sidebar”

29. Translations
The Design file
Common spaces
+

30. Great tool,

31. Great tool, or
collaboration nightmare

32. Great tool, or
collaboration nightmare

33. Designer, think of the developer
as the user of your design file

34. Shared language
Naming conventions
Design tokens

35. Design tokens

36. Shared SSOT
Design tokens
Design system
Shared ticket & requirements

37. This is just a preview

38. Make it work for your team

39. To start communicating…
We need tools that bridge the gap
between disciplines

41. Shared SSOT

42. Without the “in-between stuff”

43. The structure falls flat

44. What does it take to go from
communication to collaboration?

45. Communication Collaboration
Zero collab
Community

46. How can we work together if the
process makes us work apart?

47. The Design Handoff,

48. The Design Handoff,
the collaboration fallacy

52. Dear developer,

Find here the link to the
design file. Any questions?

Good luck!
Alicia

53. A meeting at best,
a simple transfer at minimum

54. Design Handoff
Development ProcessDesign Process

55. “A lot of times developers are not collaborative
not by choice, but by how the process involves
them, in waterfall or agile they are last in mind,
thought of as implementers as best, you get
handed what design produces and just crank it
out, and if there are any issues with it just shut
up and do your job!”
Brand Frost on Design Better Podcast (Brad Frost and Dan Mall: Rethinking Agile and how
designers collaborate with developers)

56. Design Handoff
Development ProcessDesign Process

57. The boundary between two
separate processes

58. If we want to start collaborating,
we need to work together under
a shared process

59. Level 2
Process

60. Involve developers from
the beginning

61. Involve developers from
the beginning, and earlier

62. Involve developers from
the beginning, and earlier
Share product decisions

63. Start
Delivery
Beginning During Near the end

64. Start
Delivery
Before
(it starts)
Beginning During Near the end

65. Start
Delivery
Before
(it starts)
Beginning During Near the end
Project scoping

66. Alignment before the start on the problem
to solve & scope, the requirements and
feasibility considerations
Project scoping

67. Problem Requirements Feasibility
Project scoping

68. Delivery
Project scoping
Before
(it starts)
Beginning During Near the end

69. Start
Delivery
Project scoping
Before
(it starts)
Beginning During Near the end

70. Start
Delivery
Onboarding/
Project Kickoff
Before
(it starts)
Beginning During Near the end

71. Onboarding/ Project Kickoff
Agree on shared goals, confirm the
requirements and timeline, dependencies
and collaboration specifics

72. Start
Delivery
●Feasibility checks
●Aligned processes
Before
(it starts)
Beginning During Near the end

73. Have conversations about the design’s
feasibility from the exploration phase
onwards & share product decisions
Feasibility checks

74. Start
Delivery
●Feasibility checks
●Aligned processes
Design Handoff
Before
(it starts)
Beginning During Near the end

75. Explain where your design choices come
from: what was the problem you were
trying to solve, the reason you solved it
like that, and the intended impact of it
Design Handoff

76. Start
Delivery
Design QAs
Before
(it starts)
Beginning During Near the end

77. Designers have to be involved with
the development process by doing
Design QAs
Design QAs

78. Start
Delivery
RetrospectiveDesign QAs
Before
(it starts)
Beginning During Near the end

79. Reflect as a team on what worked well,
what you’ve learned and what needs to
change… and review the collaboration
Retrospective

80. Start
Delivery
Project scoping RetrospectiveDesign QAsOnboarding/ Kickoff ●Feasibility checks
●Aligned processes
Design Handoff
Before
(it starts)
Beginning During Near the end

81. What does it take to go from
communication to collaboration?

82. Communication
Zero collab
Community
Collaboration

83. Communication
Zero collab
Community
Collaboration

84. It’s about aligning under one
process: building the product
together

85. Shared goals, shared meetings
and shared product decisions

86. It’s definitely not about
how many meetings…

87. Who is involved in these
When these happen
What is done in the meetings

88. Development ProcessDesign Process

89. Development ProcessDesign Process

90. Start
Delivery
Dev + Design Dev + DesignDev + DesignDev + Design Dev + Design
Dev + Design
Before
(it starts)
Beginning During Near the end

91. The mortar to the bricks

92. That said, here are some
shortcomings

93. We have the “in between stuff”!

94. To framework,
or not to framework

95. Level 3
Mindset

96. The collaboration mindset

97. Share the ownership

98. Respect each other’s craft

99. Be willing to make compromises

100. Stay curious & open to learn

101. Put in the work and get to
know each other

102. Share the ownership
Respect each other’s craft
Be willing to make compromises
Stay curious & open to learn
Put in the work to get to know each other

103. Some specifics per discipline

104. Engage with the technical
aspects of your work
Designer

105. Guard fidelity, but
acknowledge its limitations
Designer

106. Facilitate the collaboration
and adapt your process
Designer

107. Connect your work to the
product level
Developer

108. Guard the feasibility, but
explain yourself in the process
Developer

109. Take ownership of design
translation tools
Developer

110. What does it take to
collaborate?

111. Communication
Zero collab
Community
Collaboration Alignment

112. What to do at Ops level:
●Set up effective shared communication spaces
●Document collaboration best practices
●Conduct regular retrospectives
●Promote a culture of curiosity and continuous learning
●Foster shared ownership and understanding of goals
●Hire with team-building in mind

113. My takeaway from this
collaboration framework

114. Thanks!
[email protected]
linkedin.com/in/alicia-calderon/