Better Design & Development Collaboration

While the functions of the design and development teams are fundamentally very different, actively bridging the gap with a focused and refined communication structure is key to the success of your process, and your product overall. Here are some of the processes we’ve put in place to make sure our teams are always working together instead of against each other.

Create a Communication System

It’s important to keep your eye on the basics. If you want the entire product team to be involved during each key stage of design and development, you need a system in place that allows them to do so effectively. We have three main communication points that allow for an open yet refined process.

Regular Check Ins

During development it can be easy to silo communication to just the morning stand-up scrum. Build a communication structure that allows teams to dive a little deeper than the quick format that stand-ups provide. In addition to daily check-ins, design and development leads will meet to talk about new methods or technologies that could be best used to solve the problem, as well as discuss any current project roadblocks.

Utilize Tools

We rely heavily on a suite of tools that allow us to keep our development sprints on track while still maintaining inter-team availability. These include Slack for team questions and updates, Basecamp for decisions involving the client and Pivotal Tracker for all of our ticket tracking needs. Pivotal also serves as our QA testing platform.

Get Close

There are several ways to make this happen, but we find that working in close physical proximity to each other helps keep communication easy and open. Why create that extra barrier of distance if it isn’t necessary? Our office is located in an old SOMA warehouse and stays stocked with everything you need to solve problems, build great software, prototype hardware projects, run the perfect meeting -- and maybe fix your bike. It’s important to set a scene where inter-team communication and collaboration happens easily and effectively. This allows us to remain agile, and still get that quick audible answer when we need to.

Process, Process, Process

Our product design process involves the key project stakeholders from the very beginning. Typically we have the client, project manager, lead developer and lead designer working through exercises together for early understanding and discovery. This allows all relevant parties to have meaningful impact on product direction. There are many stages a product can go through before development, but some are critical to almost every project.

User story mapping - To build a user story map, we ask how a user will have his or her problem solved by using our product, and then we flesh that scenario out. Each interaction with the product is organized into a chronological "story" to better understand each touchpoint the user will have and therefore what the design and development teams will be building.

Sitemaps - The design team will present these outlines of overall product architecture to development. It is the design team’s responsibility to demonstrate how everything in the user story map will fit together so that development understands scope and user flows.

Wireframes - At this point in the game, development already understands the how, so wireframes help flesh out the what. Design presents wireframes to Development that outline the specifics of functionality and placement.

Prototypes - The design and development teams each create their own prototypes. Design creates them with tools like Invision to demonstrate complex user flows, while Development creates them as proofs of concept to test functionality.

Interaction Design - Interaction design tools like Pixate help demonstrate complicated animations and transitions that would otherwise be impossible to explain to the development team.

Visual Design Specs - Communicating the specs from Design to Development accurately and in detail is clearly an important part of the process, but is traditionally very time-consuming. Design specification tools like zeplin greatly cut down time for creating spec sheets and Development ends up with pixel-perfect specifics for distances, fonts, images, and color.

QA Testing - Bug logging is when we take a product from “working” to “wonderful”. For very small, quick fixes Design and Development will sit together to solve it. For most visual design bugs, Design takes screenshots documenting it and creates a new bug ticket in Pivotal. If a more complicated animation or flow bug is discovered, Design will take video recordings and attach them to a new ticket in Pivotal. Everything gets picked up, and everything gets solved.

Be Clear

A successful design and development collaboration means that any one team member always knows where the project stands and can pick up where someone else left off. From the client to project manager to lead designer and lead developer, everyone should have access to and an understanding of the current state of the product at any given time. Utilizing the communication tools is key to accomplishing this level of transparency, but also critical to successful completion of the deliverables outlined above is a clear outline of acceptance criteria.

The acceptance criteria is essentially a list of items or problems that need to be solved before accepting something “complete”. When starting a project sprint, the user story map gets broken down into individual tickets, each of which is someone’s responsibility to complete. The word “complete” here has a very specific and detailed meaning. If you are not specific in your acceptance criteria of each individual ticket, steps may be skipped and harmful assumptions can easily be made. Again, this comes back to communication. If the acceptance criteria for deliverables is clear, than the team can continue to function trusting that what’s “done” is actually done, and the user story map functions as it should.

Each project includes regular check-ins to assess process and communication, as well as methods and technologies that could be useful. The deliverables list above is shared with everyone on the team so that they each have access to the current state of the product design and possess a working knowledge of the overall success of the process. At the conclusion of a product’s development, we are able to look back at the project and identify any pain points. How could we do that better? Are there any tools out there that could help us make this more efficient? And most importantly, did the Development and Design teams communicate with each other clearly and effectively?

Every product is a test of process. A successful Design and Development collaboration uses all available tools to ensure that inter-team communication is abundant, efficient, collaborative and therefore effective.