HSBC Banking App Redesign- Case Study

Esbaide Gonzalez
4 min readFeb 11, 2023

--

En la tercera semana del bootcamp tuvimos que elegir una aplicación que para nuestra percepción necesitara rediseño para mejorar el desempeño del usuario y hacer mejor la experiencia de los procesos.

Soy usuaria de las aplicaciones bancarias de HSBC y al mismo tiempo de la de BBVA, y me parece que ambas muestran diferencias muy evidentes en cuanto a diseño y usabilidad.

De acuerdo con los procesos y desarrollos hechos en esa semana dedicada únicamente al rediseño de UI, estos fueron los acercamientos:

Reto: Rediseñará un mínimo de tres pantallas de su elección. Por supuesto, puede rediseñar más pantallas, pero está limitado a un máximo de 7 pantallas. No está obligado a realizar ninguna investigación de UX.

Portada del proyecto

La marca

De las cosas que más me interesan desde que he tenido acercamientos trabajando con marcas en publicidad y entretenimiento, es que hay que respetar las normas actuales que tiene tales como, colores, fuente, imagen, tono y público meta. Es como hacerle un regalo a una persona, probablemente cuando era joven, tenía ciertos gustos y manera de pensar, pero dicha persona con los años creció, maduró, cambió y tiene gustos y manera de pensar diferentes a antes, no puedes regalarle algo que no vaya acorde a su edad o gustos actuales porque tal vez ese regalo no sea muy útil y en vez de gustarle tal vez sea incómodo.

Hay que investigar para conocer a la marca, por suerte HSBC cuenta con una página que resume a la perfección todo esto: https://create.hsbc/

De dicha página conseguí la mayoría de las pautas que utilicé para mi re diseño.

Fundaciones de la marca por HSBC Create

Áreas de oportunidad

Después de indagar de quién es mi cliente, volví a analizar la propuesta que actualmente tienen en sus dispositivos móviles. La cual es requerida e indispensable para abrir una cuenta en su banco.

Cuando acudí a abrir mi cuenta, terminando de haber firmado y hecho el papeleo, tenía que comprobar que había descargado las 2 aplicaciones para el manejo de mi cuenta y tarjetas.

Con BBVA sólo tengo una única app en la que puedo hacer transferencias, ver los movimientos de mis tarjetas en plástico y digitales.

Me sorprendió que HSBC requiriera 2 apps diferentes, una particular para el manejo de las tarjetas. Para encenderla y apagarla, y en caso de tener tarjeta de crédito, podría tener acceso a una tarjeta digital.

Además de la amplia oportunidad que tenía en general el diseño de ambas aplicaciones, quise unificarlas en una única app que hiciera todo.

Control Total app de HSBC para manejo de tarjetas

Flujo

De todas las facilidades que nos brinda el tener aplicaciones bancarias hoy en día, ciertamente la más útil es lo sencillo que se ha vuelto mandar y recibir dinero desde nuestros celulares.

Me centré en un flujo en el que el usuario manda dinero desde una cuenta de débito a un contacto frecuente y tiene un comprobante de transferencia.

Planeación del flujo
MID-FI Prototype

Style Tile y Style Guide

Tomando como referencia la aplicación actual y las normas actuales de la marca de HSBC, tomé como oportunidad darle un giro más acorde a las tendencias actuales en UI. Acabados más redondeados, minimalismo, más iconografía y menos texto.

Prototipo de alta fidelidad

Después de hacer el style guide, componentes, íconos y elementos que me servirían para el re diseño, procedí a armar el prototipo en Figma:

Muchas gracias.

--

--