Unificación del branding y websites de todas las sedes de Banesco Internacional: Venezuela, Panamá, Rep. Dominicana y Estados Unidos, creando plantillas adaptables al contenido de cada una de ellas.
Descripción del proyecto
Banesco Internacional es una institución financiera con presencia en distintas regiones y mercados de América del sur, Centroamérica, Norteamérica y Europa, cuyo banco tiene sedes en países como Venezuela, Estados Unidos, República Dominicana y Panamá.
El proyecto consistió en la unificación del branding y los websites de las 4 sedes mencionadas, creando plantillas personalizables adaptables al contenido de cada una de ellas. Cada sede presentaba interfaces muy diferentes, con distintas estructuras, páginas, menús y herramientas.
Nuestros objetivos
Problema
El problema inicial que se presentaba a lo largo de todos los sitios e inició el proyecto, era la ausencia de un design system establecido para que todas las sedes compartieran y utilizaran como lineamientos para mantener la consistencia. Solo había a disposición un manual de marca enfocado más que nada en el correcto uso del logotipo y los colores de la marca.
Esto generaba un alto nivel de inconsistencia, no solo al comparar las sedes entre sí, sino también dentro de cada uno de los websites, al no hacer un uso coherente y regular de los tamaños de distintos elementos como botones, textos, títulos o links, no seguir una grilla para organizar las columnas, cards e información, ni utilizar correctamente los colores establecidos en el manual de marca. Además, hacía falta una optimización de las versiones mobile, ya que se podían observar textos y botones demasiado chicos, así como imágenes que eran cubiertas por texto al adaptarse automáticamente el tamaño de las mismas a pantallas pequeñas.
Inconsistencia al no utilizar un mismo design system entre todas las sedes
Componentes y secciones sin estructuras ni patrones replicables
Información sin organización jerarquizada
Falta de optimización para las versiones mobile
Websites previos de las cuatro sedes: Venezuela, Panamá, Rep. Dominicana y Estados Unidos.
Proceso de diseño
Comenzamos recolectando información sobre el comportamiento de los usuarios y analizando métricas de los websites, como los tiempos de carga, dispositivos utilizados, duraciones de las sesiones y tasas de conversión. Encontramos como necesidad la optimización de la versión mobile y la revisión de la arquitectura de información para aumentar la eficiencia a la hora de buscar la información clave sobre los productos y servicios ofrecidos.
Una vez hecho el audit general de las cuatro sedes, realizamos un análisis competitivo de bancos tradicionales como ABANCA y Santander, y de nuevos bancos digitales como Brubank y Revolut, para encontrar patrones y estructuras comunes, identificar qué funcionaba y qué se podía mejorar.
Luego, necesitábamos identificar las páginas y subpáginas en común entre todas las sedes para definir un sitemap que abarque la máxima cantidad posible de opciones y así crear las plantillas que funcionarían como base para reutilizar en todas las sedes. A su vez, también debíamos identificar información y secciones comunes de cada página, para decidir qué tipo de componente o módulo necesitaríamos para cada caso. Por ejemplo, encontramos que en las páginas de tarjetas debíamos implementar, cómo mínimo, secciones para mostrar los requisitos, beneficios o ventajas de las mismas y las instrucciones para solicitarlas.
Algunos de los websites de la competencia, tanto de bancos tradicionales como digitales.
¿Qué encontramos en los sitios de otros bancos?
Diseño minimalista y moderno, con grilla de cards con bordes redondeados, utilizadas para mostrar beneficios, promociones, productos y/o servicios.
Los bancos tradicionales cuentan con un sistema de menús y submenús complejo, necesitando accesos rápidos a las páginas principales.
Identificación clara y rápida de las secciones de ayuda y atención al cliente.
Lenguaje claro y amigable para el usuario.
¿Qué páginas tienen en común todas las sedes?
Homepage con variaciones para Personas y Empresas
Productos y servicios: Créditos, Tarjetas y Cuentas
Banca Online y Banca Móvil
Promociones
Comunicaciones: Sala de prensa y Blog
Atención al cliente: Canales de ayuda y Contacto
Sucursales
Sobre nosotros
Preguntas frecuentes
Para la arquitectura, además realizamos estudios de tree testing para reorganizar las páginas de la manera más clara para los usuarios. Tras definir el sitemap y las secciones comunes que servirían para personalizar el contenido de cada sede, trabajamos en los wireframes en sus versiones mobile y desktop, explorando y presentando diferentes propuestas de menú, headers y banners. Luego pasamos a los mockups en alta fidelidad, comenzando a trabajar en el design system con los estilos de texto, sistema de íconos, paleta de colores y los distintos componentes.
Realizamos testeos A/B para validar distintas propuestas y recibir feedback para continuar iterando y ajustando detalles, para así definir la estructura más clara y eficiente para encontrar la información.
Solución y resultados
Se diseñaron plantillas para cada tipo de página (homepage, categoría, producto, ayuda, etc.), con módulos y componentes replicables para que el contenido pueda personalizarse según cada sede, con secciones reordenables e intercambiables entre sí. Para esto, fue esencial desarrollar un design system que funcione como guía para que las sedes sigan los lineamientos al utilizar las distintas secciones y agregar su propio contenido, según las necesidades de cada sitio.
De esta manera se trabajó en crear diferentes versiones de banners, grillas de cards para los distintos productos y servicios, secciones de ventajas y beneficios, sistemas de accordions con información colapsable, entre muchos otros componentes.
A partir del nuevo design system establecido, se entregó todo al equipo de desarrollo para que trabajara en construir los bloques editables para WordPress, cuyo builder fue utilizado para crear las páginas que cada sede necesitara, agregando o quitando secciones y personalizando el contenido de cada bloque. A su vez, se entregó una guía de estilo a todas las sedes para que sigan los lineamientos al crear cada página y así mantener la consistencia.
Como resultado, obtuvimos una plantilla de WordPress personalizable, basado en el design system desarrollado e integrado con los bloques del builder, adaptable al contenido que cada sede necesitara implementar.
45%
Retención mejorada
60%
Conversiones más altas
90%
Una misma guía de estilos para todas las sedes
Se creó una guía de estilos con los lineamientos e instrucciones para el correcto uso de logos, colores, tipografía y componentes con sus distintos estados, detallando tamaños y espaciado, padding y márgenes.
