El banco Santander Río contrató a una agencia para rediseñar su sitio web, con el objetivo de utilizar la web para conseguir más clientes. Se realizó un rediseño del sitio que incluyó definir una nueva estructura de navegación mediante card sorting con usuarios y cliente, crear wireframes y plantillas, y testearlos con usuarios para corregir antes del desarrollo final. El nuevo sitio web de Santander Río se lanzó en 2012.

1. Presentación de caso
Rediseño del sitio público del banco Santander Río. Arquitectura de información,
test de usuarios y desarrollo de plantillas en html.

2. Sobre el proyecto
Santander Rio es uno de los bancos más grandes e importantes de la Argentina. Tienen más
de 2.500.000 de clientes activos y más de 300 sucursales repartidas por todo el territorio.
A finales del 2011, la agencia de publicidad Mundo Buenos Aires nos contactó para que los
ayudáramos a pensar y desarrollar el proyecto de rediseño del banco.
Durante más de un año trabajamos codo a codo con el equipo de la agencia, con el equipo del cliente y junto a otras
empresas especializadas para diseñar desde las bases un nuevo sitio que le permitiese al banco utilizar la web para
conseguir más clientes. Con ese objetivo en mente fuimos dándole forma a un ambicioso proyecto de rediseño lleno de
desafíos técnicos y tecnológicos donde tuvimos el honor de haber sido invitados a participar.

3. El sitio antes del rediseño.
En línea desde mediados del 2007. El sitio tenía muchos problemas de usabilidad relacionados con
la poca jerarquía de contenido a la hora de buscar productos. Además la tecnología que utilizaba
estaba obsoleta y generaba muchos dolores de cabeza a la hora de agregar nuevo contenido o
actualizar los ya existentes.

4. Cómo abordamos este proyecto?:
!
1. Estructura:
Definimos un nuevo árbol de navegación ayudándonos de la técnica de card sorting para definir
en conjunto al cliente y a los usuarios la mejor manera de ordenar el contenido del sitio.

5. !
Cómo abordamos este proyecto?:
!
2. Wireframes:
Prototipamos los templates necesarios para todas las páginas del sitio. Dividimos el trabajo en dos partes.
!
Primera parte: Boceteado: A mano alzada con el cliente. Nos sirve para aunar criterios y nos permite visualizar los
distintos elementos de la interfaz. Son bosquejos sin detalle y que buscan explicar rápidamente una idea para
explorarla o desecharla sin invertir tiempo en detalles.

6. Cómo abordamos este proyecto?:
!
2. Wireframes:
Prototipamos los templates necesarios para todas las páginas del sitio. Dividimos el trabajo en dos partes.
!
2nda parte : Prototipado: Creamos 23 plantillas con distintas características para utilizarse en las distintas páginas del
sitio. Dibujamos y detallamos todas los estados de los distintos módulos que componen el sitio y con ello construimos
un prototipo navegable para correr pruebas de concepto.

7. Cómo abordamos este proyecto?:
!
!
3. Testeo:
Testeamos con usuarios los nuevos mockups para corregir antes de pasar al desarrollo.
Para ello entrevistamos a clientes y no clientes del banco con distintos niveles de destreza tecnológica. Les mostramos
los bocetos y maquetas y les pedimos que completaran una serie de tareas definidas con antelación.
Luego ordenamos los resultados en un documento y corregimos lo que había que corregir.

8. Resultado final

9. Puedes ver el sitio en
www.santanderrio.com.ar