BDE & Eurosystem
Rediseño de la web del Banco de España
Cuando visitas las webs de los principales bancos del Eurosistema, hay una cierta armonía, unas similitudes que de alguna manera nos comunican que pertenecen a la misma familia/sector, es algo que como veremos se da por una serie de factores que la página a la que nos enfrentamos no tiene en consideración.
No rema en el mismo sentido que las demás
Este Case Study lo afrontaré con una serie de herramientas que primero de todo definiré junto con la gestión de tiempos. Una buena gestión del tiempo y las herramientas adecuadas me harán ser más ágil y no perder el tiempo.
Gestión de ⌚︎tiempos y 👉🏼Tools
Como es habitual en mis proyectos utilizaré Paper de Dropbox para esta tarea, pero existen muchas otras herramientas de organización como Trello o Notion que disponen de herramientas similares y útiles.
Ya tengo las herramientas preparadas👌🏼, ¡podemos empezar!
No puedo rediseñar algo si no se que es, así que:
🔦Desk Research
¿🤷🏽♂️ Qué es el Eurosistema?
El Eurosistema es la autoridad monetaria de la eurozona , el colectivo de estados miembros de la Unión Europea que han adoptado el euro como su única moneda oficial.
Los Estados miembros pueden emitir monedas en euros , pero el BCE debe autorizar el importe de antemano.
ℹ️ El Sistema Europeo de Bancos Centrales ( SEBC ) está formado por el Banco Central Europeo (BCE) y los bancos centrales nacionales (BCN) de los 27 estados miembros de la Unión Europea (UE). Incluye a los bancos centrales nacionales de los 19 estados miembros que han adoptado el euro.
¿Qué es el Sistema Europeo de Bancos Centrales?
El Sistema Europeo de Bancos Centrales (SEBC) es una organización formada por el Banco Central Europeo (BCE) y por los Bancos Centrales Nacionales de los estados miembros de la Unión Europea. El SEBC aspira a convertirse en la 💶 autoridad monetaria de la UE.
Aquí vemos un breve resumen que explica de manera sencilla que es el BCE y el Eurositema👇🏼:
¿Por qué existe el Eurosistema?
El principal objetivo del Eurosistema es mantener la ⚖️ estabilidad de precios; en concreto, conseguir una inflación en la zona euro (calculada según estadísticas internas del BCE) “menor, pero cercana al 2%”.
¿Cuál es el 🎯objetivo principal del Sistema Europeo de Bancos Centrales?
El objetivo primordial de mantener la estabilidad de precios y apoyar las políticas económicas generales de la Comunidad.
💰Banco de España
El Banco de España es el banco central nacional y, en el marco del Mecanismo Único de Supervisión (MUS), el supervisor del sistema bancario español junto al Banco Central Europeo. Su actividad está regulada por la Ley de Autonomía del Banco de España.
Home actual
Esta es la home de la web del Banco de España, con una sola mirada ya vemos que algo no funciona, que nos transmite y comunica una serie de 👨🏼🦳sensaciones que no están alineadas con el resto de sus competidores como veremos a continuación.
🔍Benchmarking
Vamos a ver como resuelven las Homepage algunos Bancos del Eurosystem, para ello utilizo un Documento de referencias donde recojo las características o funcionalidades destacadas de cada home, de esta manera podré ver que tienen en común, que lineas de diseño UI aplican, que tipografías, color, imágenes, navegación, arquitectura de la información, etc.👇🏼
📄 Documento de referencias
Tras analizar 8 de estos bancos (y uno que no es del Eurosystem pero que me parece igualmente reseñable, Bank of England) encuentro que: extraigo una serie de findings que más adelante me serán útiles a la hora de aplicar tanto la arquitectura de la información como la capa visual, de esta manera acumulo una serie de recursos que darán ese aire de pertenencia que debería tener la web del Banco de España, y de la que actualmente carece.
Contenidos
Hay una homogeneidad en las home’s, en cuanto a contenido y características de la capa visual, no cabe duda que los contenidos del Banco de España son correctos, pero la mayoría de sus competidores cumplen con mejores contenidos y sobretodo mejor construidos.
👎🏼 Muchos de los enlaces de la web te llevan a pdf’s sin salida, pdf’s que no tienen ningún atractivo estético, solo contenido en bruto.
🖱 Navegación
Si hacemos un análisis de los navbar para ver y comparar contenidos de los principales enlaces que deciden poner en el menú más importante de la web, veremos que hay coincidencias en casi todos ellos, unas coincidencias que encontramos vagamente en el menú del Banco de España.
Enlaces del menú del Banco de España
Sobre el Banco, Eurosistema, MUS, Servicios, Empleo y becas, Normativa, publicaciones, sala de prensa.Coincidencias en los menús de los competidores
About us, statistics, Media, publications and research, politica monetaria.
El menú secundario/tabs está mejor alineado en contenidos con el resto de bancos, encontramos coincidencias en todos los menús, las diferencias las encontramos en el lenguaje de los enlaces, que sería mejoráble.
🔬Análisis Heurístico
Esta herramienta es esencial para el análisis web, de una manera detallada y concisa veremos todos los paint points de la home, y proveeremos de recomendaciones para la solución estos.
Para este caso en concreto utilizaré la herramienta Airtable, porque es muy ágil y permite una buena estructuración de la información a medida que vamos analizando punto por punto el sitio web.
Tabla de Análisis:
Como se puede apreciar en la tabla nos encontramos ante muchos paintpoints, y diversos problemas, aunque puede que el principal y el que salta a la vista sin ser un experto es que esta home (y todo el sitio) necesita (entre otras muchas cosas) una capa visual bien resuelta.
Resultados de la Heurística
Tenemos una gráfica araña como resultado de este análisis que nos deja ver de una manera más clara el resultado del análisis Heurístico.
Podemos apreciar cómo los resultados no llegan al 75% de usabilidad salvo en el caso de los errores, que aunque estén por encima del resto de métricas tampoco gozan de buena usabilidad.
Para este proyecto en particular nos vamos a centrar en la Home de la web, y en tratar de resolver todos los puntos encontrados en las Heurísticas.
Nuestro objetivo es alinear la web al resto de bancos del Eurosystem, reestructurar su arquitectura, que es uno de los grandes paintpoints, por otro lado la capa visual o UI de la web está 👨🏼🦳desfasado, y como hemos podido comprobar en el análisis, carece de feedback, de aire, de coherencia visual respecto al sector que pertenece, todo apunta a que debo comenzar por los cimientos, sin olvidar que el factor tiempo es algo prioritario en este proyecto.
🏛 Arquitectura de la información
Problemas y soluciones
Al tratarse del rediseño de la Home no utilizaré Flowcharts ni Sitemaps, pero sí que utilizaré la información extraída del Benchmark así como 🖍Wireframes para estructurar la información de la página.
Nos encontramos con bloques recurrentes en las webs del Eurosystem:
- El Header será como en casi todos los casos que hemos visto, un header donde la tónica general es útilizar el hero como elemento de presentación del Banco. Sin Slider/carrousel, una imagen con potencia visual que nos sitúe en contexto.
- Tanto el BCE como el Bank of England (no es del Eurosystem) destacan en primer plano la información sobre tipos de interés en el hero, el BDE tiene esta información en la parte inferior, para darle más relevancia la situaremos en el hero.
- Algo que ya aparece en la web actual y que es un elemento que encontramos en casi todas las webs es el sección de Tabs en la que podemos encontrar varios adelantos de secciones, como por ejemplo Noticias, Publicaciones, Agenda o Prensa, en varios casos vemos que esta sección comparte espacio con la sección In focus, es interesante disponerlo de esta manera en los wireframes y así reubicar los tres enlaces que aparecen en el hero.
- Hay un elemento que solo hemos encontrado en la web del BDE, y es el submenú “Áreas de actuación”, este menú no cumplía su misión correctamente y además añadía ruido visual y carga cognitiva a la web.
Una manera de darle una mejor estructura y de paso hacerlo atractivo es convertirlo en una sección independiente en forma de small cards. - Para aligerar el menú de tabs y dar contenido atractivo a la web una sección “Media”, en la que podemos incorporar los videos que ya contiene la web.
- Hay una sección que se repite en casi todas las webs del Eurosystem, y es “Estadísticas”.
- En la actual web tenemos tres CTAs dispuestos en una especie de cards, en este caso podemos convertirlos en cards que ofrezcan un poco más de información para invitar a entrar a las users.
- La última sección será la de los portales del Banco, en este caso respetaremos su ubicación pero cambiaremos su diseño.
De esta manera la disposición de la información, aligeramos el header y hacemos más atractiva e interesante hacer scroll hacia las partes inferiores de la web, invitando a las users a investigar las diferentes secciones que se van encontrando.
Estructura:
Wireframes
¿Cómo traducimos esto en algo un poco más visual?
Con wireframes, claro, nos ayudarán a estructurar y a comenzar a imaginar la capa visual de la web.
Con todo lo aprendido hasta ahora ya tengo una idea bastante clara de cómo debe ser la estructura y qué recursos debo utilizar para resolver cada sección, como por ejemplo cards, tabs, slider, CTAs, etc.
Si quieres ver el aterrizaje visual del BDE, haz click en el siguiente enlace:
