Mi Lista de Novios
Rediseño UI y frontend de una plataforma SaaS
Un sistema de interfaces que conecta la organización del matrimonio con la experiencia de quienes confirman, participan y regalan.
Ficha del proyecto
- Cliente
- Mi Lista de Novios
- Alcance
- Rediseño UI y frontend de una plataforma SaaS
- Ubicación
- Chile
- HTML
- CSS
- JavaScript
- Contrato JSON de contenido
- Vista previa responsive
El desafíoOrganizar un matrimonio y participar en él son experiencias distintas.Cómo lo resolvimosCerrar explicación
Detrás del proyecto
El punto de partida
La pareja necesita preparar su lista, editar una presentación y seguir invitados, mesas, presupuesto y tareas. Quien recibe la invitación necesita encontrar el programa, confirmar asistencia o elegir un regalo. El trabajo de UI y frontend conecta ambas perspectivas mediante pantallas con una misma identidad, pero herramientas diferentes. La revisión abarca 25 templates locales y estados del editor; documenta la experiencia de una demo frontend, no la operación del backend ni una pasarela de pago en producción.
Las decisiones
Un panel para saber por dónde continuar
El dashboard combina un resumen de la lista, accesos a las tareas habituales y una vista de la presentación pública. La persona puede pasar a crear regalos, revisar invitados o preparar una invitación desde un punto común, sin confundir esas herramientas con la página que compartirá.
Editar en contexto, no en un formulario aislado
El editor relaciona nueve secciones, controles de orden y visibilidad, campos de contenido y vista previa. Un documento JSON sirve como estructura común de la presentación. El selector de dispositivo cambia el ancho real de la vista embebida para revisar el resultado móvil sin abandonar la edición; importación e historial tienen controles propios.
Una vista pública para cada tarea del invitado
La lista de regalos, la confirmación y el álbum tienen presentaciones públicas separadas de su administración. La página de la pareja reúne historia, programa, ubicación, música, quiz y fotos. La navegación permite consultar lo necesario sin recorrer primero las herramientas de gestión.
Elegir el formato según lo que se organiza
La planificación no se resuelve con una sola tabla: el presupuesto distingue resumen y partidas, las tareas se agrupan por períodos y las mesas se representan en un plano con asientos. Cada formato responde a una decisión distinta: ajustar un gasto, reconocer un pendiente o ubicar a una persona.
Contemplar acceso, ayuda y errores
Registro, recuperación de acceso y confirmación tienen pantallas propias. Cuando una compra aparece rechazada, la interfaz comunica que no se completó y ofrece volver al inicio o contactar a soporte. El recorrido contempla qué necesita entender la persona cuando no puede continuar, además de las pantallas del camino esperado.
Qué muestra este proyecto
El caso muestra cómo un frontend SaaS puede mantener continuidad entre configurar, revisar y compartir. Su alcance comprobado es el sistema de interfaces y sus recorridos desktop y móvil; la sincronización de cuentas, los envíos y los pagos requieren una validación independiente.
Evidencia del proyecto
Inicio — antes y después
Compara la portada anterior con el rediseño completo: propuesta, beneficios y recorrido hacia la creación de una lista. El antes conserva la captura histórica de escritorio; el después muestra escritorio y móvil. La landing alternativa queda fuera de esta selección por un error de JavaScript detectado en la demo.
Entrar, registrarse y recuperar el acceso
Registro, ingreso, recuperación y confirmación tienen pantallas propias. La interfaz contempla el principio y el final de la tarea, no sólo el formulario. Se documentan templates: no se enviaron solicitudes ni se probó un proveedor de autenticación.
El punto de partida para gestionar el matrimonio
El panel reúne resumen de la lista, accesos a tareas habituales y vista pública. Su función es orientar el siguiente paso sin obligar a recorrer todos los módulos. Los montos corresponden a datos de demostración de los templates.
Crear regalos sin perder el control de la lista
La tabla permite reconocer conceptos, montos y acciones de edición. El selector de opciones de regalo muestra cómo comenzar. Es una interfaz administrativa distinta de la lista que verá quien regala.
La perspectiva de quien viene a regalar
La lista pública presenta a la pareja y organiza los regalos con sus importes y acciones. Mantiene el vínculo visual con el área privada, pero prioriza elegir un regalo. La operación real de compra requiere validación independiente del backend y medio de pago.
Una presentación con historia, programa y participación
Una página propia para la pareja conecta historia, mesa de regalos, ubicación, información práctica, música, quiz y fotografías. La navegación responde a tareas del invitado y no obliga a leer todo en orden. Las capturas móviles provienen de un viewport real.
Editar contenido viendo el resultado
El editor reúne nueve secciones, controles de visibilidad y orden, y una vista previa del mismo documento. Los campos de portada y el administrador de quizzes muestran controles en contexto, preguntas y sugerencias. El contenido y su presentación comparten un contrato JSON; no se administra cada pantalla como una pieza desconectada.
Una vista móvil dentro del editor
El control de dispositivo cambia el ancho real de la presentación embebida. Permite comprobar jerarquía y comportamiento responsive mientras se conserva el contexto de edición; no es una captura desktop encogida.
Importar, revisar y recuperar el trabajo
El editor dispone de importación JSON con revisión y un historial de versiones. La documentación del proyecto distingue documento de contenido y estado SaaS. Estas capturas muestran los controles disponibles; no equivalen a sincronización comprobada con un servidor.
Preparar una invitación en su propio espacio
El recorrido parte con una acción clara y abre el área de composición. La herramienta mantiene separadas la preparación y las acciones de envío. Se navegó por la interfaz sin enviar correos ni programar invitaciones reales.
Dos caras de una misma confirmación
La pareja configura y consulta invitados; la persona invitada encuentra una página pública para responder. Separar gestión y respuesta reduce información innecesaria en cada lado. No se enviaron confirmaciones durante la documentación.
Pasar de una lista de invitados a un plano
Mesas rectangulares y redondas, asientos y una zona visual convierten la distribución en una tarea espacial. La captura documenta la vista del organizador. La apertura del editor de una mesa presentó un bloqueo de interacción en esta demo y se deja como pendiente, sin ocultarlo.
Planificar con categorías y estados visibles
El presupuesto separa el resumen de las partidas que lo componen. La intención es relacionar lo planificado y lo registrado, con detalle suficiente para decidir dónde ajustar. No se presenta como conciliación bancaria o contabilidad comprobada.
Convertir preparativos en próximos pasos
La lista de tareas organiza pendientes por períodos y permite leer su estado. La interfaz distingue el seguimiento del matrimonio de la administración de regalos y de la presentación pública.
Administrar fotos y compartir una vista pública
La administración y el álbum público tienen prioridades distintas: organizar frente a explorar. Las tarjetas muestran imágenes y acciones en contexto. No se subieron ni eliminaron fotografías durante la revisión.
La compra también necesita una salida cuando falla
El estado de rechazo explica que la compra no se completó y ofrece próximos pasos. Un proyecto transaccional necesita contemplar errores, no sólo el éxito. La pantalla de pago recibido existe en el inventario, pero sus datos de operación no se publican en esta galería.
Responder dudas fuera del formulario de compra
El centro de preguntas frecuentes combina temas frecuentes y una interfaz de calendario. Sirve para mostrar cómo se presenta ayuda contextual; fechas, beneficios y condiciones comerciales de estos templates deben validarse antes de publicarse en el producto.
Convirtamos tu idea en una ruta clara
Cuéntanos qué necesitas resolver. Ordenamos contigo el objetivo, el alcance y el próximo paso antes de hablar de pantallas.
Así comienza
- 01ContextoQué quieres conseguir
- 02AlcanceQué conviene construir
- 03PropuestaCómo avanzar