Content Protector: UX/UI case study

Detects leaks of your content and manages their takedown with a team of AI agents.

Client

Miami Image Society LLC

Role

UX/UI Designer & Frontend

Team

3 developers

Timeline

6 months

Tools

Claude Code, Claude Design, React, TypeScript, Tailwind CSS, shadcn/ui

The project

Content Protector helps creators and agencies find their leaked content online and request its removal. I worked on the landing page that explains the service and on the platform: the creator dashboard, where an AI team reports searches, risky places and removed content, and the internal admin panel used to run it all. Besides designing it, I built the frontend, using Claude as my tool, alongside a team of three developers.

User types

• Admin: Runs the platform: sees leaks across all agencies and creators, manages users, subscriptions, plans and permissions, and reviews email templates.
• Regular user (creator): Protects their own content: connects their profiles, tracks scans, takedowns and leaks from a dashboard and picks a plan.
• Agency user: Protects the content of several creators from a single account, with its own agency plan.

What I designed

• A landing that tells the problem: It opens with a lost-money counter and a feed of sites where leaks already appear, introduces the five AI agents as a team with names and roles, and closes with results, testimonials, FAQs and the plan.
• An AI team as your guide: The dashboard greets you with an AI manager and shows the agents online. Key metrics (searches, risky places, content in progress and removed, success rate) and quick shortcuts to scan, view takedowns and report live in one view.
• Leaks, plans and permissions: In the admin panel, a chart shows where leaks come from and the table filters by agency, creator, priority and agent. Services & Plans defines each subscription, the role permissions matrix and sidebar visibility.
• Users and subscriptions: Tables with search and filters, KPIs for total, paid and free users, and a form to create users with a role and credentials sent by email.
• Design system: An internal page documents the tokens (colors, typography, spacing, borders and elevations) and the components (buttons, forms, navigation), with its own green scale on a dark background.
• Transactional emails: An admin view previewing the system's real emails (welcome, subscription, failed payment, identity verification...) with a test send.

View live site