SlideShare una empresa de Scribd logo
1 de 9
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.
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.
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.
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.
! 
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.
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.
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.
Resultado final
Puedes ver el sitio en 
www.santanderrio.com.ar

Más contenido relacionado

Similar a Arquitectura de información. Banco santander rio

Ajustes cotización diego solórzano
Ajustes cotización diego solórzanoAjustes cotización diego solórzano
Ajustes cotización diego solórzano
chabacano2
 
El proceso de un diseño web norma
El proceso de un diseño web normaEl proceso de un diseño web norma
El proceso de un diseño web norma
marquezfajardo
 

Similar a Arquitectura de información. Banco santander rio (20)

Seminario herramientas 2.0 para emprendedores y profesionales
Seminario herramientas 2.0 para emprendedores y profesionalesSeminario herramientas 2.0 para emprendedores y profesionales
Seminario herramientas 2.0 para emprendedores y profesionales
 
Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
 
Examen Diseño de página de Banco
Examen Diseño de página de BancoExamen Diseño de página de Banco
Examen Diseño de página de Banco
 
Tema 6
Tema 6Tema 6
Tema 6
 
WEB CONSULTA
WEB CONSULTAWEB CONSULTA
WEB CONSULTA
 
Proceso de un proyecto web
Proceso de un proyecto webProceso de un proyecto web
Proceso de un proyecto web
 
Fase1 g301122 81
Fase1 g301122 81Fase1 g301122 81
Fase1 g301122 81
 
Ajustes cotización diego solórzano
Ajustes cotización diego solórzanoAjustes cotización diego solórzano
Ajustes cotización diego solórzano
 
Metodologia Desarrollo Web
Metodologia Desarrollo WebMetodologia Desarrollo Web
Metodologia Desarrollo Web
 
Metodologia Desarrollo Web Efectivo
Metodologia Desarrollo Web EfectivoMetodologia Desarrollo Web Efectivo
Metodologia Desarrollo Web Efectivo
 
P royecto
P royectoP royecto
P royecto
 
Proyecto
ProyectoProyecto
Proyecto
 
Presentacion Capaintermedia
Presentacion CapaintermediaPresentacion Capaintermedia
Presentacion Capaintermedia
 
¿Cómo se hace en digital? | How It's Made... Digitally!
¿Cómo se hace en digital? | How It's Made... Digitally!¿Cómo se hace en digital? | How It's Made... Digitally!
¿Cómo se hace en digital? | How It's Made... Digitally!
 
Comunicación Interactiva. Actividad 12 Proyecto web. Fernando Pérez.
Comunicación Interactiva. Actividad 12 Proyecto web. Fernando Pérez.Comunicación Interactiva. Actividad 12 Proyecto web. Fernando Pérez.
Comunicación Interactiva. Actividad 12 Proyecto web. Fernando Pérez.
 
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
 
Tuatara Agencia Boutique | Portafolio 2020 Software y Tecnología
Tuatara Agencia Boutique | Portafolio 2020 Software y Tecnología Tuatara Agencia Boutique | Portafolio 2020 Software y Tecnología
Tuatara Agencia Boutique | Portafolio 2020 Software y Tecnología
 
Web corporativa
Web corporativaWeb corporativa
Web corporativa
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
El proceso de un diseño web norma
El proceso de un diseño web normaEl proceso de un diseño web norma
El proceso de un diseño web norma
 

Último

Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
meloamerica93
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 

Último (20)

Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 

Arquitectura de información. Banco santander rio

  • 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.
  • 9. Puedes ver el sitio en www.santanderrio.com.ar