Why did we care?
Adobe Design is a centralized organization, meaning we act as the glue between various stakeholders, business partners, and vendors. In order to execute large content refreshes or growth campaigns, designers must function horizontally, connecting disparate parts into a unified whole. That was exactly the challenge the Creative Cloud Growth team (and other teams) faced when working on the multiple New User Journey campaigns.
The general idea? We'd send out tailored emails to our newest users based on the apps that they purchased and the apps that they were most likely to use first. Each email needed an image or gif asset, a coherent storyline, relevant use cases, cross-app workflows, updated copy, new destinations, banners, videos, and much more. In addition, right as we were launching the first wave of the campaign, we underwent a brand update, necesitating new designs for all of the templates. The size of the project meant that there were hundreds of pieces of content from multiple places that needed to be coordinated, coded, and delivered. As a Sr Designer on the growth team at this time, it was my role to coordinate the efforts.
I managed most everything in Xd. As the project advanced, I found myself doing large amounts of manual work to keep the files updated. This was not only wasting time, but it also made it easy to make hard-to-find errors.
I'd become known on the team for my interest in efficient processes, so I began to do some digging to find a plugin, software, or process that could make this process less painful. I found a plugin by Impekable that connected Google Sheets and Xd, allowing for users to have a visual database for each atom of content. By taking a week to effectively apply this process to the NUJ project, we saved time and more effortless kept hundreds of templates in sync. In addition, the process was easy to replicate, so when the NUJ content was refreshed throughout the year, we used it again. This saved countless hours (and gray hair) during the year.
Categorization System
The first step was to make a lightweight tagging system to track all the content. We had four main segments - two for beginners and two for non-beginners - for each app. So I used the first two letters of each app and the letters A - D, resulting in the system Ae-A, Ae-B, Ae-C, and Ae-D (for example) for all After Effects content, and so on. We had a total of 8 apps (Ps, Lr, LrC, Ai, Ae, Ac, Pr, and Id).
Then, in Xd, I created the components for the emails and used the tagging system to label them. I did the same in Google Sheets.
Finally, I connected the two, and content began to flow.
And the tl;dr
Here's how Impekable's plugin works.
- Create a Google Sheet of all of the content. Headers, prices, images, body copy, and more.
- Connect those field to Xd layers and components.
- Updating the spreadsheet automatically updates the Xd files.
Weird quirks
Since the process was new, we did run into some issues. Namely, many of our components were so many layers deep that connecting the right field was very challenging. In additon, there were so many varying permutations for each campaign (this user uses this app so they get this content but not that content) that extremely detailed Sheets hygeniene was required. But, all in all, the process was a wild success. It also allowed for folks who were not designers to have a lightweight WYSIWIG interface when on calls so they could see their ideas in realtime.
When the project was shipped, I gave extensive presentations and training to others on how to use this plugin. We used it for several more content-forward projects before we moved to Figma. I enjoyed this project because I was able to bring my talents for operationalizing at scale to bear on a high-priority campaign and contribute to our small team's ability to act as the glue and deliver a quality result.
*Note: The cover image comes from Impekable's case study page.
