top of page
UX DESIGN INTERN AT SANTANDER
Santander
Introduction
Designers: Samuel Custer, Philip Scheid, Nick Di Stefano, Kerry Whiting, Jennifer Bruni, Jason James
Product Managers: Joe Turano, Taylor Fisher
Role: UX Design Intern
Skills: User Testing, Design Systems, Wireframing, Prototyping
Timeline: 10 weeks
Santander is a bank based in Spain known for its global reach into Europe and the US. Over the summer, I worked with the American user experience team to enhance the authentication processes of both mobile and online banking applications. The goal of my project was to help users log on and off their applications easily and securely.
Context
One of the most challenging aspects of authentication is balancing user experience and security. While you want to provide your users with a delightful experience, it’s the ultimate pain point if they become the victim of fraud. This summer I worked with the authentication team composed of both product, engineering, and design to address customer problems.
The Problem
I wanted to understand the overall customer sentiment behind the logout and session timeout in our digital mobile & retail banking experiences. Based on the data from our net promoter scores, we are realizing that many of our detractors complain about our authentication experiences.
I wanted to leverage the customer comments to identify outstanding problems and potentially address them by making strategic heuristic adjustments to the experience.
The Solution
I slightly adjusted the timeout and login experience of online banking so that customers would be able to continue their online banking experience easily and quickly.
I created an alternative login screen for mobile banking that simplifies the experience and encourages customers to use biometric authentication (a more secure and user-friendly option).
Customer Research + Insights
I was tasked to analyze the voice of the customer database which is composed of the comments submitted by customers through the platform’s surveys. I specifically searched for comments involving login, logout, and session timeout within the last 6 months.
After looking through the database, we realized it would be good to analyze both the online desktop and mobile experiences to see how the problems manifest on each medium. Here are what some of our customers had to say about the authentication process.
Redirected Logout Page
Marketing page without a login option
“Couldn’t find a confirmation statement saying: ‘You have successfully logged out.’” - Jim, 37
“When I log out it goes to an ad for Zelle instead of screen to log in again. Really makes the site difficult to use” - Stacy, 28
“I logged out from personal online banking. I realized I needed to login again. But could not find a login link. Seems one should be there or be more obvious.” - Jesse, 48
Mobile Login Page
.png)
“Only issue is with occasional auto log out. This makes Face ID users hunt down their passwords.” - Sean, 32
“There is not any indication that I successfully logged out which is very unsettling.” - Tiffany, 22
Problem Statement
How might we provide online banking users a sense of success and security when logging out?
How might we provide mobile banking users a quick and simple way to log back into their account if they need to complete another task?
Key Requirements
Ideas - Online Banking
Confirmation Banner
Iteration 1
Redesigned Confirmation Banner
I wasn’t able to find a confirmation banner in our current Figma design system and previous Sketch library, but I did see a confirmation banner on the Global Design System. However, I opted to design one from scratch to provide another option. I designed something that I think would fit closely with the style of the site and the other components.
Iteration 2
Redesigned Confirmation Banner w/ Login Link
I decided to add another option on the confirmation banner. This was based on the heuristic of “user control and freedom”. I wanted to give users the ability to quickly log back into their accounts if they realized they made a mistake.
Login Widget
Home Website Navigation Bar
This is the navigation bar that Santander uses on their public website that allows users to login onto their online banking account. I was tasked to create a similar experience on the redirected marketing page.
Treatment 1
Current Login Widget
Current Login Widget Expanded
At first, I wanted to use what was already on the Santander website to maintain consistency. I simply took the login widget from the navigation bar and used it on the marketing site.
Treatment 2
Redesigned Login Widget
Redesigned Login Widget Expanded
After seeing what this first treatment looked like, I realized that the spacing of the icon and call to action was violating visual best practices in terms of spacing and alignment. I decided to come up with an alternative.
Treatment 3
Hyperlink Login
After looking at the second treatment, I realized that it was too similar to what they had on the site and would violate heuristics in terms of consistency. Therefore, I thought I could completely change the visual design to a link instead which takes them to a separate login page.
Final Design - Online Banking
Confirmation Banner
Final Confirmation Banner
After talking with the design team, I once again went with using a component that was already in the global design system. Although most of the components in use are not global components, I decided that this was more systematic and more feasible for the engineers to use something that has already been defined.
Login Widget
Final Login Widget Design
During the design critique of my redesigns, I laid out the importance of maintaining consistency and a good visual layout. As we talked through the different treatments, we actually went on the current website and adjusted some of the HTML to quickly prototype what an alternative design would look like. This was the final design that I choose because it was a developer-friendly solution that maintained consistency throughout the website experience, solved our user problem, and accommodated the business needs.
Ideas - Mobile Banking
Logout Toast Confirmation
Logout Toast Notification
I decided that it would follow the current style of a toast notification and we could easily add a logout confirmation to the mobile experience. This would quickly and efficiently solve the problem ensuring that users feel that they successfully and securely logged out of the mobile banking experience.
Alternate Login Page
I worked under the assumption that biometric authentication is better than traditional login because of its advantages in UX and security. I assumed that if a user has a biometric or a PIN login set up, they wouldn’t want to use the typical id and password. Because of this, we wanted to create an alternative screen that would make it easier to use biometric options. Furthermore, I didn’t want to automatically use faceID right away because it violated the iOS interface guidelines.
Iteration 1 & 2
List Format
List Format w/ Icons
I initially went with list formatting because I think it’s the most aesthetic and minimalist design. It clearly lists out the possible login options without overloading the user with too many options. I opted to add the icons because it would be an instance of recognition rather than recall.
Iteration 3
Triangle Format
After looking at the design, I realized that there wasn’t a clear distinction between the options in terms of grouping. Analyzing the design from a perspective of continuity and grouping, it seems that all of the options are somewhat related to each other. Because of this, I formatted the options differently.
Final Design - Mobile Banking
Logout Toast Confirmation
Final Logout Toast Notification
As mentioned above, this was a quick simple fix by incoporating an existing component to solve a user problem.
Alternate Login Page
Final Alternate Login
I decided on this layout because the spacing of the different options and the use of icons would work effectively to present the user with different options while encouraging them to use biometric login. Since this is a drastic change compared to our mobile current login experience, I wanted to understand what users would think about this new design compared to our current experience.
User Testing - Preference Testing
We wanted to determine if a user who has configured biometric or PIN login would prefer a login experience that emphasizes those options. We’ve conducted a preference test for the login screen with our current design and an alternative. When taking part in a preference test, a participant is shown a number of design options and asked to choose one. These tests are commonly used to measure aesthetic appeal, but participants can also be instructed to judge designs based on their trustworthiness, or how well they communicate a specific message or idea.
Control Login Page
Variable Login Page
These are the screens we used to test 50 participants of their preference in login experience. We would show the variable login page to someone if they have configured biometric or PIN login.
Preference Test Results
Based on their responses, the redesign is performing better, and the difference is 99.0% likely to be statistically significant. This means that you can be very confident that it is actually prefered, and not performing better due to random chance. However, we need to understand the thinking behind this choice.
“I am more familiar with this design. Also most users probably prefer the traditional way of logging on. Only select users would want to user touch or pin.” - Addison, 46
Control Login Page
This is the control login screen. It is quite busy in terms of the amount of information. However, to users familiarity and a range of options were the biggest advantages.
“The first design was a little too busy. It’s uncertain that if I touch it will auto log me in. Whereas you can clearly see the option to use a pin. In the option I selected, you can see the options and choose your route.” - Jack, 32
Variable Login Page
This is our tested design. It was much more minimalistic. We learned that simplicity and clarity were the biggest advantages.
We realized that there may be some value in our redesign and our next steps would be to potentially conduct additional research on the login experience. These could include a live A/B test of the new login experience as well as a competitive analysis of how other banks are handling their authentication experiences.
Outcome
Login Widget & Confirmation Banner
The public website is handled by the marketing department which has its own developers so it isn’t as simple as talking to the PMs in the digital team. I needed to set up a meeting with marketing and explain the problem and work towards making these small adjustments. The adjustments on the public site (login widget and confirmation banner) were eventually added to the developement pipeline and executed on the next update.
Logout Toast
The toast notification was implemented quickly and easily.
Alternative Login Screen
There seems to be an opportunity in improving the login experience shown by the preference towards our redesign. I wanted to conduct additional research on the mobile login experience and eventually launch a live A/B Test of the implementation. However, the alternative login screen was eventually shut down because the PMs decided that we could easily solve this problem by automatically enabling biometric authentication without a customer action. Because of this, they decided that there isn’t any value in the alternative login page.
Learnings
What I learned
-
At first, I had the assumption that the best designs had to be original, creative, and made from scratch. After studying, taking some extra time to learn the design system and how to use the components and icons, I was able to work more efficiently and design better experiences. Leveraging other people’s work and design allowed me to work more efficiently and more creatively. I even got to the point where I contributed 5 components to the design system.
-
It’s important to understand the history and greater context of a product experience. This would help me make sure that I’m addressing the right problems to ensure that I’m adding value to the product. Furthermore, that added awareness will empower me to make faster design decisions without needing additional guidance or direction from other team members.
What I would do next time
-
I think that many of my designs were small adjustments to the current experience so I didn’t necessarily put all my designs through the validation process. However, I do think there is value regardless of how low fidelity, in quickly testing your designs to ensure that they are as clear and effective as you assume them to be.
-
It’s absolutely important to get other crucial advocates on board with our work before and during your process. For example, I should've contacted marketing earlier so that they would have known about the problems I identified about the public site and maybe I would've been able to get more buy-in for my solutions. This would encourage them to move things along and create tickets for the developers to make those adjustments.
Impact
What's next?
bottom of page