Richmann Addai

richmanaddai@gmail.com

On this page

1.

Backstory

2.

The Problem

3.

What I Built

4.

My Role

5.

Product Thinking & UX Principles

6.

What's Next

7.

Try the figma prototype

CMS OS Case Study • 2 min Read

Back

1. Backstory

As Design Engineer, I’ve collaborated with teams to deliver dozens of client sites. I used to redesign and rebuild the same CMS functionality for every freelance client and this was killing time, quality and the number of projects we could take within a period. So I designed & built CMS OS. It’s a modular, developer-first, custom built content management system designed with Non-Technical Clients in mind. It was designed for use across multiple projects.

The goal was to design a repeatable system that created a default structure to provide both technical implementers and non-technical clients with speed and peace of mind. I and many others have now successfully used this to ship faster across teams because we spend less time reinventing the wheel and focus more on what makes each project unique.

2. The Problem

Most clients needed a cms panel to manage the content on the sites we delivered to them. The nature of their projects often required us building a custom content management system they could use to handle content on their site behind the scenes. Overtime, I noticed the foundational needs remained mostly the same:

  • Blog publishing
  • Product management
  • Order dashboards
  • Newsletter tools
  • Contact form handling
  • Authentication & access control
  • Payment integrations


But instead of reusing, we were rebuilding these CMS features every time.
Which meant wasted time, missed deadlines, more bugs from rushed code and fewer clients

3. What I Built

I designed a built a simple CMS framework that adapts to each web or project we undertake. A modular CMS starter kit that we can clone from git, configure, and customize for every client project. It works like an internal product for us — one core system with many possible outputs.

For clients, the reusable CMS panel was designed with:

  • Clear field naming with tooltips and guidance
  • Fully responsive UI for on the go updates


For Developers:

  • Backend integrations with Supabase, Firebase, custom Node APIs
  • Payment integrations for stripe and paystack ready out of the box
cms os dashboard

The default CMS OS configurable dashboard

4. My Role

I led everything in relation to design and frontend development:

  • Product thinking: what to design and build and why it matters
  • UI/UX Design: designing the CMS flow so it’s usable by non-techie clients
  • Dev Setup: using Nuxt, Supabase, Firebase, and Git
  • Collaboration: worked with a backend engineer for API design + database structure
  • Testing: ran tests with already existing client projects
cmos figma preview

5. Product Thinking & UX Principles

Here’s a look into a few key UX decisions I took during the design process

a. I Spoke the client’s language

During testing, I noticed a pattern: even after thorough walkthroughs, clients would still reach out asking what fields like “Slug” or “Meta Title” meant.

So I reworked all fields names using plain-language metal models and enforced clarity with descriptive placeholders, Inline helper text beneath inputs and logical grouping of related fields.

Questions dropped to almost zero, even for first-time testers.

cms os blog

b. Mobile Responsiveness

Initially the CMS was designed strictly for desktop. This was because we assumed clients mostly updated content from their offices from Desktop/Tablet sized devices. But interviews revealed many made quick edits on the go: uploading photos, tweaking product details, or changing hours from their phones.
So I refactored layouts to be fully responsive. I prioritized tap targets and simplified navigation for touch ensuring core actions stayed visible at all times

cmsos mobileui

c. Light & Dark Mode Support

Not groundbreaking, but thoughtful:
I added both light and dark modes for clients who prefer one over the other and for developers hopping between tools all day. It also makes the CMS feel more “premium” and considered.

cmsos light mode
cmsos dark mode

d. Simpler by Default

The default experience was intentionally minimal to reduce cognitive overload. And so reduce time taken to complete a task (writing blog posts, uploading products etc) the interface focused on only the essentials because our clients were busy people.

6. What's Next

I’ve already reused this system across multiple freelance projects, shaving design and dev time in half. I’m now working on:

  • Adding AI-assisted content generation inside the CMS
  • Chat bots to help client with in app issues so queries to me are reduced
  • Creating a tailored analytic dashboard to show basic analytics (traffic, top pages, etc.)
  • Automating handoff so clients can onboard without my help

7. Try The Figma Prototype

Send me an email. I'll share a link to the prototype. Cheers.

richmanaddai@gmail.com