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
3 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:
| Puntos de fricción | Hallazgos principales | Evidencia recurrente | Oportunidades de mejora |
|---|---|---|---|
| Estructuración de queries | Dificultad alta en el uso de AND / OR y exclusiones | Principal fuente de errores y tickets | Editor visual de lógica, ejemplos claros y validaciones |
| Confianza en resultados | Confianza media o baja; los usuarios revisan resultados manualmente | Palabras confusas y ruido en resultados | Vista previa de resultados antes de guardar |
| Flujo de creación | Proceso funcional pero largo, repetitivo y con mucho scroll | Bloques redundantes y pasos poco claros | Simplificación del flujo y agrupación de pasos |
| Complejidad de la query | Construcción de queries largas y complejas | Tedioso agregar y editar términos | Guardado de versiones y edición rápida |
| Interfaz visual | Usable pero poco clara y poco moderna | Tipografía pequeña y bajo contraste | Mejora de jerarquía visual y legibilidad |
| Uso de filtros y opciones | Muchas opciones existen pero se usan poco | Filtros complejos y poco intuitivos | Simplificar opciones o mostrar ayuda contextual |
| Configuración de alertas | Alertas desacopladas del flujo principal | Genera confusión en usuarios | Integrar alertas dentro del flujo de creación |
| Tickets y soporte | La mayoría de tickets provienen de la creación de queries | Usuarios no ven datos por mala configuración | Diseño guiado para reducir tickets |
| Automatización esperada | Alta expectativa de asistencia automática | Lenguaje natural, sugerencias, preview | Query asistida por IA |
Benchmark de plataformas similares
Se analizó las siguientes plataformas que realizan monitorio o listening de redes sociales para descubrir oportunidades de mejora y diferenciadores
| Plataforma | Características principales | Fortalezas | Debilidades |
|---|---|---|---|
 Brand24 | • Monitoreo de menciones en tiempo real • Alertas básicas • Análisis de sentimiento • Reportes simples | • Fácil de usar • Rápida configuración • Ideal para pymes y usuarios no técnicos | • Capacidades limitadas para queries complejas • Poca personalización avanzada • Análisis menos profundo |
 Brandwatch | • Análisis avanzado de social listening • Queries complejas • Gran volumen de fuentes • Dashboards personalizables | • Muy potente para análisis profundo • Alta flexibilidad en queries • Escalable para grandes empresas | • Curva de aprendizaje alta • Interfaz compleja para usuarios nuevos • Costo elevado |
 Sprout Social | • Gestión de redes sociales, monitoreo, publicación • Analítica integrada • Workflows colaborativos | • Excelente UX • Interfaz clara • Reporting bien estructurado | • Social listening menos profundo • Poca flexibilidad en lógica avanzada de búsquedas |
 Hootsuite | • Gestión y programación de redes • Monitoreo básico • Integraciones múltiples | • Fácil adopción • Buena gestión multicanal • Conocido en el mercado | • Capacidades limitadas de análisis profundo • Queries simples • Experiencia fragmentada en flujos avanzados |
Análisis heurístico
Se realizó un análisis heurístico de la plataforma para identificar ciertos problemas de usabilidad.
| Heurística | Descripción | Pregunta 1 | Puntaje 1 | Pregunta 2 | Puntaje 2 | Pregunta 3 | Puntaje 3 | Promedio Heurística |
|---|---|---|---|---|---|---|---|---|
| Visibilidad del estado del sistema | Los usuarios deben saber en todo momento qué está pasando en la interfaz. | ¿La interfaz muestra un indicador de carga o progreso cuando se está procesando algo? | 3 | ¿Recibe el usuario una confirmación visual o mensaje cuando una acción se completa exitosamente? | 3 | ¿Se destacan claramente los errores o problemas que ocurren en el sistema? | 3 | 3 |
| Relación entre el sistema y el mundo real | La interfaz debe hablar el mismo idioma que los usuarios, usando términos familiares. | ¿Los términos y etiquetas utilizados en la app son comprensibles para el usuario promedio? | 3 | ¿Los iconos y elementos visuales representan objetos o acciones que los usuarios ya conocen? | 3 | ¿El flujo de navegación sigue una lógica natural, como en experiencias del mundo real? | 2 | 2,67 |
| Control y libertad del usuario | Los usuarios deben poder corregir errores y navegar libremente. | ¿Se pueden deshacer acciones importantes (como eliminar un archivo)? | 4 | ¿Los usuarios pueden cancelar un proceso en cualquier momento si cambiaron de opinión? | 4 | ¿Existe una opción de volver atrás o regresar a un estado anterior? | 4 | 4 |
| Consistencia y estándares | La interfaz debe ser predecible y seguir estándares reconocidos. | ¿Los botones, menús y acciones funcionan y se ven de la misma manera en todas las secciones de la app? | 3 | ¿Los colores y símbolos tienen el mismo significado en toda la app? | 2 | ¿Los elementos interactivos (botones, enlaces, iconos) tienen un comportamiento predecible? | 4 | 3 |
| Prevención de errores | Es mejor prevenir errores que corregirlos después. | ¿El sistema evita que el usuario envíe formularios incompletos o con datos incorrectos? | 4 | ¿Se pide una confirmación antes de acciones irreversibles, como eliminar una cuenta o un archivo? | 5 | ¿El sistema evita acciones destructivas sin confirmación, como cerrar una pestaña sin guardar cambios? | 3 | 4 |
| Reconocimiento en lugar de recuerdo | Es más fácil reconocer algo que recordarlo. | ¿Los nombres de los botones y menús son claros y fáciles de entender sin adivinar su función? | 3 | ¿El usuario puede ver opciones y acciones disponibles sin tener que recordar dónde están? | 3 | ¿Existen hints, tooltips o ejemplos visuales que ayuden al usuario a completar tareas sin esfuerzo? | 2 | 2,67 |
| Flexibilidad y eficiencia de uso | Una buena interfaz se adapta tanto a principiantes como a expertos. | ¿Existen atajos de teclado o accesos rápidos para usuarios frecuentes o avanzados? | 3 | ¿El usuario puede personalizar opciones para adaptar la experiencia a sus necesidades? | 2 | ¿El sistema ofrece sugerencias inteligentes o automatización para agilizar tareas repetitivas? | 0 | 1,67 |
| Diseño estético y minimalista | Menos es más: evitar elementos innecesarios en la interfaz. | ¿La interfaz evita el exceso de texto o elementos visuales innecesarios? | 1 | ¿Los colores, tipografías y elementos gráficos siguen una jerarquía clara para destacar lo importante? | 2 | ¿Los colores e imágenes ayudan a comprender la info? | 3 | 2 |
| Ayuda a reconocer, diagnosticar y recuperarse de errores | Cuando los usuarios cometen errores, la interfaz debe ayudar a corregirlos. | ¿Los mensajes de error explican claramente qué pasó y cómo solucionarlo? | 3 | ¿Los errores permiten ser corregidos sin perder datos o reiniciar el proceso desde cero? | 3 | ¿El sistema sugiere soluciones o enlaces a ayuda cuando ocurre un problema? | 1 | 2,33 |
| Ayuda y documentación | Debe haber ayuda y documentación accesible cuando el usuario la necesite. | ¿Existe una sección de ayuda o preguntas frecuentes accesible en la interfaz? | 2 | ¿Las instrucciones y guías están bien organizadas y son fáciles de entender? | 1 | ¿El usuario puede buscar soluciones dentro de la app sin salir a otra web? | 2 | 1,67 |
| Promedio Final | 2,7 | |||||||
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
