Santander

Online Banking

    Santander project

    Santander has grown up from its local beginnings in 1857, in the small northern Spanish city of Santander, to become a regional, national, then European and finally, a global player operating in 10 main countries. Today Santander is a large retail and commercial bank based in the Uk, and a wholly owned subsidiary of the major global bank Banco Santander.

    All information in this case study is my own and does not necessarily reflect the views of Santander.

    Project Objective

    The project is part of a Digital Transformation programme that is re-designing Santander’s online digital banking and native banking apps for personal customers. The bank is currently transforming and modernizing the Online Banking experience by migrating many basic services to digital platforms. The project included introducing new patterns, additional functions and evolving the digital brand, for which guidelines were written.

    Team & Role

    I was contracted by Santander UK as a Product Designer to be part of a team working on the online digital banking re-design. My role was to undertake competitive research, test and evaluation of prototypes, and visual design. Working within an agile environment, the team consists of 1 Product Designer under the leadership of a UX Lead, 3 Full-stack Developers, 2 Business Analysts, 1 Product Owner and 1 Scrum Master.

    In this role I had responsibility for the following deliverables:

    Project Kick-off

    The project began over a series of meetings with key stakeholders and team members, to discuss business objectives and the roadmap assumptions. During the week we defined:

    • Our Design workflow and tools to collaborate and work with Developers
    • Improve the user experience without compromising some core functionalities, including payments and OTP (One Time Password) authentication

    Heuristic Evaluation

    We did a Heuristic Evaluation of the Santander Online Bank taking into consideration performance, accessibility, traffic, to get a solid understanding of the general user flow, styles, and to identify usability issues associated with the user interface.

    santander current screens

    Learnings

    It was important to make the research as a collaborative task involving product owners to establish a strong working relationship with the team and align interests. It helped to set a goal for the team and put everyone on the same page, so we all knew the impact that our work would have.

    Feature prioritization

    Based on the learnings from the stakeholders and key team members interviews, I conducted a team voting exercise to prioritize the features that should be delivered first. I also included a decider (in this case our Product Owner) which is the person that will influence the final vote and the current sprint goal. Team members then silently vote on pages and features that were in our backlog. The team agreed to choose three features to be worked during the initial phase, so everyone was given two votes. Once we had a clear view of the winners, the Product Owner voted on the features she wanted us to work. Then, we split the items into two columns, defining our backlog and features to be worked on the current sprint.

    feature backlog

    The key features to be worked during the initial sprints were:

    santander first sprint

    Key takeaways

    The feature prioritization exercise and the key team members interviews created a strong synergy throughout the team, and also allowed us to generate many ideas as a team. Stakeholders felt comfortable with the decisions as they were always involved in the decision-making process.

    The exercise helped the team to:

    • Share the team’s mental model, as valuable tangible artefacts that document the team history and process. Anyone can glance at the wall and understand what the team collectively agreed on.
    • Remove emotion and provide structure, as the team can consistently make informed decisions regardless of the emotion or bias in the room.

    Wireframe & Prototypes

    After understanding who our users were, their needs, how our competition is working, and defining our initial strategy, we began our ideation process. The team started to explore possible solutions to “My Accounts”, “Transactions” and “Help & Support” pages.

    Decide

    The team voted on the best ideas, and from there I started to prototype by focusing on usability in order to test it with users. This exercise allowed the team to hear each other’s points of view on their own designs.

     

    santander wireframe

    User Test

    We used an external agency in London to help us recruiting 8 potential users to come in for a formal test. The prototype demonstrated our ideas and some assumptions for our target pages. The participants took part in individual hour-long sessions, and were based on the following characteristics:

    4 x Santander customers who:
    • have used online banking (not mobile apps for banking)
    • have a Santander credit card
    • 1 have tried to use the online Help & Support
    4 x non-Santander customers who:
    • have used online banking (not mobile apps for banking)
    • are not customers of Santander
    • 1 have tried to use the online Help & Support

    The aims of the test were:

    • Understand if customers are likely to be put off by one page having a different pattern to other pages in the site
    • Observe reactions to the newly proposed features
    • Identify any usability challenges or barriers that exist in the prototype of the online bank so far

    I created the test script and watched the participants using the prototype while documenting a detailed list of all usability issues identified during the test.

    User testing

    Key findings

    The proposed designs were seen as ‘crisper’ and easier to read, navigate and use. People did not have any difficulties with the proposed changes. Most participants did not consciously notice that the new sections had a different design to the rest of the site. When it was pointed out to them, people generally preferred the new sections.

    1. Users generally found the prototypes easy to use
    2. The new features and design were positively received
    3. They found the prosed online Help & Support centre cleaner and easy to use
    4. For Transactions, we had to reconsider how to present the different options for choosing the services, as users had difficulties in finding them through the dropdown.

    The Product

    After iterating and digesting the learnings from the user testing, the design process started and we began to build the experience.

    Design Guidelines

    During the redesign process, I created a document for design guidelines that streamlines communication between designers and developers. This guide covers colours, type hierarchy, and a start to UI components. Some examples below:

    Santander design guidelines

    Help & Support

    Online Help & Support channels were all centralized to one location. This allows the customer to:

    1. Reduce the number of clicks to find support for a specific matter.
    2. Improve navigation flow by grouping similar types of channels into groups.
    3. Quickly call a number via touch optimization on mobile.

    contact us

    santander mobile help and support

    My Accounts

    I adopted the concept of UI cards in order to show the accounts available for the customer. Depending on the package hold by the customer, the page would display all accounts available. This contributed to;

    1. Reduce the number of features that were not being used.
    2. Make important and most used features more visible and prominent.
    3. Customers are able everything happening in their bank account via the notifications engine.
    4. Use UI cards concept to display the accounts available, making the navigation simple and highlight important information, such as account balance.

     

    My accounts

    Conclusion & next steps

    Keeping current functionalities, while improving the user experience and aligning new elements to the online banking was the project’s biggest challenge, which I found I could overcome by including stakeholders and key decision makers of the team in all workshops sessions to align interests and establish a strong working relationship with the team.

    Iterative user research and prototyping led to a final product that reduces customer pain-points and increases brand reliability. Our solution allowed customers to easily manage their account and making it accessi§ble to all devices. Currently, the team is working on improving interaction elements based on analytics tracking and continued feedback review.

    Final product

    Back To Top