Designing the Design Process for Collaboration, Testing and Developer Handoff

This is an older post (from 2016). A lot of tools have come out since then, such as Figma, that addresses many of these challenges. I will likely create an updated version of this (Figma version!) in the near future but some of these concepts still apply to some extent.

An approach for Improving Designer Collaboration, Process and Scale

Over the past few years of working cross-functionally with product, engineering and design teams, I’ve come up with a simple system that (currently) solves a few pain points that I’ve witnessed time and time again with teams working together on either large and/or small scale projects.

The Issue

As a designer who’s working on a project with multiple designers

1. There are issues finding the latest version of the source file.
2. Depending on how large the team is, assets can be scattered throughout a project folder with multiple versions of the same file.

As a designer that’s just starting on an existing project

1. I have issues finding the project folder in search of the latest version(s) to work off of.
2. I have issues finding older, dated versions to refer back to as needed.

As a lead that’s managing multiple designers on different platforms

1. I have issues keeping things organized and up to date on dropbox (or whatever storage service you use) at all times. Some designers even tend to work on a file locally and forget to backup their work on a daily basis.

As a Developer

1. I have issues with accessing the most updated designs and assets. Most of the time I’ll have to reach out through email or chat to make sure that I have the latest and greatest. Invision Inspect has helped tremendously in this area.

The Solution

Adopt the process of how developers work in Github. For years, developers have been able to efficiently work, collaborate, version and build products using Github. So why can’t designers do the same? With just a bit of discipline, openness to trying a new approach and breaking some old habits (both bad and good) this system may be perfect for your team.

Before I go into explaining how it works, I want to first mention that I’ve been using this system for about two years now and as it’s not completely bulletproof, it beats the hell out of any other system I’ve come across or used in the past. It has made it so the designers can work together much more efficiently and keeps everyone on the same page at all times. No more of those “Hey! Where is the latest version of the Sketch file?” conversations. It’s now more like “Hey everyone, the Master sketch file is updated, please pull from it what you need and copy it into your branch.”

Some Key Github Terms that you’ll Need to know

Branch

A parallel version of a repo. It is contained within the repository, but does not effect the master file allowing you to work freely without disrupting the “live” version.

Designer’s Translation: A separate folder from ‘Master’, labelled with the designer’s name (Branch-Name), that contains the copied version of the master file that they are working on

Pull

Pull refers to when you are fetching in changes and merging them. For instance, if someone has edited the remote file you’re both working on, you’ll want to pull in those changes to your local copy so that it’s up to date.

Designers Translation: The activity of copying the ‘Master’ file into your individual Branch.

Merge

Merging takes the changes from a branch and applies them into another branch (or to master).

Designers Translation: The activity of copying approved changes (from a branch) over to the Master. This can be as simple as copying over individual art boards (in Sketch) that you’ve been working on into the Master file.

Push

Pushing refers to sending your committed changes to a remote repository such as GitHub.com. For instance, if you change something locally, you’d want to then push those changes so that others may access them.

Designers Translation: The activity of taking the updated ‘Master’ file and “pushing” the latest changes to Invision (or any other tool you use to test, present or gather feedback from) via Craft Sync.

Example Folder Structure for an Entire Project

Note that each platform (iOS, Android, Web, etc.) will have its own set of branches and master file. This keeps everything nice and tidy :)

Approvals

Teams will need to work together on how they handle their approval process as it will vary from team to team (i.e teams with more seniors may just merge to master without going through a formal review process with a lead, or the controller in person).

The idea is to create a cadence where the designers working within their branches have a review process with the lead (the controller) and all approved designs then get merged into the master upon approval. Again, depending on how teams work together and the trust they share, it can be as simple as “Looks good, go ahead and merge it into the master file and let the team know in Slack that the master file has been updated”.

Versioning

Here’s a simple way to version your files. Each time a merge has been made from a designer’s branch to the master file, the designer would simply append a date to that old file which then get’s “Versioned” by throwing it into the “Versions” folder. This will take a bit of discipline on the designers part, but it may save their ass in the long run when they need to refer to an older version.

In Conclusion

So this is basically the gist of how this system works. As mentioned, it’s worked rather well for me and my teams. In situations where there were multiple designers working on different platforms in parallel and in different parts of the world with only one week ahead of development, this system proved very useful. It aligned everyone at all times, designers always knew where to find the latest version, we were 10x more organized, internal reviews were much more seamless and the design-to-development workflow was less painful.

I’d love to hear other approaches on how you work and collaborate with your team. Feel free to reach out if you have any questions or suggestions as I’m always looking to improve my processes.