Social Alert
Social Alert es una herramienta de escucha y monitoreo de redes sociales, para gestión y alerta temprana de crisis. Identificando comentarios, palabras y patrones negativos o positivos para así prevenir crisis o actuar a tiempo.
El proyecto requiere un rediseño completo de la aplicación web, para estar alineado a los nuevos objetivos de negocio.
Rol
Lead UI/UX Designer
Investigación, diseño, testing
Equipo
5 personas
1 diseñador, 3 Developers, 1 PM
Duración
6 meses
Julio - Septiembre 2025
La Plataforma Social Alert, presentaba diversos problemas de usabilidad que afectaban directamente la experiencia del usuario y la eficiencia del producto.
- Flujos extensos y poco intuitivos.
- Usuarios no encontraban de manera clara donde estaba la información.
- Excesiva carga cognitiva.
- Interfaz visualmente desactualizada.
- Poca agilidad y fiabilidad de la plataforma al usuario.
- Poca claridad de jerarquía de información.
- Competencia con herramientas más modernas y eficientes.
Estos problemas impactaban negativamente en la satisfacción del usuario y en el valor efectivo de la plataforma.
Objetivos UX
- Mejorar la usabilidad general del flujo propuesto.
- Reducir errores y puntos de fricción.
- Diseñar una experiencia consistente entre web y mobile.
Objetivos de negocio
- Incrementar ventas del producto.
Masificar el uso de la plataforma.
Para entender mejor a los usuarios y el contexto del producto, se realizaron las siguientes actividades:
- Benchmark de plataformas similares.
- Encuestas a usuarios activos.
- Investigación de navegación de usuarios usando herramientas como Clarity y Posthog
- Análisis heurístico de la plataforma.
Encuestas a usuarios
Se encuestó tanto a usuarios activos como al equipo interno. La información recabada de este proceso fue la siguiente:
Benchmark de plataformas similares
Se analizó las siguientes plataformas que realizan monitorio o listening de redes sociales para descubrir oportunidades de mejora y diferenciadores
Análisis heurístico
Se realizó un análisis heurístico de la plataforma para identificar ciertos problemas de usabilidad.
UI
Se identificaron los siguientes problemas de usabilidad en la plataforma:
Creación de consultas
Tablero principal
Configuración de alertas
Mapas de calor
Se propuso integrar herramientas de seguimiento de usuarios como Clarity, posthog. Para poder entender mejor el comportamiento de los usuarios en la plataforma y así identificar problemas de usabilidad, mapas de calor, donde se quedan más tiempo, etc.
Mapa de calor - Creación de consultas
Los datos muestran que los usuarios pasan mucho tiempo en la creación de consultas, lo que indica que tienen problemas para crear consultas.
Mapa de calor - Tablero principal
Aquí se observa que los usuarios usan bastante el area de busqueda de consultas, y la primera (En vivo) y segunda pestaña (Qué) en el tablero, las otras pestañas son poco o nada usadas.
Insights encontrados
Con la información recopilada de las encuestas y el benchmark, se pudo identificar los siguientes insights:
Flujos complejos
Se econtro fricción en flujos importantes como son:
- Creación de consultas.
- Configuración de alertas.
Enfoque: Simplificar los flujos más importantes.
Demasiada información
Mucha información regada y repetida en el dashboard principal, lo que dificultaba la lectura y comprensión de la información.
Enfoque: Agrupar y simplificar la información.
Problemas de usabilidad
Existen problemas de usabilidad en la plataforma que dificultan la experiencia del usuario.
Enfoque: Mejorar la usabilidad de la plataforma corrigiendo los puntos identificados en el análisis heurístico.
Se trabajó mejorando los flujos más importantes, como el flujo de creación de consultas, tablero y alertas.
Creación de consultas
Se rediseñó el flujo de creación de consultas, para que sea más sencillo y rápido para el usuario. Se dividio el flujo en 2 pasos.
Input de consultas en lenguaje natural
Para facilitar el proceso de creación de consultas, se incluyó un input de consultas, para que el usuario pueda crear consultas en lenguaje natural y por detrás se traduzca a consultas complejas(AND/OR).
Complejidad de entender el AND/OR: Al tener un input de consultas en lenguaje natural, el usuario no necesita entender el AND/OR, solo necesita escribir lo que quiere y el sistema se encarga de traducirlo a consultas complejas.
Visualización de consulta construida
En esta sección el usuario puede ver la consulta que se ha construido, en diferentes formatos y puede editarla, aumentar palabras clave o eliminar palabras clave.
Visualización bloques (AND/OR) amigable Tomando en cuenta las dificultades y problemas que tenían los usuarios con el formato de consulta anterior, se muestra la consulta en diferentes formatos, para que el usuario pueda entender mejor cómo se está construyendo.
Flexibilidad en la edición: El usuario puede editar la consulta, aumentar palabras clave o eliminar palabras clave si lo desea en una misma pantalla, eliminando la necesidad de scrollear.
Ayudas visuales: Se implementaron ayudas visuales, hints y tooltips para que el usuario pueda entender mejor cómo se está construyendo la consulta. Lo que hace cada bloque de la consulta y como se relaciona con las otras partes.
Previsualización de publicacioes: Ahora aparece una pequeña muestra de las publicaciones que se han encontrado con la consulta actual, para que el usuario pueda ver en tiempo real los resultados de la consulta. Si es lo que esta buscando, puede proceder a ejecutar la consulta completa.
Tablero
Para el trablero se optó por reducir la cantidad de información innecesaria y repetitiva y mostrar solo la información relevante, correctamente agrupada para el usuario.
Nuevo tablero
Se ordenó el tablero para que el usuario pueda ver la información de forma clara y ordenada, con los filtros más usados basado en las métricas obtenidas, ubicados en la parte superior para fácil acceso.
Información desorganizada: El tablero anterior mostraba demasiada información, lo que dificultaba al usuario encontrar lo que necesitaba. Se redujo el número de tabs y se reorganizó la información de forma más clara.
Filtros intuitivos Basado en las observaciones, mapas de calor que reflejaban donde los usuarios pasaban más tiempo, se ubicaron los filtros más usados en la parte superior para fácil acceso.
Mejoró usabilidad: Del análisis de heurísticas se pudo identificar varios puntos de mejora, que se implementaron en el rediseño del tablero. Como jerarquía de la información, estandarización de componentes, iconos, diseño minimalista, etc.
Configuración de alertas
Se separó el flujo de creación de alertas de la sección de configuración de consultas, para que el usuario pueda configurar la alerta de forma independiente y no mezclar los dos procesos.
Configuración de alertas
Separar flujos: Se separó el flujo de creación de alertas de la sección de configuración de consultas, para que el usuario pueda configurar la alerta de forma independiente y no mezclar los dos procesos.
Configuración amigable: Se rediseñó el formulario de configuración de alertas para que sea más amigable y fácil de usar. Se eliminaron los campos que no eran necesarios y se agregaron tooltips para explicar cada campo.
Mejoró experiencia de usuario: Se realizaron pruebas con usuarios internos para validar el rediseño del formulario de configuración de alertas. Se obtuvo feedback positivo por parte de los usuarios, quienes indicaron que el formulario era más amigable y fácil de usar.
Antes de la implementación en código, se realizaron instancias de validación:
- Pruebas A/B con usuarios internos.
- Validación de prototipos interactivos.
- Ajustes basados en feedback previo al desarrollo.
- Uso de herramientas de testing (Maze).
El resultado fue una nueva versión del producto con:
- Interfaces más tangibles y claras.
- Flujos más cortos y entendibles.
- Jerarquía visual consecuente.
- Diseño consistente y alineado a un sistema visual.
- Mejora en la experiencia de usuario.
- Reducción de la carga cognitiva.
- Información ordendada, agrupada y jerarquizada.
Replicar y adaptar: Algunas plataformas ya habían detectado y corregido muchos de los errores que tenía la nuestra, por lo cuál se replico dichas soluciones, siempre adaptándola a nuestras propias necesidades y objetivos.
Funcionalidad ante todo: Muchas decisiones de diseño se las tomó basándonos en la información recabada de los usuarios y del equipo, ya que poner cierta información en un lugar determinado era primordial para agilizar su trabajo y navegación en la plataforma
Involucrar a todos los actores: Involucrar todos los actores: en las distintas etapas es crucial para validar ideas y diseños, tanto con los stakeholders, como con el equipo de desarrolladores, para mantener una buena comunicación y que no haya problemas en el desarrollo.
Más proyectos
