How Design Collaboration Works With a Fully Distributed Team

Sarah Kuehnle, Head of Product at Dribbble, is a designer, illustrator, engineer, and self-proclaimed (and proud) geek.

She gets excited about tools and processes, and loves experimenting with them probably to a fault. She’s constantly testing out new tools to make the Dribble design team as effective as possible.

Many companies turn to Dribbble as a source when looking to hire top designers.

Designers on Dribbble, on the other hand, are looking to accomplish a lot of different things. They want job opportunities, but they’re also looking for a community of designers to learn from and spend to time collecting feedback and feeling more connected to the fellow designers. Sometimes we do team building for remote employees.

What is fully remote team?

Dribbble currently has a fully remote team of about 34 people. They consist of designers, engineers, creators, builders and business leaders, but they all have one thing in common. They’re passionate about design and community.

They spend their days talking to other designers about what they do, how they work, what challenges they’re facing and how to help them overcome those challenges.

Dribbble has taken a lot of the things they learned from their community and applied them back into their own processes internally, and to the tools that they use to help their designers do their best work.

Can designers work remotely?

Sarah previously worked as a product manager and designer for another product she was very passionate about. The job had everything that she wanted, and had a great community and team that were all passionate about the company and their roles.

But eventually life happened, as it does, and Sarah made the decision to move across the country from San Francisco to Connecticut.

Even though the company was located in San Francisco. They did have some engineers that had started working remotely. So Sarah decided to ask if she could go remote as well.

She proposed the idea to her boss that she could be the first remote designer on their team and she had remote working skills for this.  Sadly, the proposal was rejected, and even though Sarah had a plan and was passionate about making a remote design role work, her boss has concerns about how designers could work in a remote environment as well as how they could support her.

She had to leave that role, but it brought her to where she is today, at Dribbble, and gave her the momentum to solve common challenges associated with working in a creative and collaborative role while remote.

Tools for Collaborating On Design Remotely

With the amount of technology at our disposal, there are many tools that allow remote teams to stay collaborative and in constant communication. Dribbble has experimented with a number of those tools and landed on a few that work very well for their own needs and processes.

Slack and Zoom for remote team

For day to day communication, Dribbble uses Slack for text chat, and Zoom for video chat.

Their Slack channel is filled with gifs and emojis and is a place. Their remote workers enjoy contributing to and being a part of. They have channels in Slack for all of their project teams and for specific topics that people care about and want to talk about with their peers (like dogs, and video games).

They’ve also experimented with a lot of video conferencing tools and landed on Zoom because it allows them to support all of their teams as they continue to grow. With Zoom, they can share screens very easily on desktop as well as on mobile devices. They can also invite other people not in their team into chats seamlessly.

While Slack and Zoom are rather intuitive and are very popular tools. Among a lot of remote teams, two lesser known features on Zoom that Sarah swears by are “enhance my appearance,” which smooths your skin and gives you a fresh, youthful glow, and green screen support.

Since Zoom supports green screens, which also work when having a solid color wall behind you. Users can even more creative by imagining super-imposing themselves into foreign locations. So even, work-from-home employees can compete with their digital nomad colleagues for the coolest backdrops of that day’s meeting.

Sketch – universal tool for full-time and remote designers

Dribbble chose Sketch as their primary tool for designers within their organization.

It’s an excellent tool for designing screens for mobile, desktop and web. It has a really rich plug-in environment which is used by their developers as well and makes their workflows really customizable.

They decided to use one design tool as a team. Because it’s easier to teach new people as they come along and it makes it quicker to share files and collaborate when the whole team is using the same tools.

Tackling the concerns of why designers can work remotely

Since Sarah was denied the ability to work remotely because she was a designer. She set out to disprove some of the myths commonly associated with remote work in creative and collaborative roles.

Concern: You can’t brainstorm effectively if you’re not in the same room.

In a physical space, you can throw a bunch of people into a conference room, hand them some markers and easily collaborate on ideas on a whiteboard.

The problem with this model is that eventually someone has to transcribe the whiteboard notes, take a photo of the board or hope that the next meeting doesn’t erase their creation before it gets documented.

Even in a physical space, there are issues you can run in to in creative collaboration.

Solution:

To solve this problem, Dribbble uses the InVision freehand tool.

InVision is a digital design platform that has all sorts of tools and features that enable designers to collaborate more effectively and do their best work. InVision is also a fully remote company, so they’ve identified how their product can best support other remote teams.

Freehand is one of their lesser-known tools, but it’s essentially a virtual whiteboard. You can drag and drop things onto the whiteboard. You can draw in different colors on the screen, and it’s great for marking items up.

Each team member has a different marker color and can contribute to the same board and make additions to brainstorming and drafting sessions. Giving everyone a different color makes it easy to see who contributed what during the meeting and makes it easier to follow up with specific people about questions you have about what they’ve added.

Dribbble also does a lot of flowcharting when building different products.

With the Freehand tool, one designer can take the lead on a meeting as the transcriber, which works nicely when doing a flowchart, so it doesn’t get too overwhelming with people adding all of their own things.

Another great thing about a digital whiteboard, even for a located team, is that if you need to reorganize things, on a whiteboard, you’d have to erase and start things over. On a digital whiteboard, you can select those items and drag them around.

You can also create large documents with images and different flows. It’s one of their favorite tools because there are very few restraints for it.

So, by using digital whiteboard tools and video conferencing tools, you can brainstorm effectively, as a remote team. You just need a few good rules in place to make sure everyone’s effective.

At Dribbble, that’s meant letting one person control the marker during the brainstorm and have the rest of the team contribute.

Concern: It’s too hard to share research and sketches when working remotely.

In a regular office, design teams are often very privileged to have a space that everyone in the company can see where people can pin up research, sketches and other cool things that they’re working on, and everyone can see it. It gives the rest of the company a peek into what the design team is working on.

While this works sometimes, there are still problems with this tactic, even for teams in an office. For example, if you’re in a meeting room and want to reference something that’s pinned on the wall in another room you have to run out and take a photo or physically grab it off the wall and bring it into the meeting.

Also, for most designers, carrying a sketchbook is crucial. In an office it can be easy to communicate those ideas by showing people your sketches in person or having them visit your desk. If you’re remote, how can you easily share drawings without having to take a ton of photos and send them to people?

What solution is found in Dribble

For this issue, Dribbble uses InVision Boards. You can think about Boards a lot like Pinterest. It lets you collect a lot of different assets together.

What makes it a step beyond Pinterest in its functionality. Users can drag things onto the screen to add them to a board and then have the ability to add text, color swatches, downloadable files, etc.

Dribbble uses this tool to house their internal style guide, and it contains all of their logos, fonts, and colors for everyone in the company to access. On Boards, remote wokers can also add headings and organize their content very quickly.

To solve the sketching problem, Dribbble uses a few different tools. They use Boards to collect all of the sketches they do, but most of the designers use personal iPads to do all of their sketching.

The iPad and Apple Pencil have been transformative for their designers to create and share their sketches and have replaced traditional sketchbooks for their team.

Concern: You can’t gather feedback fast enough among a distributed team

In an office, people can walk up to your desk, peek over your shoulder at your screen and give feedback on whatever you’re working on. You also might do formal design reviews where you’ll present in front of a group to gather input.

Solution:

In a remote environment, Dribbble had to figure out a way to gather feedback quickly and make sure that everyone is notified when there is feedback to view.

To solve this problem, they turned to another InVision feature called Prototypes.

Prototypes are especially cool because if you use a tool like Sketch or Photoshop, they have a plugin called Craft, that allows you to send designs from your screen design tool directly into Prototype. So all you have to do is click a button, and all of your design work is made available for your team to take a look at.

To make it even easier to gather feedback, whenever you upload anything into a Prototype viewer, a user can enter comment mode, and click anywhere on the design and leave a comment. The designer who created the project then gets notified that feedback was added to their design.

They use this tool as part of their primary design process when working through the visual design of apps. But it further proves that there is a way to gather feedback remotely when you have the right tools.

Concern: You can’t work on the same design together.

In a regular office, if you want to work with another designer, you sit beside them. In a remote location that’s a bit harder.

Solution:

Dribbble believes that creativity is a team sport, so they do what they like to call “design pairing” where two designers jump on a call, and one is doing the design work, and another is coaching and providing feedback.

They’ve solved this pretty easily by being flexible and using the tools they have available to them to be as collaborative as possible.

Concern: It’s too easy to overwrite each other’s work

In a physical office, when two designers are working together, they usually divide and conquer on their tasks.

You will also use verbal communication to make sure you’re not working on the same file. When you save your files and drop it into your Dropbox, you make you sure you’re not overwriting the other person’s work.

But as most office workers know, It doesn’t always work that way though.

Solution:

Instead of the age-old hack of creating a million files with the word “final” at the end, Dribbble uses a tool called Abstract.

It’s a visual version control tool for designers that connects with Sketch and becomes a repository of the various versions of your project.

When you start a new project in Abstract, you create a “branch” which is essentially your own workspace to work on the thing you’re doing. Once you’ve finished working on that copy, you can submit it for design review.

What’s nice about Abstract is that it’s an entirely visual experience, which makes it perfect for designers.

If there are conflicts with versions of projects, Abstract has excellent visual conflict resolution tools for designs and notifies the designers that there are conflicts among versions for them to resolve.

If you’re working on a product that has different features but the same assets, you can create an abstract repository and reuse the same assets without recreating them.

For managers, you can also easily see flows of what your team has been working on and progress of different projects in Abstract.

Again, you don’t have to suffer. You just have to find the right tools to solve the concerns.

Concern: Your company’s creative culture will suffer if you allow designers to work remotely.

Dribbble has spent a lot of time and effort figuring out how to grow and promote their culture remotely.

Solution:

They try to get their team together a few times a year by holding a community conference called “hang time,” where they fly the whole team out to interact with each other and their users.

They also do a few retrospective meetings when they get together. Mainly they are there to eat, play board games and experience the city that they’re in.

Gathering in person in the same location every six months has been invaluable in creating stronger bonds with each other. They also have weekly and monthly coffee times and happy hours. It’s an open zoom call that everyone is encouraged to join, and it’s a time for them to talk and share personal stories and side projects.

How do we spend time together?

They’ve also started playing games together and have turned it into a time for them to laugh, unwind and enjoy each other’s company.

Above all else, they’re always looking for ways to have fun with each other and strengthen their team bonds. They recently started doing fun, photo Fridays where they’ll pick a theme or topic at random.

Lastly, the team are all avid readers, and so they formed a book club where every month they pick a book and anyone on the team who wants to participate will read that book and pick a time to talk about it.

It began when they held a secret Santa book exchange one Christmas, and they loved it so much that it evolved into the book club.

It’s a great way to step outside of your day and do fun things together. They also get together to draw and hold different creative exercises to build community and promote the creative culture internally.

Bonus Tips

Invest in the best tools for your team

Finding ways for your team to do their best work is hugely important. For Dribbble, that means every designer gets an iPad Pro and an Apple Pencil. They believe that the expense is worth the positive changes it will make to the designer’s workflow.

Show your work

It’s crucial to let people know what you’re doing in your design process. They use QuickTime to record quick videos to give updates and what challenges they were facing.

Design your workspace

Designers love having a cool workspace in an office. This doesn’t have to change when you’re working remotely.

Dribbble gives their workers a yearly office stipend to allow them to customize their workspace so they can do the best work possible wherever they are.

So can you be remotely creative? Sarah and the entire Dribbble team prove that you can.

Questions and Answers

Q: Are you remote employees mostly fulltime or freelancers?

SK: Right now Dribbble is focused on growing our team. In January 2017, we were 8 people and now were at 34 people. We’re looking to grow our team quickly. Everyone currently on our team is a full time employee.

Q: What do you consider is the biggest struggle when working on a remote team?

SK: Our biggest struggle, and the one that we’re the most sensitive about, is making sure that people feel like they are a part of the team.

We are spread out in different time zones but we also have a pretty strong management structure.

We also use a buddy system so that everyone who joins the team always has someone to talk to. If you’re in a time zone that doesn’t overlap with a lot of people we always make sure. There’s someone with a little bit of overlap that you can lean on.

We’re always looking for ways to improve our culture to make employees feel like a part of the team. We’ve invested a lot of time in the past year to make the culture very strong and inclusive for all of our remote team members.

Q: How can a remote designer communicate the design clearly and effectively to developers?

SK: Somehow even when the designer sits next to the developers, misunderstandings can happen. A big part of my career sitting at the intersection of code and design has been trying to make this process more effective.

InVision has a tool through the Prototype feature called Handoff. Which is essentially an inspection tool where the developer can go in and see the exact pixel dimensions of an asset. They can download the assets, see the colors and fonts and have all of that information.

Above all though, having strong communication is what’s even more important that the tools. What we’ve done at Dribble. When we’re hiring for the design team is that we’re looking for people who are are both front-end developers and designers.

We don’t have an explicit handoff between design and engineers. Our designers are also front-end and they will work on the visual presentation side as well as with a backend engineer to hook it all up.

Q: How are performance reviews done for something as subjective as design? Is compensation linked to performance?

SK: We do performance reviews, but the way we do them is that we set goals with our designers just as we do with the rest of the team.

Some of those goals are set based on things we want to accomplish as a company, but that’s kind of unfair when looking at compensation because often decisions are made that don’t involve a designer. A project manager might cancel a project or something else takes priority and so you can’t meet that goal.

We place a lot more importance on how you want to develop your career as a designer. So our designers will set goals like, “I want to learn more about how to work with graphQL” or “I want refactor the way that we’re using CSS today.”

They then pick up that goal as a personal project. As a manager, I look for opportunities for them to help them grow their career and help them be successful at Dribble. I’m looking for those opportunities that they can meet their goals.

A big part of making performance reviews successful, from my perspective, is that they should never be a surprise. So, every week when I have one on ones with my design team, we talk about how their goals are progressing and if they feel they should be changed.

The key is if Dribbble is headed in the right direction and the team is making progress towards those goals then performance reviews are going to go pretty well. So they’re not really a stressful thing for us. They’re more of a reflection of where we want to go next.

Q: What’s the main quality you look for when hiring a remote worker?

SK: Communication.

We also want people who are ok with having a bit of fun. We’re a bit of a goofy group. We definitely want people who want to have fun while they work and don’t mind jumping on calls to work together, especially on the design team.

Most importantly, we’re looking for people who are able to communicate and be open. You don’t have to be a designer to work at Dribble, but we want you to be passionate about communities.

‘Community comes first’ is our main value as a company.

Check out Sarah’s talk at Running Remote 2018 here — Session Recordings: Running Remote 2018