Banco de Crédito del Perú

En el Banco de Crédito del Perú trabajé en la tribu de Ventas Digitales asignado directamente al mantenimiento y mejora de su web pública, ViaBCP.

Mi rol dentro de la organización fue UI Designer Senior y realicé diversidad de trabajos que van desde el análisis de flujos existentes y diseño de interfaces, hasta la creación de nuevas formas de organización de archivos y componentes.

En el banco realicé, tanto solo como con mi dupla de UX, análisis previos a la toma de un requerimiento de negocio. Esto para asegurar que los objetivos que nos presentaban fuesen logrables al igual que sean la decisión correcta.

En la siguiente imagen se aprecia un ejemplo de análisis para la inclusión de un componente de personalización (MBOX) en múltiples páginas de ViaBCP. El reto estuvo en encontrar la posición adecuada para su colocación, evitando que obstruya la lectura del producto, pero sin relegarlo al final de cada página para incrementar su visibilidad.

El trabajo de wireframing cae en las responsabilidades del UX de mi mesa, aunque eso no implica que yo no haya sido involucrado en dicho proceso. De hecho, el trabajo conjunto ha sido una de las fortalezas de mi equipo. Pero, por temas de autoría prefiero no mostrar el trabajo de mi dupla en este portafolio.

Sin embargo, es evidente que al concluir con el wireframing y ser testeado y validado por negocio, yo estaba a cargo de su traspaso a alta fidelidad. La estructura de los flujos en el programa de diseño (Figma o Sketch) variaba según los requerimientos de mi COE (sea el handoff hecho en Zeplin o directamente en Figma), por lo que era necesario ajustarse dependiendo de la iniciativa trabajada.

Un ejemplo de esto es el flujo de navegación del nuevo menú de ViaBCP. Al concluir las pruebas de usabilidad y cerrar la AI en wireframes, se diseñó el nuevo menú en alta fidelidad. Para asegurar su correcto funcionamiento en cada casuística, se prototipó las variaciones del menú de Personas, PyMES y Empresas, así como sus variantes en quechua.

El resultado final del menú se puede apreciar actualmente en producción en ViaBCP. Las ilustraciones de los banners de los menús de las páginas de Personas, PyMES y Empresas fueron ilustradas por mí.

Otra de mis funciones en el banco fue la de la creación de iconografía e ilustraciones. Si bien esta es una tarea mucho más visual (para la cual mi mesa tenía un perfil exclusivo), mi background como diseñador gráfico e ilustrador me permitieron darle mayor personalidad y dinamismo a las interfaces que diseñé.

Un ejemplo de esto son las imágenes, ilustraciones e iconos que realicé para Mi Espacio BCP. Este fue un gran proyecto que iniciamos durante mi tiempo en el banco y que sigue evolucionando hasta ahora, sin embargo, al tener una lógica de funcionamiento delicada, no me es posible mostrar mayores detalles de la iniciativa.

Aun así, puedo poner como ejemplo la iconografía que realicé para la sección de onboarding.

Se pueden dividir en dos grupos generales el tipo de intervención que realicé en ViaBCP. A través de componentes transversarles (es decir, que se utilizan en varias páginas de la web) o a través de rediseños completos a páginas importantes.

Un ejemplo del último tipo es el rediseño de 2022 del home de ViaBCP. Este se hizo con la intención de fomentar el scroll así como de dar mayor visibilidad a las campañas de facturación del banco.

En adición a los prototipos y diseños finales un añadido que ha resultado no solo atractivo sino que consiguió incrementar el número de interacciones son las animaciones. Puedo dividir en dos grupos los trabajos de animación e interacción que realicé.

Un ejemplo de ambos casos se encuentra debajo. Hice este diseño interactivo de cero, empezando por las ilustraciones, luego animando los Lotties y finalmente el HTML con JS para activar la animación de entrada y salida.

Mi equipo de trabajo estuvo entre los primeros en usar una herramienta de diseño distinta al del resto del banco, herramienta que luego fue adoptada por la organización. Esto significó crear una nueva organización de archivos, páginas, nomenclaturas, portadas, plantillas de flujos y demás que sirvieran como molde para la consecuente migración.

Otra importante tarea producto del uso de una herramienta distinta fue la necesidad de crear un sistema de diseño adhoc para nuestras necesidades, que estuviera homologado con el DS primario del banco. Yo, junto con el otro UI de mi mesa, estuvimos a cargo de la creación de estos componentes, que se dividieron en 13 categorías.

Asimismo trabajé en la documentación de los componentes para iOS del banco. Dichos componentes contaban con una documentación obsoleta, por lo que se creó una nueva estructura para dicha tarea.

Como parte inicial de mi trabajo yo realicé el análisis de la documentación antigua de componentes de iOS y Android. Esto me ayudó a detectar qué información se podía reciclar, qué componentes necesitaban empezarse de cero, así como clusterizarlos por dificultad para posteriormente crear el plan de trabajo por sprint.

Con el análisis completado procedí a realizar la documentación de los componentes. En total fuimos 2 diseñadores (una UX y yo como UI) quienes nos dividimos la carga de trabajo.

Se documentaron en total 13 componentes, cada uno con sus propias variantes, estados, tamaños y jerarquías. Esto tomó 3 meses al ser un trabajo paralelo a mi enfoque central que era la web pública (ViaBCP).

Esta es una pequeñísima muestra de todo lo que realicé en el banco desde 2022. Si bien la variedad de labores es mucho mayor en el día a día, este resumen sirve para dar una idea del valor que mi trabajo aportó a la organización.

Trabajar en banca es distinto a realizar trabajos en otros rubros, sin embargo más que un reto, lo consideré una oportunidad para realizar trabajo de alto impacto que puede mejorar la vida de millones de personas en nuestro país.