Date:
noviembre 20, 2019
Investigación y Descubrimiento
Objetivo del proyecto:
Diseñar y lanzar una nueva aplicación móvil para Android e iOS con un enfoque centrado en la facilidad de pago por parte de los usuarios. El objetivo principal era permitir pagos directos dentro de la app mediante tarjeta de crédito, débito y PayPal, además de integrar métodos de pago por código de barras en centros de cobro y socios comerciales. La app también debía mostrar los servicios contratados, permitir la contratación de nuevos, integrar información de telefonía móvil (si se tiene), ofrecer servicio técnico, y proporcionar acceso rápido a información del contrato, facturación y atención al cliente.
Al ser una empresa externa, el reto fue coordinar con los equipos internos de sistemas, diseño y marketing de Mega para alinear objetivos y funcionalidades, mediante una colaboración interdisciplinaria constante.
Audiencia objetivo:
Clientes actuales y nuevos de Mega. Usuarios que requieren atención técnica, desean evitar la desconexión de servicios por falta de pago y necesitan acceso inmediato a información clave como estados de cuenta, facturación, historial de llamadas y servicios contratados. La app está diseñada para usuarios que buscan inmediatez, claridad y soluciones prácticas desde su dispositivo móvil.
Métodos de investigación usados:
- Análisis de competencia: Se evaluaron otras apps del sector para identificar buenas prácticas, especialmente en la experiencia de usuario y secciones de pago.
- Selección estratégica de patrones UX: Se priorizó la eficiencia en los flujos de usuario, tomando decisiones basadas en lo que funcionaba sensatamente para el tipo de necesidades que Mega debía resolver.
- Focus Group (por parte del cliente): El departamento de mercadotecnia de Mega realizó sesiones con usuarios reales para validar necesidades clave. Los resultados coincidieron con la necesidad de ofrecer acceso rápido y claro a la información del servicio y opciones de pago.
Hallazgos clave:
- Problema principal: La navegación debía ser sencilla, intuitiva y útil. El reto inicial fue transformar un portal web existente en una experiencia móvil eficiente. Se partió de formularios y estructuras del portal actual para construir wireframes y diagramas de flujo.
- Oportunidad destacada: El rediseño enfocado en el sistema de pagos mejoró significativamente la recaudación vía app.
- Insight clave: La base de usuarios confía cada vez más en las plataformas digitales para realizar pagos, lo cual reforzó la necesidad de construir una experiencia confiable.
Arquitectura & Estrategia
Arquitectura General
La aplicación se estructuró siguiendo una arquitectura basada en módulos independientes (stack de navegación por áreas), lo que permitió escalar funcionalidades sin romper la experiencia general. Se integraron componentes reutilizables en React Native para mejorar mantenimiento y tiempos de desarrollo. La navegación se diseñó de forma jerárquica y tabular, permitiendo acceso directo a funciones clave como pagos, servicios contratados, promociones y soporte.
Flujos Robustos y Pensados para el Usuario
Se trazaron flujos de navegación completos desde la lógica del usuario, cuidando puntos críticos como el login, contratación de servicios, pagos, ajustes, promociones y atención al cliente. Cada flujo fue documentado y validado en colaboración con los stakeholders. El Centro de Ayuda fue uno de los desarrollos más complejos: se integraron diagnósticos técnicos, red, AI para FAQs y un agente en línea, facilitando la autogestión del usuario.
Colaboración y Adaptación
El diseño respetó los lineamientos de marca en transición de Megacable a Mega, y se adaptó a los nuevos requerimientos visuales del equipo de diseño. A pesar de que marketing solo cubrió parcialmente ciertas vistas, se retomaron sus lineamientos gráficos para cerrar todos los flujos restantes. El resultado fue una experiencia unificada, fluida y visualmente coherente.
Rediseño integral
Una experiencia móvil optimizada que revolucionó.
Este proyecto marcó un antes y un después para la app de Mega. No solo se rediseñó visualmente bajo un enfoque minimalista, sino que se trazaron y desarrollaron flujos completos, sólidos y funcionales que posicionaron a la aplicación como el principal canal de pagos de la compañía. A la par, se creó un Centro de Ayuda robusto con diagnóstico técnico, agente en línea e inteligencia artificial para resolver dudas, mejorando drásticamente la experiencia del usuario y reduciendo la carga operativa. Todo esto fue posible gracias a un trabajo colaborativo entre áreas de diseño, desarrollo e infraestructura, respetando lineamientos de marca y estándares de seguridad.
Diseño Visual & Prototipo
Paleta de colores:
Se partió de la guía de identidad corporativa existente, utilizando el azul corporativo, blanco y negro como base. A estos se añadieron rojo y amarillo para destacar notificaciones dentro de la app, respetando siempre los lineamientos visuales de la marca.
Tipografía:
La marca no contaba con una tipografía definida, por lo que se propuso utilizar Poppins en sus versiones 400 y 800. Esta fuente fue elegida por su estética moderna, excelente legibilidad y versatilidad en interfaces móviles.
Estilo visual:
Se definió un estilo minimalista, limpio y ordenado, con énfasis en la funcionalidad. Se optó por un fondo blanco predominante y el uso de cards para distribuir la información de forma clara y jerárquica.
Durante el desarrollo hubo dos versiones principales de la app. La primera fue diseñada completamente por Here4Design. Posteriormente, el departamento de marketing y diseño intervino con una propuesta visual centrada en las secciones de Mis Servicios, Inicio y Promociones. Si bien no completaron todos los flujos, su aporte estableció una base sólida de estilo gráfico, que fue expandida y completada por mi parte siguiendo la lógica de navegación de toda la aplicación.
También nos encomendaron en gestionar la transición de marca de Megacable a Mega, aplicando el nuevo logotipo en todas las vistas, respetando el manual de identidad.
Componentes UI principales
La app fue desarrollada en React Native, por lo que se reutilizaron componentes ya disponibles dentro del framework, adaptando sus estilos a la identidad visual del proyecto.
– Botones e Inputs:
- Se definieron inputs de ancho completo para evitar elementos comprimidos y se evitaron columnas dobles.
- Para formularios generales se utilizaron campos tipo caja; en pantallas como Login, Recuperar contraseña o Registro, se aplicaron inputs con borde inferior para un look más limpio.
– Tarjetas y Listados:
- Se desarrollaron componentes específicos para mostrar contratos, teléfonos, menús de acciones, listas y sliders.
– Iconografía:
- Se usaron íconos de la librería Font Awesome, seleccionados cuidadosamente según su funcionalidad.
– Confirmaciones:
- En lugar de botones tradicionales, se implementó un sistema de swipe para confirmar acciones, lo que brinda mayor seguridad y reduce errores táctiles.
Prototipo interactivo
El prototipo se desarrolló en Adobe XD, aprovechando una librería existente basada en React Native. Se trazaron las interacciones entre pantallas y se compartió un enlace funcional con el equipo de Megacable para pruebas internas.
Ajustes tras pruebas y validaciones
- Servicios a contratar:
Este módulo presentó varios retos. Se requirió estandarizar cómo se ingresaba y organizaba la información desde el sistema administrativo para que los listados y sus contenidos se mostraran correctamente y de forma uniforme en la app.
- Centro de Ayuda:
Fue una de las secciones más iteradas. Se desarrollaron funciones como Agente en línea, Diagnóstico técnico, Diagnóstico de red e integración de IA en las preguntas frecuentes.
Resultado y Valor Entregado
Antes vs. Después
Versión 1:
Mi primera propuesta de diseño abarcó todo el flujo y alcance funcional de la app. Aunque fue importante para trazar la ruta completa, visualmente era muy básica: predominaban bloques pesados de color azul y no se usaban cards. La interfaz era tosca y carecía de jerarquía visual.
Versión 2:
Fue el resultado del trabajo conjunto con el departamento de marketing y diseño. La introducción de cards permitió destacar mejor el contenido y facilitar acciones clave. Se refinó el estilo hacia un enfoque minimalista, reduciendo el uso excesivo de color y eliminando divisores innecesarios. El diseño final prioriza la limpieza visual y la experiencia del usuario.
Before
AfterImpacto en el negocio y el usuario
- Recaudación:
La app se convirtió en el canal principal de pagos para Mega, superando incluso a la plataforma web de Servicios en Línea. Esto tuvo un impacto directo en los ingresos de la empresa.
- Mejor experiencia de usuario:
El flujo de pagos fue optimizado para ser claro, rápido y fácil de usar. Se incluyó la opción de domiciliar pagos y se habilitó la posibilidad de pagar servicios anuales en una sola exhibición, lo cual fue bien recibido por los usuarios.
- Mayor conversión:
Gracias al diseño accesible y fluido, se captaron nuevas suscripciones de servicios adicionales desde la app.
- Manejo eficiente de recursos:
Los componentes desarrollados para sliders promocionales, junto con una plataforma administrativa paralela, permitieron a Mega segmentar campañas por sucursal, optimizando la gestión de promociones.
- Reducción de errores:
Se aplicaron buenas prácticas de ciberseguridad para proteger las transferencias digitales y mitigar riesgos de fraude.
- Percepción del usuario:
A pesar de contar con una calificación promedio de 3.0 en tiendas digitales, la mayoría de críticas negativas están relacionadas con el servicio prestado por la empresa, no con el funcionamiento de la app en sí.
Próximos pasos / Recomendaciones
- Fortalecer el Centro de Ayuda con soluciones más robustas y proactivas.
- Mejorar la experiencia de atención al cliente, incorporando herramientas más intuitivas y efectivas para resolver problemas comunes desde la app.
Paso extra: Tras bambalinas
Para que todo lo anterior fuera posible, se trabajó de forma intensa en el backend, en colaboración con el equipo de infraestructura de Mega. Se integraron múltiples servicios internos a través de APIs existentes y se validaron todos los mensajes programados para cada sección (Mis Servicios, Pagos, Estado de Cuenta, Telefonía Móvil), garantizando respuestas precisas y confiables.
También se desarrolló una plataforma administrativa paralela para alimentar y gestionar los sliders promocionales dentro de la app, permitiendo segmentar campañas por región o sucursal. Este sistema fue clave para automatizar y dinamizar la comunicación visual en la aplicación.
