The objective of the Online Banking project was 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
- Accessibility guidelines
- There was a total access of 20% coming from Mobile devices, making it more than clear the need of a Responsive design for the Online Banking
Our team adopted a blended Agile/Lean framework. The team consisted of Product Owners, Business Analysts, Web Developers, UX Lead and UI Designer. We started by co-creating a set of hypotheses with design examples which were tested with key customer segments for appetite.
We began this sizeable project by taking screenshots of the entire online banking and created user flows. This helped us to identify the pain points and how we would approach the redesign.
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 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.
The scope of the first delivery was to provide extensible enhancements to My accounts section, addressing multi-device solutions and touch optimization. These were to minimize the impact on customer relationships.
Based on two rounds of qualitative research, five enhancements were decided upon:
- Touch Optimisation
Ensuring useable on touch devices
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.
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.
Using UI cards pattern, I presented a new way of displaying the accounts available for customers through a simple and clean design. One of the feedbacks that we received from customers was that the current My accounts section was too overwhelmed and confusing. Our first approach was to test a reduced number of features, grouping them by the most important and used ones.
The outcome was very positive and after some corrections, we were ready to move to the UI layer.
Another part of the project scope was to provide enhancements to the Contact us section, addressing multi-device solutions and touch optimization 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 wireframe in order to adopt the same card concept used on My accounts page to make sure consistency was being applied throughout the entire app.
We tested 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.
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 the development phase.
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 stand-ups. 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 some 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.
We accelerated product development substantially to achieve velocity and regular feature-packed releases.
Our solution was all about allowing the customer to easily manage their account and making it accessible to all devices. Next steps: New features and functionality integrations.