Content Protector: caso de estudio UX/UI

Detecta filtraciones de tu contenido y gestiona su retiro con un equipo de agentes de IA.

Cliente

Miami Image Society LLC

Rol

UX/UI Designer & Frontend

Equipo

3 desarrolladores

Tiempo

6 meses

Herramientas

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

El proyecto

Content Protector ayuda a creadores y agencias a encontrar su contenido filtrado en internet y a solicitar que lo retiren. Trabajé en la landing page que explica el servicio y en la plataforma: el dashboard del creador, donde un equipo de IA reporta búsquedas, lugares de riesgo y contenido retirado, y el panel de administración interno con el que se opera todo. Además de diseñarlo, me encargué del frontend, usando Claude como herramienta, junto a un equipo de tres desarrolladores.

Tipos de usuario

• Admin: Opera la plataforma: ve las filtraciones de todas las agencias y creadores, gestiona usuarios, suscripciones, planes y permisos, y revisa las plantillas de correo.
• Usuario común (creador): Protege su propio contenido: conecta sus perfiles, sigue sus escaneos, retiros y filtraciones desde un dashboard y elige su plan.
• Usuario agency: Protege el contenido de varios creadores desde una sola cuenta, con su propio plan de agencia.

Lo que diseñé

• Una landing que cuenta el problema: Abre con un contador de dinero perdido y un feed de sitios donde ya hay filtraciones, presenta a los cinco agentes de IA como un equipo con nombre y rol, y cierra con resultados, testimonios, preguntas frecuentes y el plan.
• Un equipo de IA como guía: El dashboard saluda con un manager de IA y muestra a los agentes en línea. Las métricas clave (búsquedas, lugares de riesgo, contenido en proceso y retirado, tasa de éxito) y los accesos rápidos a escanear, ver retiros y reportar quedan en una sola vista.
• Filtraciones, planes y permisos: En el panel de administración, un gráfico muestra de dónde vienen las filtraciones y la tabla se filtra por agencia, creador, prioridad y agente. Servicios y planes define cada suscripción, la matriz de permisos por rol y la visibilidad del menú.
• Usuarios y suscripciones: Tablas con búsqueda y filtros, indicadores de usuarios totales, de pago y gratuitos, y un formulario para crear usuarios con rol y envío de credenciales por correo.
• Sistema de diseño: Una página interna documenta los tokens (colores, tipografía, espaciado, bordes y elevaciones) y los componentes (botones, formularios, navegación), con una escala de verdes propia sobre fondo oscuro.
• Correos transaccionales: Una vista del admin con previsualización de los correos reales del sistema (bienvenida, suscripción, pago fallido, verificación de identidad...) y envío de prueba.

Ver sitio en vivo