Santander Bank

(Mobile banking , App & Online banking)

Agency : Kin + Carta (K+C)

Tools used

Figma, Sketch, InVision, Zeplin, Miro, ProtoPie, Analytics, LookBack, AxureRP & Usertesting.com …

I’ve worked with?

Project Managers, Stakeholders, BAs, Developers and Scrum masters

Design Team

There are multiple teams, but I have worked on these projects alone. I also collaborated with other UI designers for the Design system.

Time scale?

Worked for 1.5 years on multiple projects and followed the Agile process.

Project 1

Make Santander products available for all App users.

Overview

Santander UK aims to make their website and app better for customers. Right now, it's a bit tricky to find things like credit cards and mortgages on the Santander Mobile/Tablet App. Santander knows this and wants to make it easier for users. Santander UK aims to make their website and app better for customers. Right now, it's a bit tricky to find things like credit cards and mortgages on the Santander Mobile/Tablet App. Santander knows this and wants to make it easier for users.

  • 1. Understanding the issue

    2. Research and gather data

    3. Prioritise the issues & work (problem statements)

    4. Pitch the ideas to stakeholders

    5. Wireframing the solution

    6. Rapid prototyping

    7. Test the concepts with the actual users and get feedback(Validating the designs)

    8. Workshops and testing sessions when required

    9. Iterate the wireframes quickly and test the prototypes

    10. Check the data before and after to measure results.

  • We had a team of about 15–20 engineers, including BAs, testers front-end, back-end and full-stack developers based in London.

    We also had a remote team based in India of about 5-8 engineers.

    + 1 designer (that’s me)

  • I led the whole design process from start to finish. This included collecting information (through user testing, feedback, and analytics), coming up with and testing ideas, researching users, creating wireframes and prototypes, attending meetings with stakeholders, participating in sprint calls with the development team, and making improvements based on business goals and user feedback.

Stage 1 : Scope & Understanding the issue

I facilitated a brainstorming workshop with the team to uncover issues and challenges experienced by individuals.

The session yielded the following revelations:

  1. A significant number of users cannot find Loans, Credit cards, or any other Santander products when they log in to the app.

  2. Some users are reluctant to access the web to apply for loans through the app.

  3. Users are seeking upfront information regarding their eligibility for specific products, such as loans or credit cards

    Challenges:

  4. Stakeholders want to see what 'good' looks like, along with an MVP version.

  5. The time scale and available sprints are limited.

Stage 2 : Audit & data gathering

App home screen before i redesign

Our focus was on designing a new App. We were, however, also keen to provide quick and simple improvements to the current App. If they provide successful they could potentially be carried across to the beta App.

I started with an unbiased UX performance analysis of the App. Using 100’s of UX parameters to compare against industry leaders and user’s expectations. This helped form an actionable and prioritised list of recommendations, with some of the main areas including:

  1. Users want to see what’s available to them first (personalised products ).

  2. Users like to see how much (credit range) before applying

  3. Users don't want to be redirected to log in again on the website to apply for a loan. (Key pain point)

  4. Users don’t click on the “More” button often unless they want to chat or seek help

Stage 3: Cocepts & User testing

I have gone through the App analytics and the available data gathered from feedback, surveys, branches and customer services.

I’ve used the components from the current design system to design concepts and designs.

Provided few concepts using the existing UI components

Version 1

  1. It’s a complete redesign of the main page based on user feedback

  2. User can see all services and entry point to their products.

  3. User can see their transactions directly and able to minimise the window

Version 2

  1. It’s an improvement to the current version

  2. User can see all the entry point to their products

  3. User can see some personalised banners based on their credit history and transactions.

  4. Added 2 banners and “Apply“ button in the navigation

Stakeholders opted for an MVP approach due to time constraints, ensuring the delivery of essential functionality that effectively addresses the customer's needs.

In my exploration phase, I have delved deeper into various options and produced conceptual designs for testing purposes.

I’ve tested these variants with Santander App users

I presented the prototypes in user testing sessions, and most users are pleased with both options. They effectively solve their issues, enabling users to easily view and apply for products.

The new design addressed the following issues

  1. Users can see personalised offers (Ex: Pre-approved loans or Credit cards)

  2. Users can access the Products quickly (not hidden anymore)

  3. Users can see all the Products and offers in 1 place

Stage 4: Shared findings with stakeholders & Iteration & Handover to Dev team

I shared findings with stakeholders, explaining the rationale behind selecting the final screens. Additionally, I discussed other pain points discovered during the process and circulated all recordings to keep the wider team informed.

I showcased the designs in sprint meetings, addressing developers' questions and guiding them through each screen. I provided the final Zeplin and Sketch links for their reference.

Result

This feature used by

“3 million+ App users.”

All research findings, identified pain points, and conceptual insights will be incorporated into the design of the new app.

More projects

Waitrose RAPID

Santander Bank

Lebara Mobile

Ministry of Defence