BancaNet Enterprise — UX/UI

To grow, we have to get back up from our worst falls.

Leadership

The project that has contributed most to my professional growth. I learned valuable leadership lessons by unifying a divided team, practicing active listening with my collaborators, fostering patience and sharing my experience to drive the team's growth.

Resilience

Every new obstacle is an opportunity to learn and grow. Although ideas sometimes didn't match users' needs, every stumble taught me to face challenges and push beyond what was expected of the product.

Adaptability

Regardless of the business objective, technical feasibility or users' needs, I always had a good methodological foundation to deliver value in every phase of the project. I executed design side by side with the team and negotiated with senior leaders to improve the product for the benefit of people.

Teamwork

You can't maximize value without the right team to reach the goals. I'm grateful to have worked with the team mentioned at the beginning, whose dedication influenced both my professional and personal growth. Without their commitment, we wouldn't have achieved this.

The biggest lesson was teaching the value of design to a business team that saw the value of users and how this improved their product.

1. Redefining the interface and architecture

As this was a complete redesign of the enterprise web banking on a new Angular-based platform, rethinking the user experience was essential.

We opted for a more traditional method before creating any symbol in Sketch:

• Modular, customizable site
• Technical feasibility was assessed
• Assessing usability and interaction
• Aligned with the institutional brand

User flows

Creating the flows together with the product owners helped us understand the user's entire journey and cover every screen for the possible cases that would arise, so that every user touch point was mapped.

Wireframes

Since we had a list of flows and multiple PRDs to cover the scenarios, we started building sketches and low- and high-level wireframes to detail the information architecture, validate the product with the business and confirm technical feasibility.

The feasibility of the information architecture was tested with in-house users to validate the experience and navigation of the flows, going through several iterations in the process.

2. Refreshing the look & feel

We chose a fresh, modern design style without leaving aside the bank's institutional style, creating a simple blend of styles. A new visual guide had to be created to guide the design consciously.

Old portal: The platform users had been using had a very institutional and outdated style, with evident usability problems.

New portal: On seeing the new portal proposal we envisioned it with a feeling of speed, modernity and comfort — which was quite a challenge for financial platforms.

Modular design at its best, adapted to the bank's needs.

1. A UI Kit without being a design system

A banking institution has different areas and businesses, and with Citibanamex being one of the most important banks of its time, it was essential to create the interface foundation with a broad visual library and tone and voice.

This UI Kit was created to meet the need to keep the design consistent. A design system was not viable at the time because the bank's areas did not communicate with each other.

2. First version of the interface

With the local component library defined, all that remained was building the complete UI for all the defined user flows.

Complete user journeys were built for: Dashboard and Multitasker.

Before tools like Zeplin, Abstract or Figma, the handoff to development was a fairly traditional, manual exercise.

The style guide

We used to deliver the handoff to development with a beautiful, stylized style guide created in InDesign. This guide gave us a design–development relationship with significant stability and consistency before the arrival of new tools.

The guide covered: typography, colors, standard buttons (30px high, 2px radius), header, navigation flow, work areas and components.

Final statistics

It was the project with the most manual execution in a design tool up to that point in a single project.