Citibanamex App

Mobile App Redesign

Overview

Banamex was one of the oldest and biggest banks in Mexico, after they were acquired by Citigroup in 2001, the bank started its transition to Citibanamex as a brand. in 2016 they started their rebranding strategy, investing a lot of time and resources in its digital transformation.

Scope

Product Strategy
Research
Visual Design
Prototyping and testing

As Citibanamex started its rebranding journey, their digital products had a lot of opportunities in terms of performance and usability in general, but also was the right occasion to give the products a fresh look to appeal to mass audiences. To begin we defined the lines of action
‍

Differentiate our value proposition and business model
Provide remarkable experiences and improve Net Promoter Score leadership in the market
Revamp our sales, advisory and product suite for upper segments
Improve customer satisfaction by detecting and solving customers unmet needs
Weigh up efforts and set a precedent for UX metrics

The Challenge

Strategic Intent

Research

For the mobile app, we conducted a series of ethnographic studies with users from different customer segments to explore and understand their relationship with their money and their banks. Meeting with users in their specific context helped us develop empathy and understand their behavior a lot more. A couple of exercises were made to evaluate user interface against competitors and rank features to determine which needs were being unmet with users current banking solutions
‍

User personas

Based on spending habits, motivations and profiles, we identified 5 user personas, which helped us determine specific needs for each one of those behavioral patterns and could be translated into functionalities thereafter.

Research Insights

Once we analyzed the data from qualitative research, we were able to identify the opportunities we had to improve the current mobile solution and helped us define which features could help us solve those opportunities

Misunderstanding of balance information
Poor integration between products (Investments, insurance, loans, etc)
Dehumanized banking
Lack of financial assistance
Fear, distrust credit and financial institutions
Password and login issues
Poor user experience
Internet connection issues
Aspirational frustration / Lack of financial education
Bank branch Visits
App performance

Definition

To define our product functionality we map the overall architecture of the product, to start solving user flows

Visual and interaction design

Using the brand values, design evaluation exercises and research insights, new features, a cleaner layout, and a whole set of design components were proposed by the design team.

Product integration & Interactive menu

Most users have more than one product with the bank, to include all the different products hired our main screen included all of them with a color system to tell them apart and offering balance info at a glance.

The bottom navigation was designed to be contextual so the options change depending on the product you're in, helping discoverability and ease of use.

Financial Education

Two new functionalities were introduced helping customers to have better money management. First one was a PFM to categorize spending and offer insights to customers, second one was saving goals, to incentivize saving and help them get financial freedom

Login and security issues

To help users avoid login issues, we include new options to remember their information or login using faceID, plus we turn physical tokens into digital so they can transact from everywhere. And to reduce the need to visit a branch.

BlueBox: A Design System

Due to the big amount of inconsistencies between development and design, I proposed to create a design system to document all the components. That helped us reduce development time and have more consistent and cohesive design.

Rapid testing

I used maze tool for rapid testing, this allowed me to take better informed design decisions and avoid assumptions.