Ready Bank
Como Briefing tenía que diseñar una app en el sector banca para los millenials. Por ello utilicé mis mejores técnicas como UX/UI para buscar una solución óptima y visualmente atractiva para este público.
Rol:
UX/UI Designer
Metodología:
Design Thinking
Fecha:
November 2019
Proceso
Lo primero que hice fue estructurarme las tareas que íbamos a realizar y empatizar con la problemática a tratar, teniendo en cuenta la propuesta decidí organizrme creándome un trello, para gestionarme y dividirme los pasos para optimizar mejor así el tiempo.
· Research :
Briefing – Benchmarking – User Persona – Mapa de empatía – User Journey
· Diseño :
Prototype Low Fidelity – Wire Flow – Prototype High Fidelity – Style Guide
· Validación :
Testeo – Iteración – Análisis de Resultados
Research
En este punto lo que realicé fue una búsqueda de Apps de Bancos similares para ver que soluciones aportaban y como se habían enfrentado a situaciones similares.
Las que analicé fueron:
· N26
De esta App, lo que más resalté fue su toque juvenil, ya que a diferencia de otros bancos tiene un lenguaje mucho más cercano al target que está enfocado, para crear así un lenguaje tanto visual como escrito enfocado a su usuario final.
· Moneese
En este caso, me pareció interesante la division de secciones que habían creado, aportando un toque mucho más de una red social, para diferenciarse de otros competidores.
· BNEXT
Empatizar
Después de realizar el research, decidí empatizar más con los futuros usuarios de la App, por ello creé un User Persona y su User Journey. Para así tener un punto de vista más objetivo sobre el caso a trabajar.
El User Persona, que creé fue Marta Sans, una joven que busca un banco que le resulte fácil el navegar y realizar sus operaciones diarias.
Tras el journey identifique claramente sus Pain Points, que fueron :
· Pasos muy largos y tediosos.
· No le queda claro como hacer una transacción.
· Dudosa arquitectura de la información.
Arquitectura de la Información
Lo siguiente fue realizar la Arquitectura de la Información, para ver que secciones y pasos iba a plantear para crear posteriormente los wireframes y el prototipo en alta (con Figma).
Lo estructuré de la siguiente manera:
Wireframing
En esta parte realice los wireframing, para jerarquizar las secciones y contenidos, antes de realizar la versión en alta fidelidad.
Style Guide
Para empezar cree el naming de «Ready Bank», debido a que es un término jovial, que se usa mucho tanto por los jóvenes de habla inglesa como los que son de fuera.
Como claiming utilicé «The easiest Smart Bank» debido a su facilidad de uso, y lo rápido que el usuario puede hacer sus acciones dentro de la App.
En cuanto a la tipografía decidí usar la Averta Std, ya que es una tipografía que aporta seguridad pero a la vez es cercana y transmite una sensación más «jovial».
Respecto a la gama cromática decidí utilizar el morado ya que es un color muy neutro y que aporta frescura a sus elementos, aparte de tener un contexto en el marco de lo innovador y tecnológico. Como contraste decidí utilizar el naranja, contextualizando a su color hermano el rojo, como color de aviso o de cancelar acción.
Prototipo Hi-Fi
En cuanto al prototipo en Hi-Fi, decidí crearlo para la versión de IOS. Lo primero que hice c fue crear una grid de 8px, luego diseñé la página de «login», para contextualizar la acción previa y posteriormente el dashboard, donde aparecen las diferentes acciones que puede realizar el usuario.
Dividí el menú en:
· Home
· Wallet
· Transacciones
· Opciones
Decidí usar «Blobs» para darle un toque más juvenil y desenfadado, para descontextualizarlo del toque tan serio que suelen tener las Apps de bancos clásicos, así como un UX Copy mucho más cercano.
Conclusiones
Ready Bank, fue un proyecto interesante de hacer, la fase de research me ayudó mucho para sintetizar y mejorar las ideas previas que tenía tras la lectura del Briefing, al igual que para empatizar con los usuarios potenciales y con el producto en sí.
Aparte el Benchmarking me ayudó como punto de partida para estructurar bien la información y contenidos que iba a plantear en mi diseño, teniendo como referencia a empresas de la competencia que estaban realizando acciones parecidas y enfocadas en un target similar.
More info in Medium (Spanish)
