When we were designing the prospectus of a world-leading university, we created designs that satisfied our users’ requirements. But what about the content creators?
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.
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.
Not only text sync but images too:
Make your CMS look even more real by adding a timestamp
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.
- Set up takes time, and there are many elements to orchestrate;
- 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;
- 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:
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.