Citi

Improving the digital banking experience through design thinking

PROJECT BRIEF

Revise and improve Citibanamex’s credit card portal for re-launch by understanding customer needs and informing business decisions to drive new meaningful features.

ROLE & RESPONSIBILITIES

UX designer and workshop facilitator during the discovery stage, later during the design stage I took a more hybrid UX/UI position while taking care of any prototyping needs.

OUTCOME OVERVIEW

Redesigned Citibanamex’s credit card portal around its users, improving customer service efficiency and satisfaction while reducing costs across many of the bank touchpoints.

Design thinking at work

A workshop to emphatize, define and ideate

To lay the groundwork for human-centered methodologies we conducted a two-day design thinking workshop at Citi where we invited project stakeholders from various seniorities to participate.

Our objective on day one was to empathize with users, define the problem we were facing and ideate desirable, feasible and viable solutions. On day two the aim was to establish an experience roadmap that would consolidate product direction.

Having people from different disciplines and levels of customer involvement allowed us to form an comprehensive perspective of what the product and organizational challenges were.

After the workshop all gathered insights would brief the design team for the next stages of designing and testing solutions to iteratively improve the experience.

Users go first

Proto-personas and empathy mapping

The purpose of proto-personas was to look at the product/service from the customer's point of view and articulate who users were, their behaviours, beliefs and their goals/needs.

Condensed proto-personas

Empathy maps on the other hand helped us to gain a deeper insight into the proto-personas discrepancies between feelings, actions and thoughts, as well as pains and gains in the experience.

Condensed empathy maps

The focus on this step was to induce an empathetic mindset, gain buy-in for user centered design and align stakeholders rather than create a research-driven persona intended for documentation, hence the word “proto” in personas.

Ensuing this exercise we championed the need for incorporating proper user research methods beyond these as a follow-up process to avoid idealized or biased views of their customer base.

Following the journey

Uncovering pain points in the experience

Journey mapping was a great way to capture what the team understood about their users existing experience.

We asked the group to take some wall space and divide it into three horizontal sections: does, thinks and feels; then we added vertical columns that defined different interaction stages in the product cycle.

Taking into account those two dimensions participants placed post its on the wall describing the situations that arise at each particular moment when users interact with the product.

Digitalization of “As Is” journey map along with pain points

Soon we noticed that there were several repeating issues that upon discussion and consensus we marked as pain points in the experience. The comparison between what users do, think and feel was particularly insightful when visualized from a product cycle perspective.

Ideation and storytelling

Generating, voting and communicating solutions

Once teams identified key pain points they wanted to target we engaged in a round of silent idea generation for potential solutions and placed them on the wall. After that each of us voted for the ideas that were the most impactful and feasible.

With a shared understanding of solutions we wrote three "hills" that summarized the overall intent for the project as meaningul user outcomes with clarity and flexibility to empower innovative thinking.

Experience blueprint

Defining the ideal user journey and how to get there

Having great solutions to pain points we asked attendants to envision the ideal "to be" journey, basically to describe how we want the users experience to look once our product launches.

To solidify the resulting journey map into a proper experience roadmap we synthesized features into user stories. Then we later prioritized user stories per release and "sized" them, estimating not just the code or test required but also other aspects such as legal, VoBs, design, copy, etc.

Preliminar backlog prioritization and use cases sizing

During discovery we found that the app wasn’t solving common user needs as demonstrated by customer support logs and low usage among credit card holders.

Turned out CCP’s lack of initial traction was that its features were targeted at a mass audience, meaning the whole bank user base, rather than the niche it should, which credit card holders were.

Executing workshop plans

A comprehensive design overhaul

Based on discovery insights and roadmap definition we agreed that we would focus CCP on valuable and meaningful Jobs To Be Done for Citi’s credit card holders, in order to gain user traction while making processes faster and cheaper through digitalization.

To do so, we embarked on a redesign of certain areas crucial to our purpose, ranging from mild optimizations to completely new features.

Atomic elements — Starting backwards from “perfect”

Our first approach was to run a heuristic analysis to assess the initial state of the platform, kickstart quick fixes and point out complex areas that had to be tweaked or tested down the road.

In the process, we identified existing issues in the UI and started working at an atomic level, working our way up from there.

Cohesive molecules — Grouping elements together

Afterwards we grouped those same elements in functional blocks. Experimentation wise, modularity also enabled us to “mix and match” organisms and create different layouts to A/B test.

Organisms forming templates propagated across the entire platform

Not just the looks, but also how it works

Diagramming case scenarios and user flows

The best way to cope with complex processes is to break them apart, understand the pieces and diagram new flows that map entry points, paths, conditionals and outcomes.

Sometimes those flows even helped to find and plan for intricate scenarios or edge cases that hadn't been anticipated during requirements analysis.

Multiple flows outlining the PIN management (changes left, consultation right) process

As designers, we create conceptual models that fill the gap between what users are trying to accomplish (mental model) and what a software product does (implementation model).

Hence effective user flows should bridge humans and technology.

A new and improved dashboard

Meaningful data at a glance

With those molecules, we formed templates like the dashboard, the main home lander in CCP which we designed to provide, at a glance, relevant information unique to each card holder.

CCP’s dashboard became the center stage where users could get a quick look at relevant information such as card transactions or credit balance and most importantly, take action.

Credit card portal dashboard

Pay and swap between cards

Detailed usage summary

Search and filter transactions

Responsive all the way

Modular and scalable components

Responsive design for the web is a given nowadays, but by enforcing modularity we ensured the user experience remained consistent across devices via reusable components and scalable layouts that also made developers lives easier.

Mobile first designs

To check interactivity on mobile devices, specially since input and interaction methods are inherently different, I crafted quick functional prototypes to test around, gather feedback and iterate. Below is an early exploration focused on account validations.

Account registration mobile validations prototype

Surprisingly, those “quick and dirty” prototypes helped us iterate designs more efficiently by getting business input and validations into our process earlier and faster.

From sketches to production

Prototyping, testing and communicating ideas

When discussing new functionalities, sometimes my workflow was to sketch rough wireframes and then make conceptual low/mid fidelity prototypes to test for usability issues early and spot feasibility challenges before moving into UI design.

Initial ATM locator sketches

Another practice that I tried to enforce whenever possible was to prototype with real data. In these examples to mock an ATM locator I pulled free (and very real) ATM data from Google Maps API into an Axure prototype for quick “guerilla” testing.

ATM locator PoC prototype

For us, the purpose of prototypes was to communicate, validate or invalidate an idea as inexpensively (money, time and effort wise) as possible without getting attached to it in the first place.

Production-ready ATM locator mockups

Following several iterations between doodles and production, I was very proud that the ATM locator was launched and later adopted across Citi’s entire digital ecosystem.

Looking back

Project outcome & reflections

Working on a large scale banking product always comes with challenges and thus learning opportunities. A particular one that our team faced was the strict chain of command regarding approvals, rules and regulations, which often leaned towards a suboptimal digital experience.

To overcome this we strived to understand how VoBs (Validations of Business) worked by teaming up with BAs and Legal. Oddly enough, knowing the system constraints firsthand allowed us to "bend" rules in some cases or encounter loopholes that acted in our (and user's) favor.

The key was to keep communication and ideas going because at the end, regardless of job titles, every one of us wanted to provide a better experience for customers.

This was demonstrated by the embracement of design thinking methodologies by senior stakeholders from the bank, kickstarting conversations about replicating the effort across other projects and initiatives at Citi.

Date

Mid-2017

Platforms

Web — Responsive

Tools

Axure, Sketch, Abstract & Zeplin

Team

Ana Garza — Product Lead

Sandra Mendoza — Visual Designer

Juan Gaviria — Visual Designer

Jorge Uribe — UX Manager

Sergio Lizárraga — UX Designer

Want to chat?

Let's get in touch