Client: Santander.
Platform: Desktop, Tablet, Mobile.
Project duration: 18 months.
Methodology: 2-week sprints and monthly demo releases. Daily status meetings, planning and reviews. Monthly Workshops.
Software tools: Figma, FigJam, Adobe Illustrator, Adobe Photoshop, Miro, Jira, Trello, Google Forms, etc.
The context
I joined this project a month after it kicked off. The initial idea was that I would be in charge of the UI design, using Banco Santander’s design system, Flame. Due to my experience, I was finally assigned as UX/UI Leader.
Banco Santander wanted to improve dispute management. By dispute I mean any kind of issue that a user may have when handling banking transactions. From a duplicate charge, to an unclear refund, scam, theft, etc.
They needed to optimize costs in this type of procedure.
Squad
- Two Product Owners
- Two Product Managers
- Three UX/UI Designers
- Five devs (Frontend, backend, iOS, Android…)
- One UX/UI Leader (me)
Our UX/UI team, based on the needs outlined by the client, got to work to propose the appropriate experience for this context. I’ll tell you about it below:
Approaching the problem
Research goals
The first thing we did was to conduct some UX research on the problem to be solved, in order to understand it as precisely as possible. Among others, we asked ourselves the following key questions:
- How is Banco Santander currently managing these disputes?
- How do Banco Santander’s customers feel about the way their disputes are currently handled?
- To what extent do Banco Santander users trust them to solve their issues?
- How do competitors currently handle this type of issues?
User interviews
To get the best insights, we designed an online questionnaire to interview current and potential users. We put a lot of effort into defining the right sample. We needed to test our hypotheses:
Style: Online interviews (Google Meet).
Number: 6 people.
Duration: 15 minutes each.
Interview type: Qualitative interviews.
Some of the questions we asked:
- Do you use Apps to manage your banking transactions?
- Which banks do you use digitally?
- Have you ever had a serious problem with your bank/s?
- What do you think about artificial intelligence?
Insights & Solutions
After a series of meetings with stakeholders and taking into account the crucial insights gathered during the research phase, we decided that the user experience had to be consistent across the different communication channels.
For this reason, we designed an omnichannel experience that would include the point of view of a bank employee managing disputes (Contact Center) and also the equivalent user journey for customers through any device. The process could be resumed at any time on any of the channels. Through Artificial Intelligence we would solve the most common disputes, reducing the bank’s costs, which was one of the main KPIs.
Design System (Flame)
For the final UI design we used Banco Santander’s Design System. Here you can review some of the components that were used for the composition of the different screens that make up the whole experience.
Weekly meetings were conducted with the designers of Santander’s Design System to validate our designs.
Having the creators of Banco Santander’s Design System offered many advantages. This is a phase that I really enjoyed. It allowed us to ensure that we were moving in the right direction. Besides, it almost always pushes an evolution in the Design System.
Below are some examples of real “Flame” components.
UI Design (NOT final)
Although the screens I am showing you below are not necessarily the definitive ones, you will have a clear idea of the designs we made and the purpose. I will explain the whole experience we designed for this challenge.
01. Opening the Dispute
– App: Here are the key moments of the experience and its resulting screens.
- We select the bank transaction/s on which we want to open a dispute.
- We ask some key questions about the issue. The tone and narrative of the questions are key in building the experience. The purpose is to build customer confidence in a potentially stressful situation. Artificial Intelligence feeds on crucial information to provide automated and contextual solutions.
- The fourth screen (‘04. Block Card‘) shows the card(s) blocking phase. This prevents the problem from escalating.
- The client provides the documentation and evidence available to clarify the facts and thus facilitate the resolution.
- A complete summary of the issue is displayed to make sure that everything is OK. You can modify, add or remove anything you want before proceeding.
- The new issue is opened and is ready for processing.
– Web: The user experience remains consistent across all devices.
– Contact Center: Issues that require a physical agent will be handled from the Santander’s Contact Center. The aim is to meet the needs of older or less tech-savvy customers or those who prefer to talk to a person who will guide them. For these user profiles we designed this UI on the Contact Center side. The process is once again pretty much the same as the two previous cases (App and Web).
02. Tracking the Dispute
– App: During this phase of the experience, we ensure that customers know in real time how their issues are being handled. We are as transparent as possible to retain trust and engagement. This was another key KPI for the project.
– Web: Again, the experience remains consistent regardless of the device used by the customer. This makes it easier for the client to immediately resume the process at the point where he/she left off. The goal is that the client understands at all times what is going on and feels safe and assisted in the process.
– Contact Center: The contact center agent must always be aligned with the customer needs and understand at what stage of the dispute he/she is in. That is why experiences are equivalent.
03. Closing the Dispute
– App: In the last step of the experience, the resolution of the problem is clearly reported.
– Web: Again, the experience is the same regardless of the device used by the customer.
– Contact Center: The contact center agent has some extra information, but in essence the experience stays the same.
Other screens from this project (slideshow)
Outcomes (KPIs)
The main KPIs for this project exceeded the Bank’s own expectations. I cannot give specific data due to confidentiality. Currently our issue management tool is an international part of the Banco Santander Suite. Our project was used internationally, as part of a much larger whole. My experience as a UX/UI Leader was strengthened with this project and I am very proud of what we achieved.