How to test a Content Management System that doesn’t exist yet

As part of our redesign we asked ourselves what we thought were key questions around these users:

• Who is managing the content that populates the design?
• Is the content easy to produce?
• Is the content easy to source and to edit?

We knew their editing process. Coincidentally, an upcoming redesign of their tools and workflow gave us an opportunity to identify user needs and requirements for the new system, and do so with a user-centered approach. Our goal was to ensure our design could be populated, and also that their new optimised pipeline could help them provide a better service to their users.

We started a 3-week content design sprint. The university writers and editors would create the content for the design. We wanted them to do this in a realistic way. This would involve some kind of Content Management System (CMS). The challenge was clear: how do you test a Content Management System that doesn't exist yet?

Building a CMS, database and front-end integration in three weeks wasn’t realistic. We turned to other options.

Finding the right prototyping tool

Most UI design tools nowadays have very clever plugins that allow designers to show designs without using dummy content. Imagine a product gallery with the same product card repeated over and over. Syncing plugins allow you to drag and drop Excel or TXT files into your UI and, like magic, replace your grey boxes with actual content.

Sounds good? Not really.

The design we were testing was not just a gallery of repeated cards. Most components were completely different. It would have been quite the task to create dozens of sheets and link them all. Even worse, a bunch of spreadsheets doesn't look even vaguely similar to a CMS.

Our current design software at Clearleft is Figma. Amongst the many plugins available, we found the Google Sheets Sync plugin that could populate any component from a single spreadsheet. We had found half of our solution. We still had to find a quick and easy way of prototyping a CMS.

The solution was hiding in plain sight: Google Forms. What is a CMS if not a big form? Google Forms was ideal. It's familiar. It's free. It can be synced with GSheet (which can then feed into Figma through the plugin). An additional benefit was that we could gather insights on the CMS requirements without polluting the research data with feedback on the temporary CMS we were using.

So how does it work?

We looked at our design and listed all the different types of content (mandatory, optional, pre-filled).

We then translated those into fields for Google Forms.

We exported a link for the form and filled it with initial content (remember to make the responses editable so that at each pass the content creator would find the content written the previous session). By linking the form response to a Google Sheet (this can be done in Form’s Responses panel by clicking on the Sheet icon), the submitted form will populate a spreadsheet.

The form questions become the table column label. This label is what you use to connect your design with your Sheet. In Figma, rename every component you want to sync with “# + question/column label”. This is probably the most time-consuming part. But take your time as it's easy to make typos or mistakes and break the syncing.

Then the fun part: run your plugin in Figma and you'll see your design populated with the content from Google Form.

Thanks to Figma’s Auto Layout feature, every design element is pushed down accordingly to the length of the new content. This maintains consistent spacing and avoids overlap between items in your design.

The plugin at work: with just one click the plugin will replace all Figma elements marked with the # notation (in this case, both desktop and mobile elements were linked to the same spreadsheet column, and update simultaneously).

And a fake CMS (or, as we call it, duct-tape CMS) is born.

This works in real-time with the Figma design preview, which makes it even more realistic to the content creator. If our content creators had Figma preview open, they would see the design updating, creating the illusion of a real CMS.

Other delighters

Not only text sync but images too:

The plugin works not only with text but also with images (pulled from a URL provided in the form). In addition to respecting the placeholder crop and aspect ratio, the new image also inherits any style and effect applied to the placeholder.

Make your CMS look even more real by adding a timestamp

Every form submission will record a timestamp in the spreadsheet. This can be used to populate the timestamp in our design and adding yet another detail to sell the illusion of a working CMS.

The not so good:

This solution ticks a lot of boxes, but it’s an unorthodox way of using various tool together, and being a hacked solution, there are some issues and limitations.

1. Set up takes time, and there are many elements to orchestrate;
2. It’s a very manual process - you need to sync the design each time a response is submitted, and if you want version control you need to save every response in a separate document;
3. It’s a prototype: it could (and it will) break. Always be on your toes for when that will happen.

However, with a bit of setup and oversight, this method can be a robust and incredibly useful way of using up-to-date, real content for your design.

Why do it?

It can be easy to focus all attention and efforts into designing the best possible front-facing product, but their success is heavily influenced by what’s going on behind the scenes. This sprint, and this prototype, gave us an opportunity to research, test and evaluate our design from the stakeholders’ point of view and ensure our new design would fit into their processes and workflows. As Katie Wishdale said in her recent blog post:

“All too often the back-stage processes are overlooked, with new services built on top of dysfunctional organisations. But when back-stage organisational problems exist, they have front-stage consequences: poor service, customer frustration, and inconsistent channels. Streamlining back-stage processes is critical.”

This tool allowed us to not only work with real content but also test our understanding of the content creation process, and shed light on underlying issues and opportunities. In turn, the results have been used to create a handbook that will allow the client to autonomously repeat -and improve- the process itself.

Whether you want to do the same, or simply experiment with a shared tool for your design and content team, the fake CMS can become a useful and lightweight tool to improve the services and designs you’re working on.