Behind the scenes: How we researched and tested collaborative editing

We know that the design process is fundamentally collaborative. Whether you’re bouncing ideas around with other design colleagues or working with developers to turn pixels into code, a design cannot exist in a vacuum.

That’s why we were so excited to bring real-time collaboration to Sketch last year. It empowers teams to work seamlessly together on designs — it was a big deal for our users.

But if it was a big deal for you, it was an enormous undertaking for our team here at Sketch. So to get off on the right foot, our dedicated research team set out to lay the groundwork. Read on to discover the research and testing process that we used to deliver this game-changing feature.

What we set out to achieve

The research process was split into two parts — discovery research and usability testing.

Starting with discovery research, we wanted to help the design and development teams align around a couple of main pain points that real-time collaboration would help solve. Specifically, we wanted to:

• Understand how our users perceived collaborative editing
• Understand their concerns over issues like overwriting others’ work
• Understand their existing pain points and how real-time collaboration could solve them
• Learn how people work together and how we could serve their needs.

Once we had these answers and started building the feature, we moved on to usability testing. Here, we wanted to make sure our solution to overcome these pain points was right, or whether we could improve it even further.

Recruiting the right partners and testers

Last year, we opened Sketch Labs — a new program that opened our doors and brought more people who are passionate about Sketch into our research process. We continuously ask ourselves how we can make Sketch better, and our incredible product team makes that their mission every day. And of course, our community plays a huge part in that mission too. That’s why Sketch Labs is an integral part of research at Sketch.

We continuously ask ourselves how we can make Sketch better — and our community plays a huge part in that mission.

The recruitment phase uncovered one of our earliest insights. Back then, collaboration was only possible with the now discontinued Sketch for Teams plan. We soon realized that some people didn’t know what plan they were on, including many who mistakenly thought they already had Sketch for Teams. When we discovered this confusion, it kickstarted our effort to renew our plans and make them easier for everyone to understand.

Preparing for live testing

Since the focus of this feature was on collaboration, we wanted to run sessions with a few people working together simultaneously. Unfortunately, with COVID-19 forcing millions to work from home, on-site studies were out of the question.

As everything had to be remote, one of the challenges was keeping track of the screens of participants collaborating in real-time. We set up video calls where everyone could screen share and managed to combine everyone’s display into a single, combined view that let us see everyone’s progress in one place. However, with multiple participants working at the same time, it was still hard to observe the behavior of everyone at once. Some insights were spotted only in the review of the recordings.

Despite being a huge challenge for the team, remote sessions ended up being a blessing in disguise. The set-up helped us view all the screens side-by-side, which helped us identify any discrepancies and inconsistent behavior in different screens. For example — when one participant edited a name in the layer list and if other participants were in the layer list as well, it kicked them out. These kinds of insights were incredibly valuable — and only clear thanks to the recordings.

Research insights

We divided the usability study into three groups, each focused on a specific part of the real-time collaboration workflow. The first group focused on starting collaboration and inviting other people to the document. The second group focused on the interaction itself, where everyone was collaborating. Finally, the third group focused on finishing their work and saving their document.

We uncovered a few main findings during these tests:

Different people save their files in different ways

In order to collaborate, your document needs to be saved to your Workspace (formerly known as Sketch Cloud). In the first stage, when we asked participants to start collaborating, we asked them to save their documents. We assumed that typically, users save files via ⌘S or by selecting File > Save from the menu bar – which supported saving to your Workspace. But during the usability testing, we discovered that some participants preferred to save files from the Sketch toolbar.

Back then, when you saved a document from the toolbar, the save destination would default to your most recently used. That meant if the last file was saved locally, the current one would be saved locally as well — unless the user changed the destination manually. In fact, saving to Cloud (now your Workspace) from the Sketch toolbar was impossible. As a result, most participants saved a file locally, or in their personal iCloud storage, which meant they couldn’t start collaborating.

This finding kickstarted work on our saving flow, where we improved the user experience and added the option to save documents to your Sketch Workspace when saved from the toolbar.

Starting collaboration was a point of friction

Once everyone understood how to save a file to the Workspace, there was another challenge — starting a collaboration session. During the early iterations, the toolbar item for collaboration was labeled Presence, which proved confusing to some. We also didn’t have a clear icon that indicated the option to invite more people. As a result, participants didn’t realize the toolbar item was related to collaboration and just ignored it.

We reduced the confusion by changing the name to Collaborate. We also made it visually clearer that you need to save your document to your Workspace before you can start collaborating. Once you’ve saved your document, your avatar appears, and you can invite others by sharing a link, or inviting them to the document in the web app.

Participants were hesitant about saving files

While testing real-time collaboration, some participants were concerned about working alongside others in the same file. With so many people making changes and saving the document, how would they know which updates were most important? Did changes save automatically, or did they need to save manually? And what about Libraries — could you edit one without pushing changes to everyone?

The short answer was that we’d made the system as simple to use as possible, and these improvements just took a little getting used to. The longer participants continued to test the feature the more obvious it became that changes were saved automatically and no work would be lost. And as for marking important updates, and working with Libraries? We had solutions for those, too — but more on that in a moment.

How it shaped the Sketch you know now

While we had some fantastic insights into real-time collaboration itself, the feedback we received also made us look again at the infrastructure around the feature. And that led us to work on a few other features that went live soon after:

• Starred updates — Every time you save your document, you’ll create a new update in your Workspace. Stars are a great way to indicate key updates in a document’s version history. And if you work with Libraries, starring an update in a Library gives you control over which Library updates are sent to everyone who uses it.
• Personal subscriptions — With a subscription, you get the complete Sketch experience — including access to the Mac app, the web app, and a Workspace. And now you can subscribe as a solo designer, or as part of a larger team.
• Workspaces — Your Workspace is a home for all your design documents. So you can collaborate with others in real-time, get feedback, hand off your designs to developers and more.

The big takeaways

At the beginning of any research, you start with a set of assumptions and then put them to the test. This process was no different, and challenging these assumptions not only helped us improve real-time collaboration — but also helped us make Sketch better as a whole.

Our findings showed that there was confusion around Sketch for Teams and what it included. This prompted us to develop the Workspaces you see today, and offer them to solo users as well as teams, so more people than ever can get started with real-time collaboration.

It was amazing to see how the feature evolved throughout the process, and we’re incredibly grateful to our participants, who helped shape it. For me, one of the most rewarding moments of the whole process was seeing our participants’ reactions when they experienced collaboration — and saw their teammates’ cursors — for the first time. We love bringing you that kind of excitement, and we hope you enjoy real-time collaboration when you use it today.

We love giving you a glimpse at what goes on behind the scenes and how we make Sketch. Let us know on Twitter what you’d like to see more of next time.