Contenido del caso
Volver a proyectos

UX/UI · Identidad

Roadmade

Producto SaaS en producción, desarrollado 100 % con IA.

Diseñada por mí y construida con Codex y Claude Code.

Roadmade ayuda a diseñadores freelance a crear y adaptar un roadmap, consultar cada paso y estimar las horas y el coste de sus proyectos. La primera versión incluye procesos de UX/UI y branding.

Cliente
Producto propio
Periodo
Junio–agosto de 2026 · inicio aproximado
Lectura
7 min
El producto en escritorio y móvil.

El proyecto de un vistazo

Desafío
Ayudar a diseñadoras freelance a crear rápidamente un roadmap para cada proyecto, con pasos claros y una metodología centrada en el usuario. La primera versión abarca UX/UI y branding.
Mi papel
Definí el producto, los contenidos, la identidad y la interfaz. Construí la aplicación con Claude Code y Codex, probando y revisando cada propuesta.
Decisión clave
Partir de un proceso con cada paso explicado. La IA propone ajustes según el encargo y la diseñadora decide cuáles incorporar.
Resultado
Una aplicación web publicada con planes Gratuito y Pro y suscripción de pago integrada con Stripe. Permite crear y adaptar roadmaps de UX/UI y branding, estimar horas y costes y compartir el proceso con el cliente.

Problema y objetivo

Cómo convertir un proyecto de diseño en un roadmap claro

Al planificar un proyecto de diseño, necesitamos saber qué pasos seguir, para qué sirve cada uno y cuáles necesita el encargo. Detecté esta necesidad en los proyectos de UX y diseñé Roadmade para reunir esa orientación en un roadmap que cada profesional pueda ajustar.

Perfil de referencia · Hipótesis pendiente de validar con otros diseñadores.

Estructura del roadmap

Pasos del roadmap explicados en detalle

El roadmap se organiza en fases, bloques y tareas. Cada tarea incluye una ayuda que explica en qué consiste, por qué es importante y cuándo puede darse por terminada.

Pensé estas ayudas especialmente para perfiles más junior: permiten resolver dudas mientras trabajan y entender para qué sirve cada paso.

La estructura dentro de la aplicación: fase, bloque, tarea y ayuda contextual.
Tres niveles para pasar de la visión general a lo que hay que hacer en cada paso.

UX/UI y branding

Un roadmap para UX/UI y otro para branding

Incorporé un proceso de branding: investigación, estrategia de marca, nombre, identidad visual y aplicaciones. En la aplicación figura como «Identidad visual», aunque abarca más.

Puedes tener experiencia en branding y estar empezando en UX, o al revés. Quería acompañar esas distintas necesidades.

La primera versión permite trabajar con procesos de UX/UI y branding.

Flujo de usuario e integración de IA

Adaptar el roadmap a cada encargo

Cada proyecto necesita un alcance distinto. Roadmade permite ajustar el proceso manualmente o utilizar la IA para recibir propuestas a partir del briefing.

La IA propone cambios y explica su motivo. El diseñador revisa las sugerencias y decide cuáles incorporar.

La IA propone ajustes al roadmap a partir del briefing; el diseñador revisa y decide.

Estimación de horas y costes

Estimar las horas y el coste de cada proyecto

Es posible asignar horas y una tarifa para estimar el coste del proyecto. Cada fase puede tener una tarifa distinta o un importe cerrado, según el tipo de trabajo.

La estimación ayuda al profesional a preparar su presupuesto. Las horas, los costes y las notas internas son privados y no aparecen en la vista que se comparte con el cliente.

Horas y costes son privados para el profesional que utiliza Roadmade.

Diseño de interacción

Compartir el proceso con el cliente

El roadmap permite mostrar al cliente las fases del proyecto y su avance. Puede descargarse en PDF o enviarse por correo con la identidad visual del diseñador.

Esta vista conserva la información que necesita el cliente para seguir el proyecto. Las estimaciones de horas y costes, las notas internas y las ayudas de cada tarea quedan reservadas al profesional.

El cliente recibe las fases y el avance, sin las notas ni los cálculos internos.

Identidad y diseño UI

Un sistema visual para mantener la coherencia

Definí la identidad, las tipografías, los colores y los componentes de Roadmade para mantener una experiencia coherente en escritorio y móvil.

Documenté las reglas de diseño en archivos Markdown para guiar el desarrollo con IA. Durante las revisiones se midieron los contrastes y se ajustaron los grises y el rosa de los textos sin cambiar la identidad visual.

Con apoyo de IA, revisé aspectos de accesibilidad de la portada y los formularios: encabezados, etiquetas, foco visible y mensajes de error. También probé la aplicación en mi móvil. Queda pendiente una revisión con lector de pantalla; no se ha validado la conformidad WCAG completa.

Alcance de la primera versión

Trade-offs: decisiones y renuncias

  • Priorizar el lanzamiento frente a la carga de archivos Dejé la opción de adjuntar el briefing en PDF para una segunda fase. Esto permitió reducir la complejidad y avanzar con el lanzamiento, a cambio de que el usuario tenga que copiar y pegar el contenido.
  • Evitar una interrupción al entrar, a cambio de menos datos de uso Dejé Google Analytics para más adelante porque quería evitar que una persona nueva se encontrara con un aviso de cookies de analítica al entrar. A cambio, tengo menos información sobre cómo se recorren y utilizan las pantallas. El panel interno me permite consultar costes y suscripciones, pero no sustituye ese análisis.

Mantenimiento, seguridad y accesibilidad

Diseñé un panel interno para mantener Roadmade

Diseñé un panel privado desde el que consulto las suscripciones y el coste estimado de la IA. Los impagos aparecen destacados para poder atenderlos.

Integré las suscripciones Pro con Stripe durante el desarrollo con IA. Revisé qué debía pasar al pagar, cancelar o fallar un cobro. Detecté que, tras un pago fallido, se ofrecía contratar Pro otra vez aunque ya existiera una suscripción. Corregí ese recorrido para evitar una segunda suscripción y facilitar la gestión de la existente.

Di un lugar propio a la copia de seguridad: un bloque que explica qué se descarga y un botón para guardar los datos. Por ahora hago esta copia manualmente; todavía no está automatizada.

La copia de seguridad tiene un bloque propio dentro del panel, junto al control de costes y suscripciones.

Herramientas y desarrollo

Yo definía lo que necesitaba y revisaba cada propuesta

Elegí estas herramientas con el objetivo de reducir al mínimo los costes de puesta en marcha y mantenimiento hasta validar Roadmade con otras diseñadoras.

Para lanzar el producto, diseñé y redacté una onepage que explica qué hace Roadmade, para quién está pensado y cómo funciona. Presenta los planes Gratuito y Pro y permite acceder a la aplicación. Quería que la persona pudiera entender la propuesta antes de registrarse o decidir pagar.

Diseño

Figma

Identidad, interfaz y sistema visual.

Construcción

Claude Code, Codex y VS Code

Construcción con Next.js, React, TypeScript y Tailwind CSS.

Datos e IA

Supabase y OpenAI

Cuentas, datos y funciones de IA.

Pagos y correo

Stripe y Resend

Suscripciones y correos.

Publicación

GitHub, Netlify y Vercel

Código, alojamiento actual y registro del dominio.

Diseñar y mantener un producto real

Aprendizajes

Lanzar Roadmade me hizo pensar más allá de las pantallas: cómo mantener la aplicación, controlar los costes y cuidar los datos de quienes la utilizan.

Para evitar añadir un coste fijo de mantenimiento desde el inicio, preparé una descarga manual de los datos desde el panel. Ahora la hago yo; automatizarla es una mejora pendiente.

Al ofrecer una suscripción, tuve que estudiar mis responsabilidades como creadora del servicio y los riesgos que debía tener en cuenta. Preparé los términos y la política de privacidad, y revisé qué debía explicarse antes del pago y cómo gestionar las cancelaciones y los impagos.

Integrar IA también me llevó a revisar qué información del briefing se envía a OpenAI y cómo explicarlo. Las decisiones sobre datos, proveedores y condiciones del servicio formaron parte del diseño del producto desde el lanzamiento.

Documentación

Identidad visual y otras pantallas

Diseñé la identidad de Roadmade y la trasladé a la aplicación y a su web. También preparé la adaptación a móvil y documenté los fundamentos, componentes y estados principales.

Ver más imágenes del proyecto

¿Quieres probar Roadmade?

Explora el proceso de UX/UI o de branding y descubre cómo adaptarlo a tu próximo proyecto.

Probar Roadmade

Imagen ampliada