QUALITY WATCH - Soluciones de Mystery Shopping y Experiencia del Cliente

#QUALITY WATCH, una web para vender investigación de calidad de servicio

Quien pide presupuesto a Quality Watch casi nunca es quien firma. Normalmente es una responsable de calidad o un director de red comercial que está reuniendo material para convencer a un comité. Esa observación condicionó el proyecto más que cualquier decisión estética, así que conviene empezar por ahí y no por la lista de tecnologías.

Quality Watch es una agencia de investigación con sede en Varsovia cuya actividad registrada es la investigación de mercados y de opinión pública. La parte más reconocible de su oferta es el Mystery Shopping, junto con estudios de satisfacción y pruebas de conocimiento para personal de venta y atención. El sitio se construyó en 2017 y llevó alrededor de seis semanas, sobre WordPress con tema propio.

#Seis nombres comerciales y un solo mecanismo

Puestos uno al lado del otro, los nombres revelan el problema. Mystery Shopper, Mystery Client, Mystery Caller y Mystery E-mail describen el mismo mecanismo de investigación aplicado a cuatro canales de contacto distintos. El mapeo de customer journey y las auditorías de calidad son otra cosa: otro presupuesto, otro interlocutor, otro calendario. Una página que mete los seis en una lista de viñetas deja al lector con la impresión de una empresa que hace muchas cosas y ninguna en concreto.

El reto consistía en explicar servicios consultivos bastante complejos sin perder claridad comercial. Este tipo de empresa necesita una web que ordene bien su propuesta, porque trabaja con conceptos que a menudo se solapan. Por eso preparé una estructura donde cada área de servicio pudiera entenderse rápidamente y, a la vez, reforzara el posicionamiento experto de la marca.

#El texto tiene que sobrevivir a un copiar y pegar

Si el lector va a llevarse el contenido a una presentación interna, eso cambia los requisitos técnicos. El texto debe aguantar salir del navegador y entrar en una diapositiva: qué es el método, cómo se seleccionan los auditores, qué contiene el informe, cómo es el guion de una visita.

De ahí la primera consecuencia. Cada método recibió una dirección estable, su propio encabezado principal y sus propios datos estructurados, porque ese enlace va a vivir años en el correo de otras personas. Mandar un enlace y después explicar en qué pestaña hay que hacer clic es un fallo de arquitectura de la información, no del destinatario.

La segunda consecuencia tiene que ver con la longitud. El material consultivo de este tipo es largo por naturaleza, porque el cliente quiere saber en qué se diferencia una visita a un concesionario de una llamada al centro de atención. Al mismo tiempo, la misma página tiene que poder ojearse en dos minutos por alguien que solo está armando una lista de proveedores. La solución no es recortar, es estratificar: un resumen corto arriba y el detalle accesible sin recargar la página.

#El modelo de contenidos y lo que cuesta

Estratificar suena a diseño y en realidad es un problema de modelado de datos. La versión evidente, una página larga con acordeones, aguanta hasta que la agencia empieza a vender el mismo método en varios sectores. Entonces la descripción para retail y la de automoción se diferencian en tres párrafos de veinte, y mantenidas por separado crean tres sitios donde una corrección hay que hacerla tres veces.

Por eso el modelo separa método y aplicación. El método es un registro y describe el mecanismo: quién observa, con qué papel, qué se anota y en qué forma vuelve el resultado. La aplicación es otro registro y describe el contexto sectorial. La plantilla une ambos en el momento de mostrar la página. El coste es real y conviene decirlo: la persona que edita tiene que entender la separación antes de escribir algo nuevo, y un caso atípico se publica más despacio que pegando un párrafo terminado. El beneficio aparece hacia la decimoquinta variante, más o menos al año.

Los casos de éxito exigieron más conversación que código. Una agencia de investigación trabaja con datos que normalmente no puede atribuir. Por eso el registro trata la versión anónima como estado normal y no como excepción: sector y tamaño de red son campos propios, la marca es opcional. Cuando el campo de marca está vacío, la plantilla no deja un hueco donde debería ir un logotipo, monta la tarjeta de otra manera. Parece un detalle hasta que medio listado de referencias tiene ese campo vacío.

Ese mismo principio se aplica a las cifras. Donde no se puede nombrar la fuente, tampoco se puede comprobar el resultado, y entonces no corresponde presentarlo como afirmación. La estructura permite describir el alcance de un encargo, es decir qué se investigó y cómo, sin atribuirse un desenlace que el lector no tiene manera de verificar.

#AJAX y REST API en una web de presentación

En 2017 esto no era una decisión obvia para una web comercial, y no la recomendaría por defecto. Aquí salió de la forma de la oferta. Como los servicios se solapan, nadie los lee en orden. Alguien abre Mystery Shopping, vuelve, mira Mystery Caller, compara el alcance del informe, vuelve otra vez. Con recargas clásicas, cada uno de esos pasos cuesta un ciclo completo: nueva petición, plantilla renderizada entera, los mismos recursos descargados de nuevo.

Filtrar el listado mediante endpoints REST significa que el navegador pide solo lo que todavía no tiene. El coste de esa decisión tiene dos partes y ninguna se puede esconder. Cada estado del filtro necesita su propia dirección, porque si no, el visitante no puede enviar a un compañero lo que está viendo y el buscador no indexa nada más que la vista por defecto. Y la capa de datos tiene que funcionar sin JavaScript, porque las webs consultivas se abren dentro de entornos corporativos con políticas de navegador restrictivas. La vista base se renderiza en el servidor y la ruta asíncrona solo acorta el camino donde está disponible.

Los endpoints sirvieron además para algo menos visible. Las opiniones de clientes y los resultados publicados cambian más a menudo que la oferta y pasan por otro circuito de aprobación interna. Sacarlos a un recurso propio significó que actualizarlos ya no toca las plantillas de las páginas de servicio ni invalida su caché.

#Rendimiento medido contra una copia de producción

El cuello de botella del proyecto fue el comportamiento bajo tráfico real y la invalidación de caché, no el tiempo de carga de la portada. La diferencia importa. Una instalación limpia de WordPress con el mismo tema responde rápido porque no hay nada que calcular: base pequeña, relaciones planas, un listado de servicios que cabe en una consulta. El mismo código sobre una copia de producción, con el catálogo completo de métodos, aplicaciones, casos y taxonomías, se comporta de otro modo, porque montar una lista filtrada toca varias tablas a la vez.

Por eso las rutas por las que pasa el tráfico se probaron sobre una copia de producción y no sobre un entorno vacío. Es una regla que cuesta unas horas de preparación y ahorra una semana de sorpresa después del lanzamiento. Una copia de producción enseña cosas que una instalación vacía no puede enseñar: una consulta invisible con tres registros que con doscientos es la operación más cara de la página, o una caché que técnicamente funciona pero se invalida al guardar cualquier contenido, de modo que en la práctica no existe.

La tensión arquitectónica está exactamente entre caché y frescura. Las páginas de oferta pueden cachearse mucho porque cambian poco. El bloque de novedades y opiniones cambia a menudo y quien edita espera ver su cambio al momento. La solución fue separar ambas cosas: el esqueleto y las páginas de servicio se cachean largo, mientras los fragmentos volátiles llegan en una petición propia, con vida corta e invalidación por registro al guardar, no global.

#Formularios y lo que pasa después del clic

Este sitio recoge solicitudes de presupuesto, no pedidos, y eso se nota en el código. Un encargo de Mystery Shopping no se puede tarificar con tres campos, porque depende del número de ubicaciones, de las visitas por ciclo, de los canales incluidos y de si el cliente quiere un informe agregado o un desglose por punto de venta. Un formulario que lo pregunta todo de golpe espanta. Un formulario que no pregunta nada genera consultas que solo pueden responderse con otra pregunta.

El compromiso separa primer contacto de cualificación. Los campos obligatorios son pocos y las extensiones aparecen solo cuando la persona indica que ya sabe lo que busca. Técnicamente eso implica validación en el servidor y no únicamente en el navegador, porque la validación en cliente es comodidad y no control. También implica una protección antispam que no dependa de transcribir caracteres de una imagen, ya que aquí cada paso extra en el camino cuesta una consulta.

Cabe una decisión más, que parece trivial y no lo es: el límite de longitud del campo de mensaje está lo bastante alto como para no cortar una consulta real. Un límite corto trunca el mensaje a mitad de frase y quien escribe no se entera nunca, porque solo ve la pantalla de confirmación. Ese fallo no aparece en ningún registro ni en ninguna prueba, solo en una conversación que no llegó a producirse.

#El diseño lo puso el cliente

La disposición de los elementos y la capa visual venían del cliente. Nuestra parte fue traducir eso a plantillas, comportamiento responsivo y un modelo de contenidos que se pueda mantener después del lanzamiento. La estética no estuvo en discusión, el orden de la información sí.

El sitio es responsivo por una razón concreta: buena parte del tráfico es alguien que recibió el enlace por correo y lo abre en el móvil entre dos reuniones. En una pantalla pequeña el orden de las secciones deja de ser cuestión de gusto, porque el visitante ve dos pantallas y o entiende qué hace esta empresa o vuelve a la bandeja de entrada. HTML5, CSS3 con SASS y JavaScript dan un diseño limpio y un comportamiento estable, pero no deciden por nadie qué va arriba.

Las tablas comparativas merecieron atención propia. La comparación de métodos es el contenido principal de este sitio, y una tabla cuyos encabezados no están asociados a las celdas es, para un lector de pantalla, una sucesión de palabras sin estructura. Esa asociación es barata al construir la plantilla y cara de añadir después, así que entró desde el principio.

#Lo que no funcionó al primer intento

Una descripción de proyecto sin este apartado es un folleto. La primera versión del filtro de servicios guardaba la selección en la dirección, pero no la posición de desplazamiento. Quien abría un método y volvía con el botón atrás aterrizaba al principio del listado y tenía que buscar de nuevo dónde estaba. Con seis entradas no lo nota nadie. Con un listado que creció a varias decenas al añadir las variantes sectoriales, esa es exactamente la razón por la que alguien deja de mirar.

La segunda corrección fue de imágenes. Las fotografías de referencia se subieron en la resolución en que llegaron del cliente, bastante mayor que cualquier vista del sitio. Las variantes de tamaño se generan solas, pero solo para los archivos subidos después de dejar la configuración en su sitio, así que el material migrado del sitio anterior se quedó con los originales. Detectarlo exigió mirar el peso de transferencia de una subpágina concreta y no una medición de la portada, que resultaba ligera.

El tercer punto no fue un defecto sino un compromiso, y lo sigo considerando correcto. Descartamos personalizar el contenido según el sector del visitante. Era viable y sonaba atractivo, pero habría exigido distinguir visitantes en un nivel donde la caché pierde sentido, y el beneficio solo se vería con un tráfico de otro orden de magnitud. El sector es, en cambio, una elección que el visitante hace a conciencia, en un clic, y esa elección viaja dentro del enlace.

#Qué se consiguió

El sitio separa la oferta y el caso, para que ventas envíe el enlace del caso sin rehacer el PDF. Esa separación es lo que se construyó.

Queda una presentación clara de los servicios ligados a calidad y experiencia de cliente, un WordPress fácil de ampliar con nuevas secciones de oferta y una base útil para el trabajo de posicionamiento B2B. Lo que se transfiere a otro proyecto es la capa técnica, que se parece bastante cada vez. Lo que no se transfiere es el modelo de contenidos ni las integraciones, porque nacieron para los datos de un cliente y un encargo concreto: el siguiente proyecto empieza por un análisis de alcance y el presupuesto viene después, no antes.

Cliente: Quality Watch
Alcance: Desarrollo web, layout

Más sobre la empresa: qualitywatch.pl