Rediseño de Web de Banco Santander Río

Cómo un equipo de lujo, buenas ideas y mucho testeo resultaron en el éxito del rediseño de un gigante web.

Client: Agencia Mundo Buenos Aires
Date: August 30, 2013
Services: Website redesign, User Experience, Project Management

01. La Situación

Santander Río es uno de los bancos más importantes de Argentina, con más de 2,5 millones de clientes activos y más de 300 sucursales a lo largo de todo el territorio. A fines de 2011, la agencia de publicidad Mundo Buenos Aires me contactó para ayudarlos a pensar y desarrollar el proyecto de rediseño del banco.

El sitio anterior del banco, en línea desde mediados de 2007, presentaba muchos problemas de usabilidad, relacionados con la poca jerarquía de contenidos, generando mucha dificultad a la hora de buscar productos. Asimismo, la tecnología utilizada para mantener la plataforma estaba obsoleta, generando muchos dolores de cabeza al momento de agregar nuevo contenido o actualizar los ya existentes.

¿Cuál fue mi rol en el proyecto?

Arquitectura de Información

Creación de un prototipo de wireframes completamente navegables en Axure, incluyendo todas las pantallas que se utilizaron en el proyecto, para el posterior diseño de interfaces y desarrollo.

Investigación con usuarios

Organicé los test de usuarios y focus groups y luego analicé la data recogida para aplicar los cambios en la interfaz.

Dirección del proyecto

Planifiqué, recruté y lideré el equipo que haría realidad el proyecto desde la investigación inicial hasta la integración con el CMS

02. ¿Cómo fue el proceso?

Benchmark, Mapa y primeros wireframes

Lo primero fue generar un benchmark de competidores locales y extranjeros, para tener una visión global de lo que estaban haciendo los otros bancos en sus sitios.  Analicé más de 50 competidores en América, Europa y Asia y organicé las buenas prácticas observadas en un documento que compartí con el cliente y que sirvió de base para las primeras reuniones de alcances y definiciones.

En paralelo, trabajé en el inventario de todas las pantallas del sitio antiguo, para conocer en su generalidad la navegación del sitio, y luego proponer una nueva, más ordenada y con una jerarquía más clara.

Con el nuevo árbol de navegación aprobado, organicé las más de 450 páginas que requería el nuevo sitio en 22 plantillas que tendríamos que diseñar, maquetar e integrar con la plataforma IBM WebSphere Portal.

Arquitectura de Información y contenidos.
Siguiendo con la planificación del proyecto, en este punto tocaba crear los wireframes de las 22 plantillas definidas, documentando en detalle todos los elementos de contenido que podrían ser actualizables desde el administrador (Títulos, párrafos, listas, imágenes, etc). Esta documentación fue vital para permitir a  los desarrolladores comenzar a construir el backend de la aplicación y para que, por su parte, la agencia de contenidos también pudiera trabajar en los textos necesarios sin tener que esperar a que se construyera el sitio. De esta forma pudimos ir probando y mejorando contenidos al mismo tiempo que se desarrollaba el back.

Detalle de los wireframes que creé para el proyecto

Diseño de Interfaz
Una vez que tuvimos los primeros wireframes aprobados comenzamos con el proceso de diseñar una nueva interfaz para el banco. En esta parte del desarrollo, el proceso se fue tornando más lento y algo difícil, a medida que comenzábamos, sin querer, a alejarnos de las expectativas y exigencias de nuestro cliente en términos de diseño. Una tras otra nuestras propuestas eran rechazadas por el banco y la moral de nuestro equipo empezaba a gastarse, así como la relación con el cliente. Ante la crisis, decidimos tomar un paso en una nueva dirección y sumar a una agencia local llamada Ego quienes hicieron un trabajo de lujo interpretando los wireframes que les entregamos.

Con este nuevo aire y las maquetas listas, comenzamos el proceso de testeo con usuarios para validar que nuestros esfuerzos, diseño y desarrollo fueran por buen camino.

Algunas de las (sin exagerar) 50 versiones de diseño que hicimos del home del banco
Diseño final de la Agencia Ego para el proyecto de Santander Rio

Focus Groups y Test de Usuarios

Para validar que nuestro trabajo estuviera bien resuelto, una vez diseñadas las principales pantallas organizamos dos actividades para recolectar feedback entre los clientes del banco.

La primera fue una serie de focus groups destinados a conocer impresiones y expectativas de clientes y no clientes sobre el rediseño del banco. Además les mostramos los nuevos diseños y recolectamos el feedback al respecto.

Como segunda actividad en la investigación para la validación de nuestras nuevas interfaces, realizamos  sesiones de testeo con usuarios destinadas a evaluar la usabilidad y concreción de acciones y expectativas por parte de los clientes del banco. Para ello creamos un prototipo navegable con los principales flujos de las acciones que queríamos testear, como abrir una cuenta, buscar sucursales cercanas, simular un crédito, entre otras; y pedimos a 10 clientes que intentaran realizar estas tareas, para observar si les era posible hacerlas y qué tan difícil o natural les resultaba el proceso. Luego de eso, organizamos todos los descubrimientos y mejoras en un documento que socializamos con nuestro cliente y con el cual actualizamos las gráficas de acuerdo a lo que sacamos en limpio de las actividades.

Con esta corrección y mejora de las vistas, ya estábamos listos para construir el front-end de la maqueta.

Detalle de la presentación de resultados de los focus groups y test de usuarios que hicimos para Santander

Construcción, integración con WebSphere Portal y poblamiento de contenidos.

Una vez testeadas y corregidas las plantillas de diseño, los capos de Deletec comenzaron a construir el front-end de las plantillas que serían integradas en WebSphere Portal. Fueron varios meses de trabajo intenso en los que nos vimos enfrentados a diversos desafíos tecnológicos y de seguridad de los datos, considerando que el cliente para el que desarrollábamos es un banco, por lo que fue un gran camino de aprendizaje.

Mientras se integraban las plantillas y para aprovechar los tiempos que nos tomaría salir a producción, decidimos comenzar a poblar el sitio, mediante el panel de administración con los contenidos creados por la Agencia Soup Interactive. Un proceso sin duda muy desafiante y de gran escala, considerando lo complejo de la plataforma utilizada y las más de 400  páginas esperando ser pobladas.

Una vez terminado el proceso de carga de contenidos, el proyecto pasó a manos de los equipos internos del banco quienes hicieron todas las pruebas necesarias hasta el lanzamiento del sitio.

La nueva web de Santander Río ha sido sin duda el proyecto más grande que me ha tocado enfrentar en mi carrera. Lo que partió como apoyo al equipo de la agencia en Ux y Arquitectura de Información terminó conmigo viviendo en Buenos Aires, para hacerme cargo de la dirección del proyecto completo y a crear una red de proveedores y freelancers que nos ayudaran a llevar a cabo este rediseño, que finalmente resultó exitoso. 

03. Ficha Técnica

En los casi dos años que estuve ligado a este proyecto, conocí a profesionales increíbles que fueron fundamentales para llevar a cabo este rediseño. No podría cerrar el resumen de este caso sin agradecer a:

  • Gonzalo Vidal, Socio de Mundo Buenos Aires.
  • Santi Risco, Socio de Deletec y desarrollador principal del proyecto.
  • Iair Rozen, mi contraparte tecnológica en este desafío.
  • Agustín y Ricardo, socios de Ego, quienes en 2 semanas hicieron y aprobaron los diseños que nosotros como equipo no conseguimos que nos aprobaran en 6 meses.
  • Román y Marina Taliberto, de Soup.
  • Roberto Vaucourbeil, a cargo de la investigación con usuarios y de apañarme innumerables veces con su experiencia y profesionalismo.
  • Marcelo, Meche y María por la paciencia que tuvieron al subir el contenido, campo por campo de las más de 400 páginas que contemplaba el sitio.
  • Alejandro Toso que tomó la batuta en el último sprint del proyecto.
¿Tienes un proyecto similar? Contáctame!