Best practices for designer/developer collaboration

June 3, 2013 George Dean

Successful product development requires effective collaboration between designers and developers. That sounds nice in theory, but what does it mean for your team on a day-to-day basis? Here are some specific practices that you may find valuable:

Check-in about design status every day: Designer reviews the backlog after standup with the team to ensure that the team is not blocked by any design-related issues or questions.

Name your components: Designers create objects and name them. Design these in high fidelity and render them on the style guide.

Sit with the team: Designers overhear design conversations that are happening between the product manager and the developers.

Two designers, two projects: Allocate two designers to work together on two projects. They work half time on each, enabling them to collaborate all the time without charging the client for two designers.

Develop interactive wireframes: Designers create clickable prototypes early in the process before locking in the final design. These are used to perform user testing and to evaluate cost with developers.

Communicate layout mechanics on mobile platforms: Developers communicate platform-specific constraints to designers to ensure that designs are not created that cannot be built.

Create and post personas: Start by posting lightweight personas on the wall that are just sheets of paper with names on them. As pieces of the personas become apparent during discussions, update them. This helps to clarify that each feature is being built with a clear idea of its target audience.

Give design practices names: Naming best practices allows them to be codified and referenced as part of a standard, shared vocabulary.

Spike on designs in code: Developers use SASS, HAML, and Ruby to quickly build out potential designs without tests, to be thrown away afterward.

Use persona names in tests: Instead of creating new names for users in tests and fixtures, use the names of personas.

Designers write HTML and CSS: Instead of leaving all of the coding to developers, designers take ownership over the HTML and CSS associated with their designs.

Pair designers and developers: This enables designers to learn about development and developers to learn about design. It is better suited to web development than mobile development since it is easier to iterate rapidly on HTML and CSS than on native code.

Build low-fidelity prototypes with high-fidelity components: Designers don’t build high fidelity designs across the board, because doing so results in some designs going out of date. Instead, they build low fidelity mockups with high fidelity components.

Externalize everything: Make all design decisions visible to the entire team by posting designs around the team’s workspace.

Show evolution of designs: Post historic designs next to their revised counterparts to show the evolution of the team’s designs.

Create an idea board: Build an epic-level reverse-Kanban board with three columns: “Now”, “Next”, and “Later”. Generally you’ll have 2-3 cards in the Now column, another 2-3 in the Next Column, and the rest (~20-40) in the Later column. The idea board externalizes future epics, gives stakeholders a place to park long-term ideas, and gives a big picture view into what the team is working on.

Design studio: Designers from different projects get together to collaborate on each other’s work and provide actionable feedback.

Represent design needs with labels in Pivotal Tracker: Use two labels “UX design needed” and “Visual design needed” to depict whether stories are blocked on user experience design or visual design.

Involve designers in early stages of feature design: Product managers should collaborate with designers from the beginning stages of new feature design.

About the Author

Biography

Previous
When Should I Build a Live Style Guide?
When Should I Build a Live Style Guide?

Over the last several projects, we have chosen to commit to the construction and maintenance of a live styl...

Next
Installing FreeBSD 9.1 on Soekris net6501 via PXE
Installing FreeBSD 9.1 on Soekris net6501 via PXE

Abstract Installing FreeBSD on the Soekris net6501 has traditionally been a challenge, for the Soekris has ...