Product Update

Introducing Avocode Write - The bridge between copywriting and UI/UX design workflows

Matous RoskovecMatous Roskovec

Copywriting in UI design is much more than in traditional advertising, where its main focus is on storytelling conveyed through short messages.

In web and mobile design, copywriting serves the key role in User Experience. The difference here is not just a one-time purchase or quick content consumption, but recurring usage of the given app or interface.

Great User Experience stems from an elegant combination of design and text. Labels, body text, headlines, call to actions, and microcopy - they all create the story, and how they are laid out in design creates the structure, the narrative of the message that your audience receives.

OK, so here you have it - black and white, two paragraphs about how much copy and design come hand in hand. But how come these professions are still made in silos?

Designers work in design tools like Adobe XD, Sketch, Figma, or others.

Copywriters work with Microsoft Word, Google Docs, Dropbox Paper, or others.

For the sake of collaboration, both visual and text tools are moving towards shared environments and real-time editing - which is great, but only in each silo.

There IS nothing in between—only screenshots with redlines, PDFs with comments, and never-ending email threads.

Scratch that - there WAS nothing in between - until last week, when we launched Avocode Write.

The need was huge. Look, we have been working on websites, emails, mobile apps, and desktop interfaces for long enough to realize the time wasted by unclear communication between Copywriters, Designers, and other stakeholders relying on this workflow.

It’s about time to break the silo scheme between designers and copywriters to increase efficiency and start saving time. And yes, even when your designers are also partially copywriters or vice versa. Why? "Why? Because copywriting is interface design." - as this article very well summarizes. And please, for the sake of the argument (and your precious time) - let’s not get into the chicken-egg problem if you should start with copy or design. Just make sure that you dedicate resources to both and that you let these departments work together.

When you invite copywriters to the design table, you can move your entire business to new heights. What do I mean?

  • A) better UX
  • B) better information structure
  • C) higher conversions
  • D) better onboarding
  • E) increase in retention

You do the math. Cooperation between the text and design profession has extreme implications when it comes to business growth. Period.

Clearly, the time to bridge the gap was years ago, but in spring 2020, we finally had the technology that would allow us to do that.

How did we build Avocode Write?

I think you (like other 500+ people on Product Hunt) might understand the why. Now let’s get to the how.

Since early 2020, we’ve been using the Shape Up product development framework to build new things here at Avocode. In short, we see two benefits of using this methodology. 1) Shorter time for feature development projects = smaller and faster releases. 2) Thanks to a fixed time frame for each Shape Up project, we are forced to prepare each project very well (in terms of research, market fit, and project scope & task planning).

Starting from the research & market fit

We asked around 60 copywriters and 50 designers around the world who work with larger product teams about their pain points - both from our user base and publicly.

This is what we found out:

  • Generally, copywriters need to see copy or replace lorem ipsum in the design context, but designers are afraid to give the edit right not to change the design layout accidentally.

  • Copywriters are not well-versed in using design tools. (Only a few UX writers and UX designers are, but they are more likely to use prototyping tools like Balsamic or Axure.)
  • In theory, if copywriters would replace text in design text layers, it’s important they a) fit into the given length of a text layer bounds and b) when they don’t, designers could easily polish layout, brake lines, or style fonts.

Project scope & technology

The possibility of editing text layers in Avocode, was mentioned by one of our rendering developers about a year ago. Since then, we had the idea saved, and in April 2020, it finally got through our Betting table (a meeting where we decide what project we’ll address in the next ShapeUp cycle).

Since Avocode is powered by our custom rendering technology to display proprietary layered design files in the browser, we knew that this project would be mainly considering the front-end. We needed to create some interface on top of design files, where people could interact with text layers. Luckily, one of our previous previous projects Avocode Flow (currently still in Beta) - a new tool to edit prototype connections, technically laid down the ground work for Avocode Write - it worked with multiple artboards rendered side by side in the browser. As most of the technology was ready, we were quite certain we could pull the front-end part in 6-8 weeks.

After a couple of UX checks with our Private Beta Testing Group, we had a simple design. We decided not to enable in-line text editing, for now, and only let people change actual text content - without touching font styling.

Also, we came up with a simple way to record copy suggestions on a timeline - for each field you could add any number of copy variants. This was based on feedback from agencies that need to present multiple copy variants to their clients.

Avocode Write interface for editing text layers and suggesting multiple variants per each text field.

If you need to hide the text edits altogether to present the last variant from the design file, just hit the switch.

Also if you need to revert to some previous copy variant, you simply click on a previous version and hit save.

Text length

We also added a simple character count and visual monitoring if the text length overlaps original text bounds. We decided to enable copywriters to save even variants when the text does indeed overlap, but they are always informed.

Long story short, we released Avocode Write the beginning of summer under a feature flag... but two things were still missing.

1. In-app integration

Avocode Write is a new tool, and we need to integrate it better into the Avocode app. We need to enable Avocode users to switch easily in between the "tools" (Inspect, Comment, Write, & Flow), to open designs in any tool directly from our file manages, and also to use them in our desktop app.

FYI, currently, this view is still in transition - we’ll add contextual comments for each tool on top of multiple artboards next month. And in the meantime, we are also working on enabling the Inspect tool on top of multiple artboards (not just one). If you’d like to give us feedback on the UI, please sign up here.

2. Design tool integration

Avocode Write currently enables browser-based text editing for Adobe XD, Sketch, and Figma design files.

In the case of XD & Sketch - you can sync the designs to Avocode either by plugin or even directly by drag and drop (in this case, you don’t need to own the design tool).

Regarding Figma, you need to use our Figma plugin.

A couple of resource here:

If you read carefully, one of the key use cases people were asking for in the research phase was the ability to pull copy suggestions back to the design - in case something needs editing.

Text sync back to the design tool

This took us some time to pull off - to the extent that we had to postpone the original product announcement, but we are glad we did.

Sketch

In July, we first added a "Pull text changes" functionality to our Sketch plugin. This action is easily reversible by CMD+Z (for example, if you just want to preview the changes.

Learn more about Avocode/Sketch integration.

Adobe XD

Then we joined the XD Dev Days 2020 hackathon to quickly build a completely new Avocode Write plugin to both sync artboards to Avocode and pull text changes - just by pasting a link into the plugin.

To install our Adobe XD plugin, simply click this link or go to Adobe XD plugin manager, search for Avocode Write.

Learn more about Avocode/Adobe XD integration.

Avocode Write is now listed among copywriting & localisation plugin collection in the Adobe XD plugin manager.

Figma

And what about Figma? For now, you can only sync Figma Frames to Avocode, where you can inspect, edit copy, comment, and change screen connections - without being afraid to accidentally manipulate design layout. Pulling text changes back to Figma files will be coming later this year.

So... is Avocode Write public? You bet.

After nearly three months of work on Avocode Write, we were happy to take off the BETA label, launch it to our entire user base, and to announce it to the community on Product Hunt - as an asynchronous copywriting collaboration tool for all copywriters, UX writers, designers, and stakeholders.

Both Adobe XD and Sketch plugins/integrations turned out to be a good call. This was one day after the release:

Join 30K+ designers & developers by subscribing
to our weekly newsletter

Try it and change the way you collaborate on design copy.

We wanted to help you try Avocode Write without any string attached. Simply check this page: https://avocode.com/design-copywriting and sign up for a 14-day free trial.

This is how to use it:

What’s next?

Most importantly, we need to hear from you if it brings you value and how you would like to use such a tool.

If you’d like to give us feedback on Avocode Write, leave your contact here.

From the product perspective we are planning:

  • contextual comments in the Avocode Write tool (so copywriters and stakeholders could not only discuss messaging but also fonts and overall readability/legibility),
  • Figma text sync,
  • and also maybe in-line text editing to address text styles (like bold, etc.)

We are also preparing to launch a series of Webinars at the end of September with a live demo to help you start using the tool and answer any questions. Stay tuned... and write. ✏️

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.