Web

Santander bank

Mortgage page redesign

Overview

The challenge is to redesign the actual page (15/nov/2020) of the mortgage page of Santander Bank.

Update: This re-design was made before Santander Bank released their new design system ‘Flame’.

 

Main info

Group 85

Heuristic and design principles

 

Group 88

Analysis,
Information architecture,
Design

 

Group 86

4hours. Individual work

 

Group 87

Figma and plugins
bootstrap design,
contrast a11y.

Heuristic and design analysis

Analisis 2

Section 1. Hero. The design of the “cover” of the page is not well hierarchised with the rest. It tries through the design of a “card” to achieve the effect of a Hero. We find repeated words (1) “Hipoteca Online” that generate visual noise. The “icon-image” of a house and a tablet expresses in a way that is too obvious and at the same time too complex to be understood by the user. The base of the card (2) colour generates a lot of visual weight and the staggered design is not understood.

 

Section 2. Cards. Cards are good for packaging information of the same category, but they generally lead to other types of information. In this case (3), they use the card in the wrong way, framing a sentence.

 

Section 3. Visual order. Badly placed elements generate confusion to the user, the common pattern of this type of information is usually “icon-title-text-button” (4). Here I would advise to use cards. The design also fails to express the idea of a “process” (of the moment the user is in). Lack of consistency between elements, too strong images. (5) Log in information in the middle of a page is not accesible. (6)

 

Section 4. Consistency of icons. The icons have a lot of difference in detail between them, they seem to be taken from different libraries.

 

Section 5. Proximity and Cards. The title is framed (8) isolated from the rest of the information, there is an erroneous use of cards as in section 2. There are also errors in the representation of information in images (9).

 

Section 7. Proximity and Cards. Same problems as mentioned in section 5.

 

Conclusion: There is a lack of visual hierarchy throughout the page and there are serious mistakes in information architecture and perception (Gestalt Laws). There is a serious problem with vertical rhythm, (Law of proximity) the different sections are not differentiated. An erroneous concept of cards is applied. There is a lack of overall consistency on the website. There is no control of visual weight or visual focus.

Original page

Original

Design proposal

Email        Linkedin        Medium        Last update: 22.01.2021