Caso 01 · Trabajo Fin de Máster
Rediseño de una web B2B con área privada de clientes
Investigación, arquitectura de la información, prototipo y test para que clientes y empleados puedan pedir, consultar y hacer seguimiento sin llamadas ni correos.
Marzo de 2022 · Proyecto individual · Figma, OptimalSort y Excel. Por confidencialidad no menciono el nombre de la empresa ni muestro su marca.
5
webs del sector analizadas en el benchmarking
1 de 9
sabría hacer un pedido con la web original
20
tarjetas ordenadas por 10 participantes en el card sorting
5
personas probaron el prototipo en 3 tareas
01 · Contexto
Una web que solo servía para llamar
Una empresa B2B de servicios con varias delegaciones en España tenía una web anticuada que solo servía para consultar un teléfono o un correo. Para pedir un presupuesto, hacer un pedido o saber cómo iba, los clientes tenían que llamar, escribir o presentarse en persona.
Además, algunas delegaciones tenían webs propias con nombres distintos, la información sobre los servicios era ambigua y no había distinción entre clientes y empleados, que usaban la misma web como punto de consulta.
Objetivo
Que clientes y empleados puedan hacer pedidos, solicitar ofertas y consultar su estado sin llamadas ni correos, distinguiendo entre delegaciones y tipos de usuario.
02 · Research
Escuchar antes de diseñar
Investigación contextual
Durante unos 3 meses observé y entrevisté a empleados de gestión de pedidos, comercial y oficina técnica, y a clientes de distintos tipos (grandes empresas, pequeñas empresas y particulares), en persona, online y por teléfono. Lo organicé en un diagrama de afinidad.
Hallazgo: empleados y clientes se hacen las mismas preguntas, sobre todo por el estado de los pedidos y las incidencias, información que no se podía consultar online.
Benchmarking
Analicé 5 webs del sector, incluida la propia. Solo una ofrecía pedidos online correctamente, con muchos requisitos y sin funciones posteriores al pedido. El área privada del resto no se pudo analizar.
Evaluación heurística
Evalué la web actual con 11 principios heurísticos basados en Nielsen. Detecté que no había migas de pan, que los errores no daban sugerencias (y salían en otro idioma) y que faltaban ayuda y preguntas frecuentes.
Encuesta online
Con 9 respuestas, todas las personas encuestadas hacían pedidos online de forma ocasional y querían seguir su estado. Al probar la web actual, solo 1 de 9 sabría hacer un pedido o pedir una oferta con lo que ve, y 6 de 9 sabrían cómo contactar.
Card sorting abierto
Con OptimalSort vi que nadie creaba más de 4 grupos y que preferían nombres genéricos y sin tecnicismos. Así definí 5 grupos para la nueva estructura:
Materiales · Servicios · Acceso a usuario · Ayuda · Sobre nosotros
Además elaboré un inventario de contenidos en Excel y definí 5 buyer personas (3 clientes y 2 empleados) para guiar las decisiones.
03 · Diseño
De los datos a la estructura
Arquitectura de la información
Definí un mapa del sitio con Home, Materiales, Servicios, Empresa, Ayuda y un acceso a área interna diferenciado entre cliente y empleado. La home pide la ubicación para dirigir al usuario a su delegación y le ofrece pedir o solicitar una oferta directamente.
Bocetos, wireframes y sistema de diseño
Hice bocetos y wireframes anotados en Figma para cada pantalla clave y definí una paleta corporativa y semántica (aviso, error, éxito), las tipografías (Oswald para títulos y botones, Merriweather Light para el texto) y los estilos de botones y tablas.
04 · Solución
El prototipo final
Un prototipo interactivo de alta fidelidad en Figma con solicitud de pedido en 5 pasos (con confirmación y plazo estimado), ayuda con preguntas frecuentes y guías descargables, formulario de contacto por departamento y delegación, y un área privada para el cliente con historial de pedidos y gestión de piezas.
05 · Test con usuarios
Qué encontré al probarlo
Probé el prototipo con 5 personas con perfiles representativos de los usuarios, con 3 tareas de un máximo de 15 minutos cada una: solicitar un pedido, hacer una consulta al departamento de administración y consultar el estado de los pedidos para anular uno.
01
El campo de código de pieza confundía a los clientes nuevos.
02
En «Mis pedidos» se confundían las zonas informativas con botones.
03
En el formulario de contacto, algunas personas creían que el correo o teléfono pedido era el de la empresa y no el suyo.
04
Al pedir, iban antes a la solicitud por correo que a «continuar sin registro».
05
Los horarios y la delegación correspondiente pasaban desapercibidos.
06
Para ver el estado de un pedido, algunas personas iban a Servicios en lugar de al perfil.
07. En algún caso no se completó la tarea de anular un pedido, y los tiempos fueron mayores en personas menos familiarizadas con la tecnología.
Para la siguiente iteración: adaptar las solicitudes de oferta y de pedido a los usuarios reales, mostrar el estado de los pedidos de un vistazo, detallar el flujo para personas sin cuenta y hacer más visible el apartado de horarios por delegación.
06 · Cierre
Resultados y aprendizajes
Este trabajo es la primera iteración de un proceso cíclico. Los resultados del test quedan como hipótesis para validar en nuevas rondas, por eso no incluyo métricas de impacto.
Lo que me llevo: investigar en el entorno real permite detectar necesidades que los usuarios no verbalizan porque las dan por normales, y el proyecto abre un campo amplio por explorar en los pedidos online para servicios B2B.
Siguientes pasos definidos
Detallar las áreas de cliente y empleado, incorporar pagos online, vincular los datos existentes con las cuentas de usuario y pasar a desarrollo.
Mi aportación
Proyecto individual: realicé toda la investigación, el diseño y la evaluación, aprovechando el acceso directo a empleados y clientes.
Siguiente caso