Buscador AFP Modelo.

Snapshot

Rol
UX Designer · UI Designer · Front-end Developer

Duración
Proyecto iterativo, con lanzamiento en noviembre de 2024

Herramientas
Figma · Maze · Vue.js · Ant Design · Strapi

Usuarios
Afiliados, pensionados, futuros pensionados y visitantes del sitio público

Contexto

El sitio público de AFP Modelo no contaba con un buscador funcional. En el pasado existió una solución de pago que fue desactivada por altos costos de mantención, lo que dejó al sitio sin una herramienta clave para la exploración de contenidos.

Con el tiempo, comenzaron a acumularse comentarios negativos en encuestas de satisfacción relacionados con la dificultad para encontrar información, afectando directamente la experiencia de usuario y el TNPS del canal digital.

Ante este escenario, desde el área de Canal Digital se impulsó la creación de un buscador propio, de bajo costo y bajo mantenimiento, que pudiera integrarse a la arquitectura existente del sitio.

Problema

Los usuarios no lograban encontrar información relevante de forma rápida y autónoma dentro del sitio público, lo que generaba:

• Frustración y abandono
• Mayor carga en canales de atención
• Impacto negativo en indicadores de satisfacción

El desafío era diseñar un buscador útil, visible y eficiente, sin recurrir a soluciones externas de alto costo.

Objetivos

• Facilitar la búsqueda de contenido de forma intuitiva y guiada
• Mejorar la experiencia de usuario y el TNPS
• Reducir comentarios asociados a “no encuentro información”
• Permitir seguimiento y gestión de búsquedas desde el CMS

Mi rol

Lideré el proceso de principio a fin, involucrándome en:

• Investigación y benchmark
• Arquitectura de información
• Diseño UX/UI
• Prototipado y testeo con usuarios
• Implementación front-end
• Integración con CMS
• Medición de impacto post-lanzamiento

Este enfoque me permitió tomar decisiones considerando tanto la experiencia del usuario como las restricciones técnicas y de negocio.

Investigación y benchmarks

Competencia directa (AFP)

La mayoría de las AFP analizadas contaban con buscadores básicos, sin mejoras como autocompletado, sugerencias, categorización o búsqueda instantánea. En general, los buscadores eran poco visibles y ofrecían resultados extensos con baja jerarquía.

Competencia funcional (banca)

En el sector bancario se observaron experiencias más avanzadas, con interfaces modernas y funcionalidades como:

• Sugerencias de búsqueda
• Resultados en tiempo real
• Historial y categorización
• Mayor foco en los primeros resultados

Estos referentes ayudaron a definir el estándar mínimo de experiencia esperada por los usuarios.

Estudios de apoyo

La investigación se reforzó con estudios de comportamiento en buscadores, que muestran que los usuarios concentran su atención en los primeros resultados y abandonan rápidamente si no encuentran información relevante.

Ideación y descartes

Se exploraron distintas alternativas antes de llegar a la solución final:

• Primera propuesta: listados extensos que generaban demasiado scroll → descartada
• Segunda propuesta: landing independiente de resultados → aumentaba fricción y número de clics → descartada
• Tercera propuesta: buscador desplegado en modal → mejor foco, menor fricción y mejor control del contenido

Esta tercera propuesta se convirtió en la base del diseño final.

Diseño UX/UI

Principales decisiones

• Buscador accesible desde el header
• Despliegue en modal para mantener el contexto del usuario
• Resultados limitados para evitar sobrecarga cognitiva
• Uso de categorías para guiar la exploración
• Adaptación específica para mobile, priorizando espacio y legibilidad

El diseño buscó ser claro, liviano y consistente con patrones ya conocidos por los usuarios.

Pruebas de usabilidad

Se realizaron pruebas remotas y presenciales, evaluando:

• Identificación del buscador
• Claridad del despliegue de resultados
• Utilidad de las categorías
• Facilidad de uso general

Resultados destacados

• Alta tasa de éxito en tareas principales
• Buena evaluación de claridad y utilidad de resultados
• Identificación de un problema clave: baja visibilidad del botón de búsqueda en desktop

Las pruebas permitieron validar la propuesta y detectar oportunidades de mejora antes del desarrollo final.

Iteraciones post-test

A partir del feedback se realizaron ajustes clave:

• El buscador dejó de ser solo un ícono y pasó a mostrarse como botón visible
• Se reforzó la jerarquía visual de los resultados
• Se revisó el lenguaje utilizado en títulos y descripciones
• Se optimizó la estructura de categorías

Estas iteraciones mejoraron la comprensión y redujeron los clics erróneos.

Implementación front-end

La implementación se realizó en Vue.js, utilizando componentes de Ant Design e integrándose con un CMS Strapi ya existente.

Arquitectura de datos

Se reutilizó un nodo del CMS que estaba en desuso, adaptándolo estratégicamente:

• Título: texto principal del resultado
• URL: destino del enlace
• Descripción: incluye keywords, sinónimos y errores comunes
• Tags: permiten agrupar resultados en categorías

Funcionalidades clave

• Búsqueda en tiempo real
• Resultados limitados a los primeros 5
• Destacado en negrita del término buscado (a partir de 3 caracteres)
• Agrupación por categorías usando tags
• Ordenamiento manual de resultados según relevancia basada en TNPS

La solución evitó costos externos y permitió un alto control sobre la experiencia.

Impacto real

Para medir el impacto se analizaron comentarios del TNPS relacionados con búsqueda:

• Antes del lanzamiento: 101 comentarios
• 3 meses después: 50 comentarios
• Medición tardía: 19 comentarios

Esto representó una reducción sostenida del principal pain point histórico del sitio.

Además, aunque los reclamos residuales mantienen una evaluación más baja, su volumen disminuyó significativamente, contribuyendo a una mejora general del TNPS.

Stakeholders

El proyecto enfrentó resistencia inicial debido a experiencias pasadas con buscadores de pago y preocupaciones por costos y mantención.
La propuesta de una solución propia, de bajo costo y bajo mantenimiento, permitió destrabar el proyecto.

Tras el lanzamiento, la ausencia de nuevos cuestionamientos por parte de stakeholders se interpretó como una señal clara de estabilidad y éxito de la solución.

Reflexión personal

Qué salió bien

• Integrar una funcionalidad crítica con impacto real en usuarios
• Diseñar con base en datos y validación
• Lograr una solución técnica simple, sostenible y efectiva

Qué fue difícil

• Trabajar con recursos limitados
• Adaptar el diseño a restricciones del CMS
• Defender la iniciativa frente a dudas de negocio

Qué haría distinto

• Diseñar un nodo exclusivo para el buscador
• Ampliar el testeo a usuarios menos sesgados
• Incorporar análisis de comportamiento real dentro del sitio