Collaborative Engineering and Design Tools

Avatar of Sarah Drasner
Sarah Drasner on

Working at any large company, the greatest hurdle is always the problem of scale. Be it engineering, design, or how they work together, communication is the key to a successful business. Here are some of the tools that I’ve seen help a great deal while collaborating on a large team. With a number of engineers and designers in the mix — not to mention hybrids like me — working together seamlessly and staying focused on a common goal for a long period of time can be challenging. Here are a number of tools I’ve seen firsthand to ensure tight and seamless collaboration and communication.

Zeplin

One of the most time-intensive tasks a designer has at a big company isn’t the ideation or the design, it’s producing the specs. Whether you’re designing for the Web, Android, or iOS, Zeplin has been a huge boon for productivity. You can import your Sketch documents and Zeplin will even export code snippets. You can export assets directly from the screen, and at multiple pixel densities if necessary. There’s even a Slack integration if you so choose.

zeplin tool screenshot

I’ve heard designers say that because this tool exports with a guideline page with a style guide that includes a palette, they are forced to stay on track with their color choices to the component library even more- it becomes very obvious if they stray by a little. In a world where consistency reigns, this is a godsend for cross-team collaboration. It shaves hours off of each project as designers no longer have to spec out every single design with all of the padding, font-weight, and spacing.

CodePen

In terms of quick inspiration, sites like CodePen and Dribbble are well known for their ability to stoke some creative fires. Designers and developers spend a lot of time expressing themselves through code and pixels on these sites. But I find CodePen to be a wonderful place to be collaborative in a professional environment. Here’s a breakdown of how and why I’ve done this with large teams:

1) It’s useful for debugging. Working with a large codebase with a few hundred other developers can be an amazing learning experience, in part due to increased quality of code through code reviews, but also because of the challenges you face. You’re not simply writing code, you’re also writing code that others can read.

It’s exciting to be a developer working on a large codebase that millions of people will see. The flip side of this is that you often have to move quickly on these large teams, and there are a lot of moving pieces. Due to this fact, the ability to see a piece of Front-End code in isolation becomes a powerful debugging tool.

An animation is worth a thousand meetings.
– Rachel Nabors

2) Prototyping is another reason CodePen proves vital. I’ve worked on teams will often show interaction ideation and we have to produce potentially throw-away code very quickly. CodePen has helped us create fast work for communication purposes with their private pens and private collections. I will often screenshot the page I’m working on so as not to build out the entire thing, and absolutely position just the pieces of interaction I need to demo over the top of it. Inevitably, after some iterations, I’ll have a few different versions for my product managers to go through, so I’ll make a private collection.

Private collections allow me to group together many versions of new work that my coworkers can browse through and work with at a glance. It also becomes a resource for other designer/developers looking to fork my pens to work with as a template so that they have the compiled site-wide stylesheet and JS file.

3) CodePen has an active community of people working on solving common problems. A lot of us use CodePen for the same reason we use Stack Overflow: if a problem comes up for us, it has probably come up for others. There are a ton of pens to reverse engineer to understand a technique better, and even well-organized design patterns that attack some common use-cases. These days, if you’re not relying on the community to help educate you, you’re doing unnecessary footwork.

Quip

Quip is a tool that one of my former colleagues and Engineering Lead, Joe Tuson, turned me on to. I use Quip for shared, collaborative documents, and even to organize large projects like designing systems on a high level. It’s a little easier-going than a wiki that seems more formal and tends to be written once, communicated out, and left. Quip encourages collaboration through their easy to work with GUI, and ability to see notifications of what’s been changed, when it’s changed. Most of the stuff I work on is proprietary, so I made a little fakey mcfakerston doc example below so you can see how it works:

I particularly like that even within the notifications in the sidebar, you can see who has viewed the change, which allows you to get a handle on how many people are up to speed on the document.

We would all love a world where a waterfall workflow from product → design → engineering → QA happens in a neat linear fashion. Unfortunately (or perhaps fortunately) this workflow doesn’t allow for quick iteration. The flow of tickets and mocks on a moving project in Jira or Github can become a bit confusing. Quip has become very helpful for quick design and product changes by allowing the mocks to live in the same place as our to do lists. It’s easily to maintain because it’s easy to keep updated, commented on, and no big deal to delete from.

They have a browser version as well as desktop app, so it’s very simple to customize your notification preferences. Living documentation for a quick and shared project is invaluable.

Lingo

Most big companies use storage such as Dropbox to house design documents, but what if you have a need for just an icon? The Noun Project has an app that allows you to seamlessly browse through a lot of visual information and group by project. If you have shared product illustrations like common SVGs that are consistent for visual branding, this tool is really wonderful.

They support a lot of different file formats, and if you have the app open and are taking screenshots, you can get a notification that allows you to import the screenshot in one click. This is awesome for collaborating on a few different versions of designs and communicating all of them at a glance. Personally, I’ll make a few different versions of a product mockup and screenshot each one of them, importing them into lingo as I go. I can then keep each review process separate and even easily present them all for design reviews.

I’ve found this tool to be especially helpful working with icons. Looking for the correct icon and keeping a component library and sprite sheet up to date on a large team can be really cumbersome. Lingo makes searching for, organizing, and keeping your icon system up to date really simple.

Elegantt

Most people know about the benefit of the simplicity of Trello’s swimlanes, but the thing I like most about it is plugin feature, called Elegantt. This is a gantt chart feature that lets you plot what you’ll be working on, when. As someone who constantly balances a lot of different types of projects, I find this useful because you can visually see if you’re taking on too much work at once and maximize your productivity or set proper boundaries.


Whether you’re a designer or an engineer or both, collaboration with other teams or across teams is as important as the actual work. These are some of the tools I’ve tried, tested, and like working on large systems. If you have some that have worked for you as well, feel free to add more in the comments. The more we share, the better we all work together.