A presentation at WeyWeyWeb in in Málaga, Spain by Alicia Calderón González
Unlocking collaboration A framework for developers and designers Alicia Calderón González Wey Wey Web Conference 2023
Who is responsible for how good is the UI?
We care about our practice
We care about UIs & products
Great products or UIs do not happen without collaboration
In other words… We kind of need to get along Easier in theory than in practice
Look mum, I made a framework
Design system Design tokens Annotations Handoff
Some collaboration building blocks Design system Design tokens Handoff
Just a bunch of bricks piled up, not a structure
All bricks, no mortar
The “in-between stuff”
What does it take to collaborate?
A collaboration framework
Communication Zero collab Community
Communication Collaboration Zero collab Community
Communication Collaboration Alignment Zero collab Community
How can you implement this framework?
Level 1 Tools & Language
Before collaborating, we need to start communicating
Common spaces Software tools
Common spaces
Translations Software tools
Images from help.figma.com “Design, prototype, and explore layer properties in the right sidebar”
Common spaces
Great tool, or collaboration nightmare
Designer, think of the developer as the user of your design file
Naming conventions Shared language Design tokens
Design tokens
Design tokens Shared SSOT Design system Shared ticket & requirements
This is just a preview
Make it work for your team
To start communicating… We need tools that bridge the gap between disciplines
Shared SSOT
Without the “in-between stuff”
The structure falls flat
What does it take to go from communication to collaboration?
Communication Collaboration Zero collab Community
How can we work together if the process makes us work apart?
The Design Handoff,
The Design Handoff, the collaboration fallacy
Dear developer, Find here the link to the design file. Any questions? Good luck! Alicia
A meeting at best, a simple transfer at minimum
Design Handoff Design Process Development Process
“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!” Brad Frost on Design Better Podcast (Brad Frost and Dan Mall: Rethinking Agile and how designers collaborate with developers)
If we want to start collaborating, we need to work together under a shared process
Level 2 Process
Involve developers from the beginning, and earlier Share product decisions
Start Delivery Beginning During Near the end
Project scoping Start Delivery Before (it starts) Beginning During Near the end
Project scoping Alignment before the start on the problem to solve & scope, the requirements and feasibility considerations
Project scoping Problem Requirements Feasibility
Onboarding/ Project Kickoff Start Delivery Before (it starts) Beginning During Near the end
Onboarding/ Project Kickoff Agree on shared goals, confirm the requirements and timeline, dependencies and collaboration specifics
● Feasibility checks ● Aligned processes Start Delivery Before (it starts) Beginning During Near the end
Feasibility checks Have conversations about the design’s feasibility from the exploration phase onwards & share product decisions
● Feasibility checks ● Aligned processes Design Handoff Start Delivery Before (it starts) Beginning During Near the end
Design Handoff 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 QAs Start Delivery Before (it starts) Beginning During Near the end
Design QAs Designers have to be involved with the development process by doing Design QAs
Design QAs Retrospective Start Delivery Before (it starts) Beginning During Near the end
Retrospective Reflect as a team on what worked well, what you’ve learned and what needs to change… and review the collaboration
Project scoping Onboarding/ Kickoff ● Feasibility checks ● Aligned processes Design QAs Retrospective Design Handoff Start Delivery Before (it starts) Beginning During Near the end
What does it take to go from communication to collaboration?
Communication Collaboration Zero collab Community
Communication Collaboration Zero collab Community
It’s about aligning under one process: building the product together
Shared goals, shared meetings and shared product decisions
It’s definitely not about how many meetings…
Who is involved in these When these happen What is done in the meetings
Dev + Design Dev + Design Dev + Design Dev + Design Dev + Design Dev + Design Start Delivery Before (it starts) Beginning During Near the end
Design Process Development Process
Design Process Development Process
That said, here are some shortcomings
We have the “in between stuff”!
To framework, or not to framework
Level 3 Mindset
The collaboration mindset
Share the ownership
Respect each other’s craft
Be willing to make compromises
Stay curious & open to learn
Put in the work and get to know each other
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
Some specifics per discipline
Designer Engage with the technical aspects of your work
Designer Guard fidelity, but acknowledge its limitations
Designer Facilitate the collaboration and adapt your process
Developer Connect your work to the product level
Developer Guard the feasibility, but explain yourself in the process
Developer Take ownership of design translation tools
What does it take to collaborate?
Communication Collaboration Alignment Zero collab Community
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
My takeaway from this collaboration framework
Thanks! aliciacalderon.design@gmail.com linkedin.com/in/alicia-calderon/
for free. You
can too.