Financial Web Design Case Study

Diseño Web para Bancos
WEB DESIGN FOR FINANCIAL INSTITUTIONS

por: Elsa Canto W.

Universidad del Itsmo - Panamá
Feb, 21 2008

Indice

5 Fases de un Proyecto Web
Eso que llaman “Usabilidad”...
Caso de Estudio: Banco Continental


5 Fases de un Proyecto WEB
1- Deﬁnir el Proyecto
2- Desarrollar la Estructura del Sitio
3- Diseñar la Interfase Visual
4- Programar e Integrar
5- Publicar y Mantener


Fase1- Definir el Proyecto
Recolectar información
Entrevistas al Cliente, recolectar material existente para el proyecto, ¿existe algún plan de mercadeo para el website una vez que se
publique?

Comprender e Identificar la audiencia
¿Quiénes son los visitantes del sitio?, ¿Porqué entran a este sitio?, ¿Qué tareas realizarán?

Requerimientos de funcionalidad
Según tipo de audiencia y requerimientos del Cliente. Ejemplo: En cuanto a diseño, que sea liviano, que los productos se puedan
visualizar fácilmente apenás se acceda al website, que no use tantos colores o demasiados banners, que el acceso al e-Banking esté en un
lugar prominente en el homepage.

Analizar la industria
Identificar la competencia, ver que están haciendo los otros Bancos, buscar información acerca de buenas prácticas en cuánto a diseño de
websites Bancarios

Crear un Plan del Proyecto (cronograma, ver presupuestos)

Fase 2- Estructura del Sitio
Diagramación del Sitio
Vista de Contenido
Localizar y organizar el contenido del website, inventarios de contenido, ¿Cuántas secciones?. Es importante designar a una persona
por parte de cliente para que se encarge de esta tarea. Dentro del cronograma incluir un “Content delivery Plan”.

Vista Mapa del Sitio (Sitemap)
¿Cómo va a estar organizado el website?. ¿Cuáles serán las secciones principales?, ¿sub-secciones?
Convensión para los títulos de las secciones “Naming Convensions”. Ejm: “Banca de Consumo” o “Banca Personal” ? Banca
Corporativa? o Para Empresas? Consolido o Resumen de Cuentas?

Crear un “wireframe”
Es como un modelo de diseño del website, sin colores, solo estructura o diagramación.

Ejemplo de un “Sitemap”
BANCO CONTINENTAL
Home-Page

PARA PERSONAS PARA EMPRESAS PARA INVERSIONISTAS CONÓZCANOS

Banca Personal Banca Comercial Banca de Inversión Acerca del Banco

Cuentas de Depósitos Cuentas de Depósitos Productos y Servicios Conózcanos
 Cuentas de Ahorro Personal  Cuentas de Ahorro Comercial
 Cuentas Corrientes  Cuentas Corrientes Comercial  Cuenta de Inversión Local  Historia del Banco
 Plazo Fijo  Plazo Fijo Comercial  Cuenta de Inversión Intl.  Misión y Visión
 Junta Directiva
Tarjetas Crédito Comercial Acerca de Wallstreet  Estados Financieros
 Tarjetas Clave  Préstamos  Bancos Corresponsales
 Líneas de Crédito  Historia  Sucursales y Cajeros
Banca en Línea  Cartas de Crédito  Misión / Visión
 Características y Ventajas  Estados Financieros
 ¿Cómo me afilio? Otros Servicios  Ubicación
 Preguntas Frecuentes  Planilla Automática  Tarifas
 Contáctenos
Banca de Inversión

Ejemplo de un “Wireframe”

Ejemplo de un “Wireframe” de página interior

Fase 3- Diseño Interface Visual
Revisar Objetivos del Site
Revisar los requerimientos y especiﬁcaciones técnicas. Diseñar hacia la audiencia.

Desarrollar Conceptos
Experimentar con colores y “layouts”, dibujar formas en papel “sketches”. Es también importante en esta etapa consultar con los
programadores del website para ver la factibilidad al programar este diseño. Esto debe hacerse antes de presentar el diseño al cliente.

Presentación del Diseño al cliente, recolección de “feedback”
Es importante ir preparados a la hora de realizar esta presentación, llevar los objetivos y requerimientos del proyecto. De esta etapa
siempre van a salir cambios posteriores y mejoras, hazta que se llegué al diseño “ideal”. Muy importante guiar al cliente en cuanto a
cuáles son las mejores prácticas y siempre poder justiﬁcar el diseño.

Fase 3- Diseño Interface Visual
Algunos Websites de Bancos

Eso que llaman “Usabilidad”...
¿Cuántas veces ha visitado un website para encontrar información o para
realizar una simple tarea y ha salido totalmente frustado, porque nunca
encontró lo que quería? Esto puede ser el resultado de un pobre diseño de
website y falta de “usabilidad”.
“Usabilidad” (en inglés, usability) no es más que la "capacidad de una web, o un producto cualquiera,
de ser usado fácilmente". Aunque la usability es parte de la experiencia interactiva de una página web:
en muchas ocasiones una página web puede conseguir una experiencia positiva y funcional sin ser muy
sencilla, pero la facilidad y comodidad es lo más demandado por el usuario hoy en día.

Los buenos websites de Banca en Línea combinan ambos aspectos de
diseño y funcionalidad para hacer que el sitio sea tanto estéticamente
placentero como “usable”.

Versión 2000-2001 Efectividad y funcionalidad del website
Las primeras versiones del website público cumplieron su
finalidad; mostrar información referente a sus productos y
Orientado a productos, publicidad
servicios, de manera que el website fuera otro canal para la Home Page o página inicial
de todas las bancas y noticias
publicidad.
Mala deficinión mapa del sitio,
Navegación
menú no permitía crecer

Diseño gráfico pobre, falta
Diseño y diagramación
estructuración

Contenido Textos muy extensos

Confusos, no estaban bien
Enlaces
definidos

Políticas de uso / términos y
No estaban presentes
condiciones

Estaban presentes, no muy a la
Formularios
vista, eran extensos

Algunas Calculadoras, aunque no
Herramientas financieras
muy a la vista

Versión 2002 - 2003 Efectividad y funcionalidad del website

Orientado al cliente, definen áreas y
tamaños para banners, enlaces y
A finales del año 2002, esta vez enfocándose en un concepto Home Page o página inicial accesos más directos. Servicio al
más orientado al diseño gráfico y al espacio para la Cliente y Banca en Línea se mantenía a
través de todo el website
publicidad, rediseñan su website. Además incorporan 4 secciones para sus productos y
algunas herramientas financieras de utilidad para los Navegación
servicios, orientación al cliente, se
incorpó el estilo de “fly-out menus”, para
visitantes. El diseño en cuanto a “look & feel” era muy bueno, agrupar más secciones
se mejoró la diagramación y el website estaba más enfocado Mejoras al diseño gráfico, se utilizan los
al cliente. colores del nuevo logo del banco.
Diseño y diagramación Noticias a mano derecha y más
prominencia a la publicidad mediante
banners
Mejoras en la redacción de los textos de
Contenido
productos y servicios
Mejoras, herramientas de utilidad a
Enlaces mano derecha,
se muestran con íconos llamativos
Políticas de uso / términos y
Estaban presentes al final de la página
condiciones
Estaban presentes, mejoras para
hacerlos más cortos (como una pre-
Formularios aplicación), los enlaces hacia estos
formularios estaban presentes como
íconos en las páginas de los productos
Más exposición a las herramientas
financieras como las Calculadoras y
tasas para depósitos. Nuevas
Herramientas financieras herramientas cómo una suscripción a
Noticias del Banco,Calendario de
Eventos, Acceso a Servicio al Cliente y
un Asistente en Línea (Chat)

Versión 2004 - 2005
A finales del 2004, realizamos una extensiva evaluación del website (versión 2002-2003), a través de “focus
groups” para obtener retroalimentación por parte de los clientes y guiándonos por las mejores prácticas de
diseño y funcionabilidad en cuanto a Websites Financieros.

Pero, ¿porqué cambiar nuevamente el diseño?. Podemos mencionar algunos
de los inconvenientes que tuvimos con la versión 2002-2003.

• Como el “Home Page” del website estaba muy orientado a la publicidad, llegó el momento en que habían
muchas promociones y no podíamos recargar el “Home Page” de banners

• Los enlaces a productos y servicios de cada área desde el menú estilo “fly-out”, hacían que el cliente
tuviera que “pensar y buscar” donde encontrar tal producto o servicio, ya que los mismos no estaban
expuestos de manera simple.

• El acceso a la banca en línea y a productos de banca electrónica, a primera vista no se encontraban.

• Existían también muchos accesos a formularios de contáctenos dirigidos vía e-mail a distintas áreas de
negocios, lo que hacía difícil el seguimiento de los mismos por parte de Servicio al Cliente.

• Se contaba con una herramienta de utilidad como es el Asistente en línea (Chat), la cual no tenía la mejor
exposición en el website, había clientes que ni siquiera sabían que existía.


Totalmente orientado al cliente, se
definen áreas y tamaños para
banners, enlaces de manera más
organizada y accesos más directos.
Enlaces a Servicio al Cliente se
Home Page o página inicial
representan mediante pequeños
banners llamativos.
El acceso directo a la Banca en Línea
es lo más prominente e incluso se
define una sección para esta.

El website se dividió en 4 secciones, 3
que representaban las áreas de
negocio y 1 con información del
banco, cada área de negocio tiene su
propio portal o sección en donde se
Navegación
ubicaron sus productos, servicios y
banners, se reemplazo el estilo de
“fly-out menus” por uno más simple:
ENLACES directos al producto o
servicio.

Mejoras al diseño gráfico,
colores del nuevo logo. Las noticias
a mano derecha y se reorganizo la
exposición de la publicidad utilizando:
1 banner grande al centro para
Diseño y diagramación mostrar la publicidad más importante
del momento (se pueden mostrar
varias a la vez), banners más
pequeños para promocionar servicios
u otros productos. Servicios de Banca
Electrónica ubicados a la derecha.


Mejorado, los textos acerca de los
productos y servicios se hicieron más
Contenido
concisos y se definió un formato de
presentación para los mismos

Los íconos llamativos son
reemplazados por pequeños banners,
los enlaces a servicios y productos se
Enlaces clasifican y agrupan, esta todo más a
la vista. Links principales en la parte
superior derecha y se incorpora un
buscador.

Políticas de uso / términos y Siguen presentes al final de la página,
condiciones en color de link más llamativo

Siguen presentes, se mantienen como
una pre-aplicación pero ahora su
recepción se centraliza en el Call
Center, los demás formularios para
Formularios de solicitud
Contactar al Banco se eliminan y se
deja un solo formulario de
Contáctenos que recibirá Servicio al
Cliente.
Las herramientas financieras como las
Calculadoras y tasas para depósitos
se pasan a mano derecha dentro de
un pequeño “Select” que contiene
otros servicios, tambien se incluye un
Herramientas financieras acceso en sus respectivas secciones.
Mayor exposición al Acceso a Servicio
al Cliente y promoción del Asistente
en Línea (Chat) desde el cual se
capturan nuevos perfiles de clientes y
se da soporte a la Banca en Línea.

Financial Web Design Case Study

Más contenido relacionado

Similar a Financial Web Design Case Study (20)

Último (20)

Financial Web Design Case Study