The 4 rules of remote design collaboration

4 min read
Justin Huskey
  •  Apr 19, 2019
Link copied to clipboard

Running a great design process is hard enough when you’re in an office. Working remotely can feel like dialing up that difficulty from very hard to expert, especially at first. (Our fully-distributed team of 23 can attest to that.)

Once you get the hang of it, though, we’ve found that remote work makes for a better design process. All you need are a few ground rules, a virtual whiteboard, and the following lessons that we learned the hard way. Here’s hoping you won’t have to.

We’re going to go over:

  • The golden rules of design communication
  • Recreating the whiteboard experience
  • Establish phases of the design process
  • The rules of remote design reviews

Lesson 1. Set (and keep) clear rules for communication.

Communication is at the center of everything we do here at Infinite Red. A rule of thumb we have here is to never worry about over-communicating. All that talking is what keeps us aligned.

“Distance facilitates clear, ongoing communication between our designers and clients, which builds trust over time.”

Twitter Logo

That said, it’s important remote design teams to set clear rules and boundaries around where, when, and how to communicate. 

Here’s the framework we’ve put together to help us communicate:

  • Video chats are essential and should happen frequently. 
If two people are working on the same task, we generally encourage them to collaborate together over a simple Zoom call.

    For client presentations, we set aside an hour each week to review that week’s work face-to-face (or as close as we can on video). The designers hop on the project hop on a Zoom call with the client, we review the timeline of the project, the work up to that point, and then frame our work in the context of the project’s goals. At the end, clients know they can expect an InVision link to see the designs up close on their own time.
  • Slack should always have two channels for each project. 
One channel is for us to talk internally with our team (usually #p-projectname) and the other is for talking directly with the client (#client-projectname).
  • Feedback that’s specific to the design goes directly in InVision. 
We always encourage our team and clients to leave any design-specific feedback on InVision. It helps separate design feedback separate from the general back-and-forth in Slack, and gives us an organized way to look at feedback during our weekly feedback sessions.
  • We use Slack to post a follow-up to our weekly meeting with links directly to the prototype on InVision.

At the start of any new design project, we make sure all stakeholders know our communication process so we can keep things organized and running smoothly. Knowing that our weekly review is Thursday morning, for example, lets them know that they can expect unified feedback by the afternoon.

These rules have saved us time, energy, and many headaches.

“With built-in phases and feedback loops to keep things moving seamlessly, our design process runs so well because it’s remote.”

Twitter Logo

Lesson 2. Use apps to recreate the magical whiteboard huddle

When I first went remote, one of the things I missed most was that feeling of getting the design team around a whiteboard. There’s a certain energy and magic when designers and clients huddle together around a whiteboard, brainstorming options and exploring the possibilities of the project in real-time.

Thanks to virtual apps, that magic now happens remotely. At Infinite Red, we kick off every new project with a virtual whiteboarding session in Miro (formerly RealtimeBoard).

These workshops are just as effective as an in-person brainstorm at generating quick ideas, establishing goals, and setting a general direction for the design, with the added bonus that we can go back and edit them later. No low-resolution phone picture required.

For example, we recently worked with a fast-paced startup looking to add their own unique spin on the ride-sharing market. They had released a limited version of their app to the market and learned a lot about their customers in the process, but needed help putting the whole thing together.

We kicked off the project with a series of brainstorm sessions hosted over video chat using Miro’s virtual whiteboard. Anyone on the call could create a sticky note or draw on our whiteboard—as though we were sitting side by side.

Whiteboard collaboration on a user flow using Miro

Lesson 3. Establish clear phases for your design process.

When you work in an office and can pop over to a colleague’s desk for a status update, it’s easy to get lazy about documenting your design process. Working remotely, however, has forced our team to get really good at clearly defining each phase of our process.

“With built-in phases and feedback loops to keep things moving seamlessly, our design process runs so well because it’s remote.”

Twitter Logo

We stick to three distinct phases in a design project:

  • 1. Research and discovery

    Where we identify goals, audience, and the assumptions of the project. We’ll also use this phase to brainstorm features and define scope for the first iteration of the project. The end of this phase should create a clear roadmap for the client’s product that they can take a look at on Miro at anytime.
  • 2. UX and wireframes
    Once we’ve defined the direction of the project, we’re able to start the product design journey. Part of this process includes wireframing in Sketch (or gray boxing, as we say to the client) and linking those up on InVision early on in the process. This helps us identify weak spots in the UX before we create any visuals that make the client feel like the project’s set in stone. 

  • Connecting our screens in wireframes to show how all of the screens interact
  • 3. Visual design and prototyping
The phase that most clients seem to associate with “design,” this is where we start bringing everything together for them. Our high-fidelity wireframes from the previous phase act as an outline to start bringing in brand colors and styles and putting on the finishing touches.
    When everything’s in its place, this prototype should be as close as we can get to a completed app without writing a line of code.
Our Sketch files after hundreds of screens are connected using Craft by InVision.

We like our clients to know exactly where they are in the cycle of their project, which is why the weekly check-in is a staple of our process. We have a scheduled video call with our client at the end of each week to present our work, answer any questions, and open the InVision prototype up for feedback.

These video calls serve, in part, to update everyone on what phase of the project we’re in and how this work ties to the goals we identified in research and discovery. This over-communication keeps feedback regular and relevant, with all stakeholders up to date on major and minor updates.

“When you work in an office and can pop over to a colleague’s desk for a status update, it’s easy to get lazy about documenting your design process.”

Twitter Logo

Lesson 4. Make design reviews interactive and ongoing

It can be tough to read the room on a video call. If we were to limit feedback to formal meetings, there would be too many opportunities for miscommunication.

Instead, we ask our clients for ongoing feedback throughout each phase of the project and do our best to make the feedback process interactive. In addition to holding formal review meetings, we invite clients to comment on works in progress and to share ideas on in our shared Slack channel. InVision makes this really easy—we can simply share a link and gather feedback from everyone.

We use InVision to collaborate directly with the client in comments

On a personal note: experience has taught me that reaching out to a client privately can help get honest feedback if you’re unable to get an accurate read during the call. Most of the time it’s not needed, but on the rare occasion that a review feels almost too easy, it’s helped us avoid some problems later on. I usually do this via a Slack direct message.

It goes something like, “Thanks for your thoughts in the meeting today. Before we lock down this phase and move on, I wanted to check-in personally to see if there’s any more feedback. We value your feedback and want your honest assessment of the designs so we can make them better.

Remote work makes design better

With built-in phases and feedback loops to keep things moving seamlessly, our design process runs so well because it’s remote. Distance facilitates clear, ongoing communication between our designers and clients, which builds trust over time.

Most importantly, it gives everyone on our team the opportunity to work in their own way, which means we aren’t just doing work. We’re doing our best work.

Want to learn more about the remote design process?

InVision Cloud

Sign Up Free

Collaborate in real time on a digital whiteboard