Facturar un ticket ante el SAT es una de las tareas más confusas para el paciente promedio. Rediseñé el flujo completo de generación de CFDI para hacerlo claro, guiado y a prueba de errores — en desktop y móvil.
Ver el caso completo ↓Salud Digna atiende a millones de pacientes al año en su red de laboratorios y clínicas en México. Cada uno de esos servicios puede facturarse ante el SAT.
El portal de facturación es el punto donde el paciente convierte su ticket de compra en un CFDI válido. Es una tarea que combina dos fuentes de fricción: la complejidad fiscal del SAT y una interfaz que no acompañaba al usuario en el proceso.
El objetivo no era rediseñar una interfaz bonita, sino resolver un problema de comprensión: la mayoría de los usuarios no sabe dónde encontrar sus datos fiscales, qué formato usar, ni en qué orden completar el proceso. El rediseño debía volver el flujo evidente por sí mismo.
La pantalla de bienvenida define si el usuario entiende qué hacer o se abruma. Este es el contraste directo entre el punto de partida y el rediseño.
Analizando el portal existente identifiqué siete áreas críticas. Estas fueron las que más impacto tenían en el abandono y en la carga de soporte.
El usuario no sabía en qué paso estaba, cuántos faltaban ni el orden correcto para completar la factura.
El contenido explicativo de datos técnicos, compite en visualización con los botones principales, aumentando la carga cognitiva del usuario.
Formulario extenso, sin jerarquía y sin ejemplos del formato esperado para RFC, folio o importe.
No existía validación de información a partir del RFC, por lo que fomentaba errores recurrentes en captura e invalidación de facturas
No había pantallas para los casos más frecuentes: RFC no encontrado, folio ya facturado o importe incorrecto.
En el momento de mayor valor —la factura generada— los botones de descarga quedaban en un lugar poco visible.
El portal estaba pensado solo para desktop, pese a que muchos pacientes facturan desde el celular al salir de la sucursal.
Cada fricción se tradujo en una decisión de diseño concreta. Estos son los cambios de mayor impacto.
Antes: el usuario navegaba sin saber su posición en el proceso.
Ahora: un indicador de 4 pasos —Datos fiscales, Tickets, Prefactura, CFDI— acompaña cada pantalla.
Antes: el error de nombre fiscal aparecía al final, tras completar todo.
Ahora: RFC y razón social se validan en el primer paso, comparando contra el registro del SAT antes de avanzar.
Antes: placeholders vacíos.
Ahora: ejemplos reales en cada campo y mensajes de error con instrucción accionable y enlace a la CSF.
Antes: descarga escondida en un lugar poco visible.
Ahora: un header de confirmación con resumen y tres acciones de descarga prominentes.
Reorganicé la generación de factura en una secuencia lineal que el usuario puede seguir sin perderse.
Captura y validación contra el SAT
Folio + forma de pago, con reglas visibles
Confirmación de datos y servicios
PDF, XML o envío por correo
La pregunta más frecuente del usuario es siempre la misma: "¿dónde encuentro mis datos fiscales?". En lugar de enviarlo a una página de ayuda externa, integré un sistema de modales educativos dentro del propio flujo.
Tres modales paginados explican qué pide el SAT, las cuatro formas de obtener la Constancia de Situación Fiscal, y muestran el documento real con cada dato resaltado. El usuario resuelve su duda sin abandonar la tarea.
Los tres modales de ayuda, con paginación e ilustración del documento fiscal anotado.
1 / 3La versión móvil no es una reducción del desktop. Los componentes densos se replantearon con patrones nativos.
La tabla de tickets, ilegible a 390px, se convirtió en tarjetas autónomas con estados —válido, error, swipe-to-delete— y una barra inferior fija con el total.
La factura de 9 columnas se reorganizó en tres bloques colapsables. El detalle fiscal del SAT se oculta bajo un acordeón, mostrando al paciente solo lo que necesita verificar.
Para la prefactura móvil construí un acordeón de servicios con comportamiento exclusivo: al abrir un concepto, cualquier otro abierto se repliega automáticamente.
Lo resolví con una variable booleana por fila enlazada a la visibilidad del detalle, más reacciones condicionales que alternan el estado propio y cierran los demás. Alineación de importes protegida para cifras grandes.
Validar RFC y nombre en el primer paso evita que el usuario invierta tiempo en un flujo que fallará al final. El error temprano es más barato que el error tardío.
El stepper, los breadcrumbs y los mensajes contextuales eliminan la sensación de estar perdido en un proceso de varios pasos.
El paciente no necesita ver las claves fiscales del SAT para confirmar su factura. El detalle técnico existe, pero se oculta hasta que se solicita.
Cada confirmación y cada error ofrecen un siguiente paso claro. "Aceptar" se reemplazó por acciones que dicen qué pasa después.
El rediseño se apoya en una biblioteca de tokens y componentes reutilizables. Explóralo abajo — cada pieza está pensada para escalar y mantener consistencia en todo el flujo.
Toca cualquier color para copiar su valor hex.
Primario, secundario, éxito y fantasma, con estados normal, hover y desactivado.
tipo × estado · 12 variantes
Vacío, enfocado, lleno, error y desactivado. El error incluye mensaje accionable.
estado · 5 variantes
Cuatro niveles de feedback contextual con barra lateral que codifica severidad.
tipo · 4 variantes
Indicador de progreso del flujo. Completado en verde, actual en azul, pendiente en gris.
paso · 4 variantes
Sustituye a la tabla en móvil. Estados normal, seleccionado y error de pago.
estado · 3 variantes
Revelación progresiva del detalle fiscal, con chevron que cambia color y dirección.
abierto · 2 variantesRecorre el proceso de generación de factura de principio a fin: captura de datos fiscales, agregado de tickets, revisión de prefactura y descarga del CFDI.
Grid de 12 columnas · flujo de 4 pasos con validación temprana
La versión móvil no comprime el desktop: cada componente denso se rediseñó con patrones táctiles nativos, incluyendo el acordeón de servicios con lógica exclusiva.
Tarjetas táctiles · barra de total fija · acordeón con Figma Variables
fricciones críticas del diagnóstico resueltas
errores de captura recurrentes con validación temprana de RFC ante el SAT
versión responsive: facturación desde móvil por primera vez
de pacientes al año usan este flujo
Menor abandono en el primer contacto — la bifurcación inmediata (Consultar / Generar) reemplaza los seis párrafos de advertencias técnicas que competían con la acción principal.
Errores detectados al inicio, no al final del flujo — validar RFC y razón social en el primer paso evita que el usuario complete todo el trámite para descubrir un error de captura hasta el final.
Autoservicio de dudas fiscales sin salir de la tarea — los modales educativos integrados resuelven la pregunta más frecuente ("¿dónde encuentro mis datos fiscales?") sin derivar a soporte externo.
Trámite completo desde el celular, no una versión reducida — el rediseño de tabla a tarjetas y el acordeón exclusivo habilitan un canal que antes simplemente no existía para el paciente.
Rediseñar un trámite fiscal me enseñó que la mayor parte del trabajo de UX no está en la interfaz, sino en el orden de las cosas. Mover una sola validación al inicio del flujo eliminó una clase entera de errores que ninguna mejora visual habría resuelto.
También reforcé algo que aplico a todo mi trabajo: el usuario no necesita ver toda la complejidad del sistema para confiar en él. Mi labor es decidir qué mostrar, cuándo, y en qué orden — para que un trámite intimidante se sienta simplemente como llenar un formulario claro.