Unlocking collaboration: A framework for developers and designers

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

Translations The Design file

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

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

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/