Santander

Online Banking

    The objectives of the project were to develop a set of propositions which would guide the next phase of Santander Digital Transformation programme. An extensible development framework was needed which would broaden and deepen the relationship with customers and guarantee a successful outcome for future initiatives.

    The main business objectives were:

    • Simplify the interactions without amending core functionality
    • Encourage users to explore all areas of the Online Banking, especially when new sections are introduced
    • Accessibility guidelines
    • There was a total access of 20% coming from Mobile devices, it was more than clear the need of a Responsive design for the Online Banking

    The process

    Our team adopted a blended Agile/Lean UX framework. The team consisted of Product Owners, Business Analysts, Web Developers and UX Designer. We started by co-creating a set of hypotheses with design examples which were tested with key customer segments for appetite.

    Ideation

    Working alongside with two Business Analysts, I also took part of the ideation phase. We began this sizeable project by taking sceenshots of the entire online banking and generated an user map. This helped us to identify the pain points and how we would approach the redesign.

    Santander Current screens

    Digital Design Guidelines

    Santander also runs several projects across different designers and agencies. It became evident that a level of consistency was required to promote a seamless experience within the Online Banking. Before starting the Design phase, I worked on the new Digital Design Guideline, defining accessible colours, Typography, font size, grids and components.

    The key output was an extensive design guideline document. This document detailed every interaction and design element; foundations of the logo, colour and grid, individual components of navigation, input fields, and calls to actions. Resulting in a complete guideline document that will provide direction to internal and external design agencies.

    Santander Style guide

    My accounts

    The scope of the first delivery was to provide extensible enhancements to My accounts section, addressing multi-device solutions and touch optimisation. These were to minimise impact on customer relationships.

    Based on two rounds of qualitative research, five enhancements were decided upon:

    1. Touch Optimisation
      Ensuring useable on touch devices
    2. Actions
      Providing key banking functions contextually with accounts. We adopted the concept of 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 for that package.
    3. Navigation
      Redesign the IA of the main navigation, as it became clear during the user testing that customers were finding the menu structure too overwhelmed and options were not clear.

    Following the concept of cards, I proposed a new way of displaying the accounts available for customers through a simple and clean design. Due to customers complaining that My accounts old page was too overwhelmed and confusing, we reduced the number of features, grouping them by the most important and used ones.


    My accounts


    Contact us

    Another part of the project scope was to provide enhancements to the Contact us section, addressing multi-device solutions and touch optimisation for phone numbers. It became clear during user testing sections that customers were not able to find the correct phone number.

    I started with a low fidelity mockup in order to adopt the same card concept used on My accounts page to make sure consistency was being applied throughout the entire app.




    contact us

    User testing


    We tested the prototypes with various types of existing customers. I watched the interviews taking place, wrote notes throughout and explored how customers would react with the new functionalities that we were introducing to the app.

    New navigation structure

    We also tested the new navigation structure. Customers were more comfortable with the proposed navigation. I also took the opportunity to ask for more feedback from customers in order to define the new structure.


    User testing

    Debrief

    We had a wrap-up meeting where we discussed all issues and pain points that had come up during the testing. From there I made the final tweaks to the design to get it ready for development phase.

    Development

    I always work closely with Developers as one integrated team from the start. This also includes Product Owners, who are often involved in regular reviews and standups. I don’t wait to validate feasibility or understand what’s possible. Instead, I integrate business, design, and technology perspectives into projects from day one. The new Santander Online Banking would not have been possible without this approach.

    Front End development

    Being a Product Designer with Front End development skills gave me the opportunity to educate developers and introduce best practices for the Front End side of the project. I introduced SMACSS, BEM, Flexbox and Bourbon Neat grid, and also Accessible code (Aria and other special tags).
    Back End developers saved a good amount of time due to the help that I provided on this phase. We successfully delivered the first scope of the project, which was the Contact us section.

    Results

    We took Santander’s MVP product and worked with customers by improving the product experience, that is engaging and easy to use, in harmony across touch devices. We accelerated the product development substantially to achieve velocity, and regular feature-packed releases.

    Our solution was all about managing your account easier and accessible. Next steps, new features and functionality integrations.

    Final product

    Back To Top