Designing a SaaS for Content Management

A collaborative SaaS platform that helps web agencies and clients create, review, and manage website content in one place, while keeping it aligned with design constraints.
Laptop screen showing a project management dashboard greeting user Alex, displaying active projects (3), pages collected (10/19), pending review (1), and completed projects (1). Recent projects listed include E-commerce Website (17% progress), Web app, and B2B Tech Website, all in progress. A section titled Needs Attention highlights the Corporate Rebrand Site pending review. Recent activity shows completed About Us page, updated homepage content, sent client invitation, and a new project created.

Background

This project grew out of a recurring challenge I observed throughout my years of experience in digital, across both marketing and web agency environments, as a Web Project Manager and freelance UX/UI Designer: content, design, and development often operate in separate workflows, creating friction, inconsistencies, and unnecessary back-and-forth.


I saw an opportunity to design a better way to connect these workflows and improve collaboration between teams.

Client

CopyDash

Role

UX/UI Design, Product Design
Website design interface showing a portfolio page about a charitable foundation focused on environmental conservation, featuring a photo of a mountain goat resting on rocks under a blue sky, with menu options and editable text fields visible.

Problem

Content for websites, apps, and marketing emails often comes from multiple sources and in different formats. This creates friction with design, especially when content length doesn’t fit the layouts, leading to time wasted, endless back-and-forth, and inefficient collaboration.

Research

To validate my initial assumptions, I conducted qualitative interviews with Web Project Managers working on website and app projects. I wanted to understand how content is currently collected, reviewed, approved, and handed off between clients, designers, and developers — and identify where the most friction occurs.



The research revealed that the biggest challenge was not simply collecting content, but managing it throughout the project lifecycle. Content often arrives incomplete and across multiple tools, from Google Docs and Sheets to Excel files, and can change significantly after layouts have already been designed. This creates repeated back-and-forth, manual handoffs, and additional design adjustments. Clients also struggle to anticipate how the amount of content they provide will affect the final layout.

These insights shifted the product focus from a simple content collection tool to a more collaborative content workflow. The solution needed to centralize content and feedback, clearly distinguish between draft and approved copy, and help clients understand content constraints earlier in the process.

Flowchart titled 'CURRENT PROCESS' showing steps from client sending draft copy, UX/UI designer creating wireframes, PM or client converting copy to document or excel, client working on copy, UX/UI designer adjusting layout if needed (step causing friction), client approval, and final prototypes sent to developer.

From Research to Product Strategy

Based on the key insights identified during the research phase, I translated the main user pain points into two main goals focused on improving content management and collaboration between agencies and their clients:


1. Enable clients to create and update final content within clear design constraints, without breaking the layout.


2. Create two tailored experiences: a dedicated client workspace and a centralized Project Manager dashboard for managing multiple projects.

Based on the research insights, I mapped the key user flows around the two main roles: Project Managers, who need to oversee multiple projects and content statuses, and Clients, who need a simple way to add, review, and approve content.

Designing and Iterating

One of the main research findings was that clients often struggle to understand how content length affects a design until their copy is placed into the final layout.Instead of treating content and design as separate workflows, I explored ways to bring them closer together. Content guidelines, character limits, status indicators, and contextual feedback help clients create more realistic copy while reducing the risk of breaking the intended layout later in the process.

Four screenshots illustrating features of a content editing tool: top left shows Content Length Indicator with a progress bar under the text 'About the Foundation'; top right shows Review & Approval Status Workflow with a dropdown menu listing Draft, In Progress, Pending Review, and Completed statuses; bottom left shows Collaborative Comments with a comments pop-up stating 'No comments yet' and a prompt to add a comment; bottom right shows Embedded AI Integration with AI Suggestions offering actions like Improve writing, Make shorter, More friendly, Optimise for SEO, More formal, and Translate to French.

Building for Scale

Because the product was designed for an agency managing multiple clients, scalability needed to be considered from the start. I built a token-based Design System in Figma that allows the interface to adapt to different brand identities while keeping the same component architecture.


The system separates primitive and semantic tokens from brand-specific decisions, making it possible to update colors, typography and other visual properties without rebuilding components. Components were also structured with clear variants, states and specifications to facilitate the handoff between design and development.

User interface design system showing button variants on the left with different states and colors labeled 'New project' and their properties including state, size, button text, icon left and right, and nested instances in the center, and a color palette on the right with brand colors for Marque A and Marque B including primary, primary-subtle, primary-light, primary-dark, and primary-darkest shades.

Outcome

The project evolved from a simple idea around content collection into a broader exploration of how agencies and clients could collaborate around content throughout an entire digital project. From a design perspective, the project  allowed me to explore how a robust token architecture and multi-brand Design System can support scalability from the earliest stages of a SaaS product.