Saltear al contenido principal

Interfaz del cajero automático para Bank Austria

Nuevo diseño de pantallas para sus cajeros automáticos

El Banco de Austria quería actualizar el diseño de las pantallas de sus cajeros automáticos. Las guías de estilo sobre la marca así como las funcionalidades me vinieron dadas para rediseñar la nueva interfaz. Esta nueva experiencia se implementó en los cajeros automáticos de Bank Austria, miembro de UniCredit, que están en más de 15 países europeos, como Austria, Alemania, Bélgica, Italia, Suiza, República Checa, Polonia, etc. Si alguna vez sacas dinero en ese banco… piensa que yo tuve algo que ver ; )

Dirección artística, concepto y diseño

Markus Schneeberger y Christof Hofstaetter (jefes de proyecto)

2014

Interfaz – UI

Bank Austria
(Ovos)

ATM device structure - Estructura del dispositivo del cajero automático

Sacar dinero y meterlo con una nueva interfaz más limpia y elegante

Basándome en las guías corporativas que indicaba el propio banco, empecé a diseñar diferentes elementos y sus correspondientes pantallas. Querían cambiar el look & feel pero preservando las funcionalidades, así como la disposición de los elementos, tipografías, colores, etc. Todo ello, además manteniendo el mismo sistema de programación que se estaba usando para mostrar las pantallas de los cajeros yq eu funcionara en navegadores antiguos. Una limitación convertida en reto.

Lo que había antes era algo confuso en cuestión de niveles de importancia o relevancia. Así que enfaticé y diferencié elementos con los limitados recursos que tenía. Uno de los elementos que cambié fue el fondo, separándolo de otras secciones o botones con los que el usuario tenía que interactuar dentro de la misma pantalla.

Elementos de UI corporativos

Nuevo diseño para elementos como botones, fondos, mensajes de alerta, pop-ups, barras de progreso, etc. basados en la guía de estilo corporativa del banco.

ATM Bank Austria user interface - Interfaz de usuario del cajero del Banco de Austria

Animaciones 3D complementarias

Además hicimos unas nuevas animaciones explicativas que acompañaban las pantallas y los procesos.

3D Animation for an ATM 1 - Animación 3D para un cajero 1
3D Animation for an ATM 2 - Animación 3D para un cajero 2
3D Animation for an ATM 3 - Animación 3D para un cajero 3
3D Animation for an ATM 4 - Animación 3D para un cajero 4
ATM photo 1 - Foto 1 del cajero
ATM photo 2 - Foto 2 del cajero
ATM photo 3 - Foto 3 del cajero
ATM photo 4 - Foto 4 del cajero

Un paseo por las secciones que un usuario encuentra al gestionar su dinero

ATM interface select - Interfaz del cajero de selección

Selección rápida de opciones iniciales.

ATM interface info - Interfaz del cajero informativa

Información básica de la cuenta con un banner publicitario.

ATM interface cash recycler - Interfaz del cajero automático

Extracción e inserción de billetes en el cajero.

ATM interface mobile operator - Interfaz del cajero de selección operador móvil

Pantalla de selección para la recarga de tarjetas telefónicas.

ATM interface PIN - Interfaz del cajero con PIN

Teclear el PIN o la cantidad de dinero a sacar.

ATM interface quick money - Interfaz del cajero para dinero rápido

Extracción rápida de cantidades de dinero preestablecidas.

ATM interface currency - Interfaz del cajero del valor de la moneda

Información del valor y cambio de divisas.

ATM interface language - Interfaz del cajero de selección de idioma

Pantalla de selección de idioma de la interfaz.

Un rediseño para conseguir una mejora de la interfaz funcional y estética

He de decir que sacar dinero en tu propio diseño mola.

ATM structure & screen - Estructura y pantalla del cajero
Volver arriba