CASO DE ESTUDIO
Subtrack
Creación de una interfaz responsive de gestión de suscripciones que transforma pagos recurrentes, renovaciones y oportunidades de ahorro en un sistema más claro.
PROBLEMA
El desafío
La información de suscripciones suele estar distribuida entre recibos, aplicaciones bancarias y cuentas individuales de servicios. La interfaz debía consolidar los costos recurrentes sin convertirse en otro dashboard financiero denso, preservando prioridades claras en desktop, tablet y mobile.
- El gasto mensual era difícil de comprender como un conjunto.
- Los estados de renovación, pago y cancelación competían por atención.
- La densidad de información en desktop necesitaba un comportamiento responsive coherente.
EVIDENCIA
Lo que reveló la definición de la interfaz
El costo necesitaba una vista general única
Evidencia: Las tarjetas individuales de suscripción no comunicaban el impacto mensual total ni los gastos próximos.
Impacto: Las personas podían revisar servicios sin comprender el panorama financiero general.
Los estados de renovación necesitaban jerarquía
Evidencia: Los estados activos, próximos, fallidos y relacionados con cancelación requerían distintos niveles de urgencia.
Impacto: Tratar cada elemento por igual dificultaría identificar acciones sensibles al tiempo.
El contenido repetido requería un sistema
Evidencia: Tarjetas, filtros, precios, badges y detalles de pago se repiten en múltiples vistas y breakpoints.
Impacto: Aplicar estilos aislados introduciría inconsistencias y haría más lento el refinamiento responsive.
DECISIONES
Respuesta de diseño
La interfaz organiza la gestión de suscripciones alrededor de la vista general, la urgencia y el comportamiento reutilizable, en lugar de presentar todos los datos con el mismo peso visual.
Los costos recurrentes estaban fragmentados entre servicios individuales.
Crear un dashboard con gasto mensual, próximas renovaciones, servicios activos y ahorro estimado.
Las personas obtienen una vista inmediata de lo que pagan, qué se renueva próximamente y dónde puede ser útil actuar.
Los estados de suscripción tienen distintos niveles de urgencia.
Usar badges semánticos, fechas, alertas y patrones de acción consistentes para cada estado.
Las personas pueden distinguir más rápido la información rutinaria de pagos fallidos o renovaciones próximas.
La densidad de desktop no podía comprimirse sin más en pantallas pequeñas.
Construir layouts adaptativos de lista y detalle a partir de componentes compartidos y campos priorizados.
Las mismas tareas principales se mantienen comprensibles sin conservar densidad innecesaria de desktop.
FLUJO PRINCIPAL DE GESTIÓN
VALOR
Resultado y aprendizaje
El resultado es una base UI reutilizable que consolida datos de suscripciones, diferencia estados operativos y adapta la densidad de información entre tamaños de pantalla. El proyecto demuestra cómo un sistema de componentes puede sostener la claridad en lugar de funcionar únicamente como un recurso de producción.
- Una jerarquía clara importa más que mostrar todos los detalles disponibles al mismo tiempo.
- Los estados semánticos deben permanecer consistentes entre tarjetas, listas y vistas de detalle.
- Las decisiones de diseño responsive deben formar parte del modelo de componentes desde el inicio.