SIMPLIFYING A BANK LOGIN PROCESS:The Co-operative bank

Challenge

I observed an older relative struggling with the login process on the Co-op bank desktop site for a business account. I asked them why they were finding it difficult and they said there were too many unnecessary steps required to log in. Also, they said the site was not very visually pleasing compared to other banks they had used. I decided to investigate the login process further to see how it could be improved and then come up with some new wireframes.

I particularly wanted to focus on cutting down the number of steps required to reach the home dashboard page, which a user gets to once they have logged in successfully. Please note that this was not a commercial project.

Action & deliverables

  • 1.1

    In order to login using a business account, users must first select the ‘Banking login’ button which is located in the top right of the screen (highlighted with a ‘1’ in the image below) and then ‘Business Banking login’ from the dropdown. Before even selecting the ‘Banking login’ button, I noticed some potential issues with it:

    • The contrast of the white text over the orange is poor.
    • A condensed font-type is used. The lack of space between each letter may make the text difficult for some users to read.
    • The button receives no keyboard focus when it is tabbed to. Personally, I’m not reliant on just a keyboard but some users are and may encounter difficulties if they cannot work out where the keyboard focus is.
    Co-operative bank login step 1

    I checked the contrast of the white text over the orange for the ‘Banking login’ button using the Webaim colour contrast checker – please see screenshot below. It fails with a contrast ratio of 2.58:1. In order to conform to Web Content Accessibility 2.0 (WCAG) it needs to have a contrast ratio of at least 4.5:1.

    Co-operative bank login orange button contrast issue
  • 1.2

    Once a user has selected ‘Business Banking login’ from the homepage, a pop-up overlay window appears. This encourages users to download IBM cyber security software. Users can choose ‘Download now’, ‘Learn More’ or ‘Learn more’. However, in order to progress users must either select the close ‘X’ or ‘Remind me later’ button (highlighted with a ‘2’ in the image below). Selecting ‘Remind me later’ means this overlay will not appear every time. However, I noticed that it was displayed during the three weeks I worked on this project. Many users will already have their own cyber security installed and repeated appearances of this window may frustrate a a whole range of users. I therefore felt there could be an option for users to not see this message again.

    Co-operative bank login step 2
  • 1.3

    On the ‘Business Online Banking’ page, users must select the ‘Login’ button in order to progress. This is located near the bottom of the page. On smaller desktop screens than mine, users have to scroll down the screen to find it. Also, cluttering this page is a ‘Fraud prevention and online security’ box. Although this may be important information for some users, there is already a paragraph above which encourages users to ‘find out more’ about security protection online. Again. the ‘Login’ button fails to conform to colour contrast standards.

    Co-operative bank login step 3
  • 1.4

    On the ‘Important Information’ page, users must select the ‘Continue to business online banking’ button to progress. In my opinion, the login process is already rather convoluted by now. Also, as with the previous orange buttons, the white text has insufficient contrast. This means some users may struggle to read the text.

    Co-operative bank login step 4
  • 1.5

    Step 5 and users are finally asked for their login credentials! There are a few key issues with this screen:

    • The contrast of the light blue text ‘Forgotten Customer ID?’ and ‘Forgotten User ID’ is very poor, failing with the Webaim colour contrast checker with a ratio of just 1.87:1. Please see the image below for a screenshot of this.
    • A condensed font-type is used for the ‘Proceed’ button text. The lack of space between each letter may make the text difficult for some users to read.
    • The ‘Proceed’ button text is embedded in an image. If a user zooms in, either using ‘Ctrl and +’ for a PC or ‘Cmd and +’ on a Mac, they may find the text becomes rather blurry. Many visually impaired sighted users rely on screen magnification software such as ‘ZoomText’. These users may also encounter the same issue of blurred text if zooming in.
    Co-operative bank login step 5
  • 1.6

    Users who have successfully entered their ‘Customer ID’ and ‘User ID’ are taken to stage two of the login credentials. Here, users must enter their ‘Secure token passcode’. If a user is unsure what this is, they can select the ‘What’s this?’ link. However, the light blue text has insufficient contrast so some users may struggle to read it. In order to obtain the OTP (One-time password, a user must enter their PIN correctly on an external hardware device. A code is then generated on their PIN authentication device and a user must then enter this code in the input field for ‘Secure token passcode’ before finally selecting the ‘Login’ button (highlighted with a ‘6’ in the screenshot below). As with all the other orange buttons in the login process, the white ‘Login’ text has insufficient contrast.

    Co-operative bank login step 6
  • 1.7

    Users are (finally) presented with the homepage dashboard (having entered their credentials successfully in step ‘6’). As you can tell from the image below, it’s unlikely to win any design awards. Most strikingly for me, the font-size is extremely small. It is perhaps unfair that I haven’t included a larger image of this page and I have purposely blurred any sensitive data. However, the screenshot was taken off my (27″) iMac and even on a screen this large, I had to look closely at the screen. I have 20/20 eyesight so I can only imagine how hard it must be for users with diminished vision!

    Co-operative bank login step 7 - home dashboard

Outcome

I was surprised at how many steps are required for users to login to a Co-op business account. I decided to do a quick check on the Barclays site for comparison. While there are seven stages of the Co-op ‘Business Banking login’ (including the Co-op homepage and dashboard displayed once logged in) there are just four for Barclays. There were are many examples of colour contrast issues on the Co-op site, I found none on the Barclays site. Unlike the Co-op banking site, the font-type on the Barclays site is not condensed and the default text size, particularly for buttons, is larger. I therefore found the text much easier to read. Generally, I found the UI design of the Co-op banking site very plain and uninspiring, particularly when comparing it to the Barclays site. Overall, I found the Co-op login process cluttered and I’m not surprised I found an older relative struggling with it.

I will be producing wireframes in Axure shortly to show a simplified and more user-friendly process for the Co-op ‘Business Baking login’.

Platform:

  • Desktop website

What I did:

  • Explored existing solutions
  • Evaluated the login process
  • Highlighted UX issues
  • Highlighted accessibility issues


Leave a Reply

Your email address will not be published. Required fields are marked *