How to design a CMS that guarantees a beautiful UX

There’s a TikTok doing the rounds at the moment with the caption “Devs when watching editors use the CMS” that I can really relate to. When I watch it, I see a sleek website turn into a mess of iframes, widgets and free text-fields as the content editors pop the wrong content into the wrong shaped module over and over again. But I also see Devs passing the blame rather than taking responsibility. No content editor means to make Frankenstein’s Monster. These web design horrors usually come from a whole bunch of factors, including a poorly designed CMS and rushed handovers.

Before I dive into those though – why does it matter? We work with many of our clients on Conversion Rate Optimisation (or CRO). At its simplest, this is about ensuring users who come to your website do what you want them to do. A beautiful site serving up relevant content and an excellent user experience should drive the type of conversion rates that will deliver your desired business outcomes.

Sounds easy, right? But for a dev, it goes much deeper than that. A website needs to be coded well and provide both a functional and well-designed interface for the content editor. After all, good CMS management is crucial for SEO, accessibility and UX. If we don’t get it right on the admin side, it all goes wrong on the user’s end too.

The good news is you can have it both ways. And by implementing a few simple steps, you can ensure your content editors won’t feel the need to put semi-circles into square holes.

9 steps to avoid Frankenstein’s Website

1. Design clear and user-friendly admin controls that resemble page building tools.

2. Provide comprehensive design documentation that guides content editors without dictating the CMS appearance.

3. Develop bespoke modules to combine best practices with appealing aesthetics for content editors.

4. Create an intuitive and self-explanatory CMS by using helper text, icons, and clear field names.

5. Curate the CMS experience for content editors with a focus on simplicity and efficiency.

6. Hide unnecessary fields and limit available options to streamline the content editing process.

7. Mark required fields as design instructions to help content editors make informed decisions.

8. Limit plugins to maintain control, prevent unintended CMS behavior, and enhance website security.

9. Plan a thorough and collaborative handover process with the client to ensure a smooth transition and reduce future frustrations.

Modular web design, accessible page building tools, and an intuitive CMS play a vital role in ensuring a functional and seamless experience for both developers and content editors. By balancing the needs and requirements of these two groups, it’s possible to create a website that excels in SEO, accessibility, and user experience, while minimising any potential frustration or challenges faced by developers during the creation and maintenance processes. By embracing these principles, you can ensure your online presence is both visually appealing and highly functional, resulting in improved user satisfaction, better online visibility, and a higher likelihood of achieving your outcomes.