Banking
Released
Desktop
Santander Web Redesign
A platform left behind but very much in use needs to reach current standards. After a closer inspection, a lot of potential was in sight but not without a great deal of work too.
This case study was made with AI assistance for style, grammar, and length corrections. Everything was proof-read by me and corrected in instances I deemed necessary. All general and particular ideas presented are completely my own.
Problem
Santander México established a small UX department in 2018 that aimed to improve its digital experience with a mobile-first framework. It meant that the desktop banking experience (SuperNet) always was a second priority in the team and while most efforts were in improving substantially the mobile app, SuperNet was falling behind and maintaining its functionality and design stuck in an era before any design thinking was implemented.
SuperNet was Santander's desktop web platform and in 13 years, the website had not received an update in user experience, so a redesign was in dire need.
In a previous moment, a team tried to make a solution with severe limits in time and budget, which consisted of building the most used functionalities from the ground up and the rest taking the already built mobile user flows and "mounting" them directly for minimal effort transitioning the experience. It proved too shallow a task and too few hands at the moment, so it was quickly archived.
My UX Lead, Guillermo, and I continued the project after a pause of 2 years with a similar scope and goal: We needed to leverage what was already there in terms of functionality and create a new experience tailored for desktop that could meet the standards that our mobile app already set for our users.
SuperNet is an important part of the digital experience that our clients use for daily and private banking, but its features and overall experience have never undergo UX revisions and improvement proposals, remaining mostly untoched for years. The result is that SuperNet suffers from confusing interactions and navigation that create a severe entry friction for new users and a cumbersome and slow experience for our current users.
In its current state, we have plenty of room for a clearer and straightfoward experience on par with our mobile app that can have a great impact in growth, overall user perception and the first step towards an omnichannel experience.
Research
Santander Web was a challenging case that could only be built with thorough research, that's why we needed to have constant tests and analysis from the beginning to the end.
While the first attempt to make Santander Web was paused and couldn't get too far, the research made was very valuable and a great starting point since it already had a discovery of our desktop users and a detailed journey map. So, we continued our analysis with Expert reviews and Heuristics evaluations for both SuperNet and the archived PoC for Santander Web.
We got 2 key takeaways from this initial analysis:
SuperNet had plenty of pain points across the platform that, at first glance, seemed to be issues with interaction design and copy. But once we mapped them, it was clear much of the problems had to do with its information architecture, as much of its features were hard to reach and in places that had no contextual sense for them to be there, hence the efforts to create interactions that could solve this underlying issues.
Our PoC did fix some problems with the information architecture but the way flows and interactions we designed didn't follow desktop usage conventions, resulting in some of the steps being overcomplicated for mouse and touchpad use, and some awkward navigation patterns.
With this information, we understood that our work wasn't as simple as listing features already available in the back-end and connecting them with the user flows already designed in the mobile app. We also needed to completely overhaul the architecture, navigation, and information design to really have a functional platform our users can navigate and understand with ease. The question was "How?"
There was just one piece of the puzzle left and it was a competitor benchmark, but there was a caveat: Unlike our mobile app that serves almost all of our clients, our desktop channel is used by a reduced portion of our base so we needed to figure out what and how to deploy our features on screen.
While doing our benchmark, I started to recognize some patterns: the hierarchy of elements was telling a story and we needed to crack it. So we conducted a visual hierarchy analysis and identified a common layout:
This hierarchical structure analysis gave us great clues about our competitors and what type of users they were targeting in their web apps.
All banking platforms gave the user direct access to its current products for detailed info or movements. Next, our competitors had an "Operations section" that offers quick actions to a wide array of features, depending on the needs identified for their users.
e. g. In one case, this Operations section consists of a calendar and various actions for programable transfers and purchases. Something made for a kind of client that needs to have control over its balance and in-&-outs of money. One can think of a small entrepreneur or someone involved in sales.
These insights, regardless of how precise they may be, gave us the guidelines we needed to start working on our proposal.
Thanks to our previous research, we already knew that our desktop users are high-income and high-net-worth individuals who make extensive use of our daily banking features with more than one product and, in a minor degree, use private banking features. The new channel could be a place to manage your daily operations but also give you easy access to our private banking platform.
Approach
The first screen we came up with was the homepage. We tried to maximize the use of space desktop can provide, so we started with a product list, something our mobile users already see first thing after login, and then added the rest of elements according to our structure research. We even had the space for informative and promotional offers that also helped giving a visual divider for our operations and header.
Our homepage was built using the main blocks we saw in our research and adapting the content to our client base.
We focused in giving a full list of products our clients have, divided into sections for a clearer distintion, as our users can have up to 5 different types of products. On the right side, we populated with common daily banking actions such as payments transfers, and statements. We also added widgets for quick transfer and payments for the most common contacts and services.
After a month of exploring and refining wireframes with different structures and compositions, we designed master screens that could help us adapt any feature in our desktop experience without refactoring too much of the original flow in mobile, and that could also lay the foundation of new features from scratch.
The use of 2 sections for our content gave use enough flexibility to accomodate almost any flow we already had and was simple enough to adapt for our back-end with minimal effort. We complemented this structure with pop-ups for the last mile in special cases.
This two screens make up the main experience of the platform ready to be populated by features and our design system. But after adapting our first flows from mobile we quickly realized that our components were never tested on desktop and found out that we needed to create a new design system solely for desktop.
It took adapting existing components, creating new ones and coming up with new rules for our design system that could comply with conventions and accesibility standards in the desktop platform. This time great ideas came from show-and-tell sessions we had with other designers, who gave us their insights and inspirations that would nourish our design system.
Examples of components applied from the new design system built exclusively for SanWeb.
Further development
At this point, SanWeb got wind now that its foundation was built and attracted the eye of our stakeholders, team managers and other designers in the team. With our first journeys built and ready to test, the project took a shift into a bigger scale:
Guillermo took the role of supervisor and a task force entered the project with designers that were formely commisioned to daily banking features in the mobile app. They brought their expertise and knowledge of the full scope from their respective features in order to translate the mobile experience into SanWeb's own.
From this point, I transitioned to a new project before the project entered usability testing and developer hand-off phases. However, Our work proved of value for everyone involved in the project:
Our UX Research team performed 2 important user testings with results that validated our approach across the board with only small recommendations for improvement. The experience delivered to our users is almost the same as the one drafted by the team on our first drafts.
We could met the stablished release dates thanks to our engineers and the smooth hand-off made with the refactoring approach of the back-end in mind.
Our metrics reflect the great impact SanWeb achieve in the business goals that our stakeholders expected from the channel.
Results
While I didn’t have access to reports with direct analytics, there are a couple of metrics that were reported to the broader team:
40% average reduction in completing tasks conversion rates within the first month of the website launch.
48% increase in the perception of our desktop experience vs our old platform.
Positive feedback from users regarding the improved usability and visual appeal of the website.
Santander Web also won a prize for best web design for product or service in the Clap Awards 2024, conducted by Veredictas, a foundation that works with more than 180 design associations all around Ibero-America which forms the judging committee. This award makes me feel immensely proud not only for our project but for all the UX team in Santander, as we also won another award in the same selection: SuperMóvil won in the category of Best User Interface Design for a Mobile App.
Key takeaways
With such complex structures already in place, having always in mind what's already there and how to repurpose it for a better experience can be challenging but makes a great roadmap for what we can and can't do to optimize costs and efforts.
Collaboration and great communication with development and bussiness teams makes it easier for everyone to get a clear picture of what we want and how we'll work to make it real.
Endeavor into drastic but necessary changes can be a rough path and have a lot of friction from all stakeholder but it's the first step of a long and rewarding investment.