• Like
Financial Web Design Case Study
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Financial Web Design Case Study

  • 655 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
655
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño Web para Bancos WEB DESIGN FOR FINANCIAL INSTITUTIONS por: Elsa Canto W. Universidad del Itsmo - Panamá Feb, 21 2008
  • 2. Indice 5 Fases de un Proyecto Web Eso que llaman “Usabilidad”... Caso de Estudio: Banco Continental WEB DESIGN FOR FINANCIAL INSTITUTIONS
  • 3. 5 Fases de un Proyecto WEB 1- 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
  • 4. 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) WEB DESIGN FOR FINANCIAL INSTITUTIONS
  • 5. 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.
  • 6. Fase 2- Estructura del Sitio 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
  • 7. Fase 2- Estructura del Sitio Ejemplo de un “Wireframe”
  • 8. Fase 2- Estructura del Sitio Ejemplo de un “Wireframe” de página interior
  • 9. Fase 3- Diseño Interface Visual Revisar Objetivos del Site Revisar los requerimientos y especificaciones 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 justificar el diseño.
  • 10. Fase 3- Diseño Interface Visual Algunos Websites de Bancos
  • 11. Fase 3- Diseño Interface Visual Algunos Websites de Bancos
  • 12. 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”.
  • 13. Caso de Estudio: Banco Continental 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
  • 14. Caso de Estudio: Banco Continental 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)
  • 15. Caso de Estudio: Banco Continental 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.
  • 16. Caso de Estudio: Banco Continental Versión 2004 - 2005 Efectividad y funcionalidad del website 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.
  • 17. Caso de Estudio: Banco Continental Versión 2004 - 2005 Efectividad y funcionalidad del website 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.
  • 18. Gracias por su tiempo