Parent Dashboard & Store - Supertics
He rediseñado la plataforma para padres y la experiencia de compra dentro de la misma para crear una forma más clara, flexible y escalable para que los padres administren a sus hijos, las suscripciones y los productos para el refuerzo escolar.
Empresa – Método Supertics S.L
Rol – UX/UI & Product Designer
Año – 2021
Enfoque – Parent Dashboard · Commerce · Subscription Management
Contribución – Product Definition · User Flows · Wireframing · UI Design · Design System · Prototyping · Testing
¿Por qué rediseñarlo?
La plataforma había llegado a un punto en el que era difícil de evolucionar y cada vez más compleja tanto para la empresa como para sus usuarios.
El departamento de Marketing y Ventas dependía en gran medida del departamento de IT para gestionar productos, licencias y promociones, mientras que los padres se enfrentaban a problemas recurrentes de usabilidad en las fases de compra, gestión de cuentas y seguimiento del progreso.
El rediseño debía abordar ambos aspectos del producto: crear una experiencia más sencilla para los padres y al mismo tiempo proporcionar una base más flexible para el negocio.
Desafíos empresariales y operativos
Desafíos de la experiencia del cliente
Antes
Renovación de Licencias
Una experiencia centrada en la renovación con flexibilidad limitada para un modelo comercial en crecimiento.
Gestión de licencias
Reportes académicos
Progreso / Galaxias
Modelo mental inconsistente.
La estructura de las “Galaxias” mostrada a los padres no coincidía con la experiencia de actividad real del hijo, lo que hacía que el progreso fuera más difícil de entender.
La oportunidad
La oportunidad no consistía simplemente en modernizar la interfaz, sino en repensar el funcionamiento del producto.
La nueva experiencia debía simplificar la experiencia de los padres, clarificar la gestión de los hijos, las suscripciones y ofrecer un modelo de comercio más flexible.
Descubrimiento & definición del producto
Desde los requisitos del negocio hasta la lógica del producto.
Antes de diseñar la interfaz, trabajamos juntos para definir la lógica, la estructura y los flujos clave del nuevo producto.
Las sesiones reunieron a los departamentos de Marketing, Informática y Diseño, utilizando diagramas de flujo de gran tamaño para explorar el nuevo modelo de comercio, la gestión de licencias y el Panel de Control para Padres.
Comercio
Lógica del producto y de la compra
Ventas y marketing
Gestión de promociones y licencias
Panel de control para padres
Navegación y estructura de la cuenta
Gestión de hijos
Perfiles y progreso
Mi rol
Contribuí a la lógica del producto, la estructura de navegación y la definición del flujo, y luego traduje estas decisiones a los Lo-fi wireframes.
La definición del flujo estableció lo que el producto debía hacer. El diseño del flujo ayudó a definir cómo los usuarios navegarían e interactuarían con él.
De los flujos a los wireframes
Commerce
Simplificando el proceso de compra
La nueva experiencia de comercio debía ser compatible con diferentes productos de suscripción y ofertas promocionales sin añadir complejidad innecesaria al proceso de compra.
La solución debía ser especialmente accesible para padres con diferentes niveles de confianza digital, basándose en la retroalimentación recurrente de la plataforma existente.
Lo-fi Wireframes
Decisión de diseño
Separe la selección del producto de la configuración.
La selección de productos y la configuración de licencias se separaron para simplificar el proceso de compra y evitar abrumar a los usuarios con combinaciones innecesarias.
Commerce – De los wireframes hasta el diseño Hi-fi.
Una vez definidos el flujo de compra y la estructura de la información, traduje los wireframes a una interfaz visual diseñada para que la experiencia fuera clara, accesible y coherente.
01 Navegar
Jerarquía de productos clara
El tipo de producto, el precio y la acción principal se presentan de forma coherente, lo que ayuda a los padres a consultar el catálogo y comparar las opciones disponibles con mayor facilidad.
02 Configurar
Configuración independiente
La selección del hijo y de la materia se realiza después de elegir el producto, lo que reduce el número de decisiones que se presentan a la vez y facilita la comprensión del proceso de compra.
03 Revisar & Pagar
Pago concentrado
El carrito reúne la revisión del producto, la aplicación de descuentos y la siguiente acción de pago en un solo paso, de forma concisa.
04 Completado
Pasos siguientes claros
Tras la compra, los padres pueden volver al panel de control o acceder directamente a las actividades de aprendizaje.
Gestión de hijos
Crear un contexto claro para cada hijo.
El panel de control para padres se estructuró en torno al niño como contexto de navegación principal, ofreciendo a los padres un único lugar para acceder a las acciones y la información asociadas a cada hijo.
Este enfoque tenía como objetivo reducir la complejidad de la navegación y ayudar a los padres a completar tareas comunes de forma independiente, sin tener que buscar en toda la plataforma ni depender de la asistencia.
Lo-fi Wireframes
Decisión de diseño
El hijo como contexto de navegación principal
Todas las acciones relacionadas con los hijos se agruparon en un único contexto, lo que proporcionó a los padres un lugar predecible para administrar perfiles, acceder a informes, progresos y realizar tareas comunes como cambiar la contraseña de un hijo.
Esto redujo la necesidad de buscar en toda la plataforma o de depender del soporte técnico para encontrar funciones comunes.
Gestión de hijos - De la estructura a la interfaz
Una vez que el hijo se convirtió en el principal contexto de navegación, traduje la estructura a una interfaz clara donde los padres pudieran acceder a las acciones e información clave de cada hijo desde un único lugar.
01 Gestionar hijos
02 Opciones del hijo
03 Informes
04 Progreso / Revisión
Replantear la información sobre el progreso
Antes / Galaxias
Después / Progreso
La experiencia previa con los informes exponía a los padres a una estructura tipo «Galaxias» que no se reflejaba de forma consistente en la experiencia de actividad del hijo. El rediseño sustituyó ese modelo fragmentado por una visión más directa de la actividad y el progreso del hijo.
Navegación contextual
Los niveles de navegación interactivos mantienen visible la ubicación del elemento principal al tiempo que permiten el acceso directo a las secciones anteriores.
Gestión de suscripciones
Diseñar estados de suscripción claros
El área de suscripciones debía facilitar la comprensión del estado y el ciclo de vida de cada suscripción, al tiempo que ofrecía a los padres un control claro sobre las renovaciones automáticas.
El diseño debía distinguir entre una suscripción activa, una renovación cancelada y una suscripción vencida sin generar confusión innecesaria.
Este enfoque tenía como objetivo reducir la complejidad de la navegación y ayudar a los padres a completar tareas comunes de forma independiente, sin tener que buscar en toda la plataforma ni depender de la asistencia.
Lo-fi Wireframes
Decisión de diseño
01 Hacer explícito el estado de la suscripción.
La interfaz separa el estado de acceso a la suscripción de su estado de renovación, dejando claro que cancelar la renovación automática no finaliza la suscripción de inmediato.
Activo
Renovación programada
Acceso disponible
Activo / Renovación cancelada
Todavía activa hasta la expiración
Acción para cancelar suscripción deshabilitada
02 Evitar la cancelación accidental
Un cuadro de diálogo de confirmación identifica claramente la suscripción que se está cancelando antes de que se complete la acción.
03 Convertir los estados vacíos en pasos útiles a seguir
Cuando no hay suscripciones activas disponibles, el estado vacío explica la situación y proporciona un acceso directo a la Tienda.
Gestión de suscripciones - Desde los estados hasta la interfaz.
He traducido la lógica de suscripción a una interfaz clara que facilita la comprensión del acceso actual, el estado de renovación y el historial de suscripción.
01 Suscripciones activas
02 Confirmación de cancelación
03 Activo / Renovación cancelada
04 Sin suscripciones
05 Historial suscripciones
Precisar el estado de la suscripción.
Activa
Renovación programada / Acceso disponible
Activa – Renovación cancelada
Renovación cancelada / Acceso hasta el vencimiento / Cancelación deshabilitada
La interfaz separa el estado de acceso del estado de renovación, dejando claro que cancelar la renovación automática no finaliza la suscripción de inmediato.
Evitar la cancelación accidental
El cuadro de diálogo de confirmación identifica la suscripción exacta que se está cancelando antes de que se complete la acción.
Convierte los estados vacíos en próximos pasos.
Cuando no hay suscripciones activas disponibles, la interfaz explica el estado y proporciona una ruta directa a la tienda.
Design System
Construir un lenguaje visual coherente
Para dar soporte a una interfaz en constante crecimiento con múltiples secciones, estados y flujos de usuario, creé un sistema de diseño reutilizable que abarca los fundamentos visuales y los componentes principales de la interfaz de usuario de la plataforma.
01 Foundations
Definí la jerarquía tipográfica y la paleta de colores utilizadas en el Panel de Control para Padres y la experiencia de comercio electrónico para establecer un lenguaje visual coherente.
Tipografía
Color Palette
01 Components
A continuación, creé componentes y variantes reutilizables para los patrones de interacción recurrentes en todo el producto, lo que ayudó a mantener la coherencia a medida que la interfaz se expandía.
Botones & Variantes
Estadisticas
Acciones hijo / Botones de usuario
Acordeón
Mi contribución
Diseñé y mantuve el sistema en Figma, definiendo los fundamentos, los componentes y las variantes utilizadas en toda la interfaz.
Desde el diseño hasta la implementación
Los diseños se llevaron a la práctica, seguidos de pruebas y mejoras iterativas basadas en los comentarios recibidos sobre el producto implementado.
Explora el prototipo
Explora el prototipo de alta fidelidad para ver el panel de control completo para padres, la experiencia de comercio electrónico y los flujos de gestión de suscripciones.
