Diseño Web para BancosWEB 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

WEB DESIGN FOR FINANCIAL INSTITUTIONS

5 Fases de un Proyecto WEB1- Definir el Proyecto

2- Desarrollar la Estructura del Sitio

3- Diseñar la Interfase Visual

4- Programar e Integrar

5- Publicar y Mantener

WEB DESIGN FOR FINANCIAL INSTITUTIONS

Fase1- Definir el ProyectoRecolectar 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 funcionalidadSegú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 industriaIdentificar 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)WEB DESIGN FOR FINANCIAL INSTITUTIONS

Fase 2- Estructura 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.

Diagramación del Sitio

Fase 2- Estructura del SitioEjemplo de un “Sitemap”

BANCO CONTINENTALHome-Page

PARA PERSONAS PARA EMPRESAS CONÓZCANOSPARA INVERSIONISTAS

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

Cuentas de Depósitos Cuentas de Ahorro Personal Cuentas Corrientes Plazo Fijo

Tarjetas Tarjetas Clave

Banca en Línea Características y Ventajas ¿Cómo me afilio? Preguntas Frecuentes

Banca de Inversión

Cuentas de Depósitos Cuentas de Ahorro Comercial Cuentas Corrientes Comercial Plazo Fijo Comercial

Crédito Comercial Préstamos Líneas de Crédito Cartas de Crédito

Otros Servicios Planilla Automática

Productos y Servicios

Cuenta de Inversión Local Cuenta de Inversión Intl.

Acerca de Wallstreet

Historia Misión / Visión Estados Financieros Ubicación Tarifas Contáctenos

Conózcanos

Historia del Banco Misión y Visión Junta Directiva Estados Financieros Bancos Corresponsales Sucursales y Cajeros

Fase 2- Estructura del SitioEjemplo de un “Wireframe”

Fase 2- Estructura del SitioEjemplo de un “Wireframe” de página interior

Fase 3- Diseño Interface Visual

Revisar Objetivos del Site Revisar los requerimientos y especificaciones técnicas. Diseñar hacia la audiencia.

Desarrollar ConceptosExperimentar 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 justificar el diseño.

Fase 3- Diseño Interface VisualAlgunos Websites de Bancos

Fase 3- Diseño Interface VisualAlgunos Websites de Bancos

Eso que llaman “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.

¿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”.

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”.

Caso de Estudio: Banco ContinentalVersión 2000-2001

Las primeras versiones del website público cumplieron su finalidad; mostrar información referente a sus productos y servicios, de manera que el website fuera otro canal para la publicidad.

Efectividad y funcionalidad del website

Home Page o página inicial Orientado a productos, publicidad de todas las bancas y noticias

Navegación Mala deficinión mapa del sitio, menú no permitía crecer

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

Contenido Textos muy extensos

Enlaces Confusos, no estaban bien definidos

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

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

Herramientas financieras Algunas Calculadoras, aunque no muy a la vista

Caso de Estudio: Banco ContinentalVersión 2002 - 2003

A finales del año 2002, esta vez enfocándose en un concepto más orientado al diseño gráfico y al espacio para la publicidad, rediseñan su website. Además incorporan algunas herramientas financieras de utilidad para los visitantes. El diseño en cuanto a “look & feel” era muy bueno, se mejoró la diagramación y el website estaba más enfocado al cliente.

Efectividad y funcionalidad del website

Home Page o página inicial

Orientado al cliente, definen áreas y tamaños para banners, enlaces y accesos más directos. Servicio al

Cliente y Banca en Línea se mantenía a través de todo el website

Navegación

4 secciones para sus productos y servicios, orientación al cliente, se

incorpó el estilo de “fly-out menus”, para agrupar más secciones

Diseño y diagramación

Mejoras al diseño gráfico, se utilizan los colores del nuevo logo del banco. Noticias a mano derecha y más

prominencia a la publicidad mediante banners

Contenido Mejoras en la redacción de los textos de productos y servicios

EnlacesMejoras, herramientas de utilidad a

mano derecha, se muestran con íconos llamativos

Políticas de uso / términos y condiciones Estaban presentes al final de la página

Formularios

Estaban presentes, mejoras para hacerlos más cortos (como una pre-aplicación), los enlaces hacia estos formularios estaban presentes como

íconos en las páginas de los productos

Herramientas financieras

Más exposición a las herramientas financieras como las Calculadoras y

tasas para depósitos. Nuevas 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)

Caso de Estudio: Banco ContinentalVersió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.

Caso de Estudio: Banco ContinentalVersión 2004 - 2005 Efectividad y funcionalidad del website

Home Page o página inicial

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 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.

Navegación

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 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.

Diseño y diagramación

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

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.

Caso de Estudio: Banco ContinentalVersión 2004 - 2005 Efectividad y funcionalidad del website

Contenido

Mejorado, los textos acerca de los productos y servicios se hicieron más concisos y se definió un formato de

presentación para los mismos

Enlaces

Los íconos llamativos son reemplazados por pequeños banners, los enlaces a servicios y productos se 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 condiciones

Siguen presentes al final de la página, en color de link más llamativo

Formularios de solicitud

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 Contactar al Banco se eliminan y se

deja un solo formulario de Contáctenos que recibirá Servicio al

Cliente.

Herramientas financieras

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 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.

Gracias por su tiempo