thumb_smile.png

Smile Bank

I have been with Smile for a long time. And after their latest refresh of the site, it struck me how much I was struggling with it. 

There were a number of areas I felt could be improved:

1. the overall design is inconsistent with various elements either disappearing or not being positioned as expected.
2. The login process is at least one stage longer than it needs to be.
3. Once logged in, the layout of the accounts & how to navigate through them along with the IA and duplicated buttons just adds to the confusion

So I conducted a UX review, wireframing the existing process for logging in and moving money, noting where I felt it wasn't working, and then reworking a recommended solution.

Smile Bank, usability issues: username login

Smile Bank, usability issues: username login

1. The isolated ‘Help’ button seems disassociated from the help links below the checkbox
2. Overall look and feel is very light, with little to lead the eye
3. Next button is disassociated with the input field and check box

Smile Bank, usability issues: password login

Smile Bank, usability issues: password login

The login button is disassociated with the input fields and check box
 

Smile Bank, usability issues: login confirmation

Smile Bank, usability issues: login confirmation

It's unclear to me why this screen is required and why it would require a user, who has completed the login process, needs to then confirm by an additional click that thye are happy to proceed.

Smile Bank, usability issues: logged in

Smile Bank, usability issues: logged in

1. The navigation for account selection is unnecessarily complex. Why have a choice of view? In 'carousel' view it is unclear that the greyed out secondary account is selectable.
2. ‘Move Money’ and ‘Products”  - which are key services - are easily missed due to not being buttons or feeling integrated into the account management section
3. The footer feels unfriendly and would benefit from some icons, colour or some copy tweaks 

Smile Bank, usability issues: select account

Smile Bank, usability issues: select account

I wanted to highlight this as I genuinely did not realise I could navigate through accounts via a carousel. Perhaps I did not associate a flipbook style interface with something as important as bank accounts. 

Smile Bank, usability issues: account selected

Smile Bank, usability issues: account selected

1. The Current account area feels lost / undefined / floating.
2. Account actions seem to also be floating and ‘Move money’ is listed twice. I don't understand what the chevron to the left of Account actions relates to
3. It would be interesting to know from user feedback if users like to see their IBAN and BIC details listed in the summary, or whether more typically useful information would be better placed there.

Smile Bank, usability issues: move money

Smile Bank, usability issues: move money

1. My main issue with this screen is to wonder where the top navigation bar has gone? The design has reverted to the login screens so now I have lost some confidence that a) everything is ok and b) do I really have to use that discreet 'Back' button?
2. Again, the buttons at the bottom are disassociated from each other

Recommendations

Recommendations

Smile Bank, recommendation: username login

Smile Bank, recommendation: username login

1. I have used colour, to help lift the page and differentiate between the input section, and help area
2. The Next button now sits with the input box
3. Help is now all moved to the bottom

Smile Bank, recommendation: password login

Smile Bank, recommendation: password login

The login button now sits with the input fields, and the cancel button is removed, as users can close the tab in their browser or use the browser back button.

The step in the current design requiring the user to confirm they are logged in is now removed

Smile Bank, recommendation: logged in

Smile Bank, recommendation: logged in

1. A simplified navigation for account selection removing the carousel & list view choice
2. Additional account management options are now accessed via clearly defined buttons, integrated into the account management area which is defined with a light grey background
3. A reworked footer which is much more closely aligned with the non-logged in sitewide footer while incorporating help for users at the top
 

Smile Bank, recommendation: account overview

Smile Bank, recommendation: account overview

1. A simplified design using colour and borders to group content
2. Account services now contained within one dropdown button
3. With account services now moved, the account info has more room for the key info to be displayed

Smile Bank, recommendation: account services

Smile Bank, recommendation: account services

The dropdown enables all services to be contained in one simple view allowing more space for additional services to be added in the future

Smile Bank, recommendation: move money

Smile Bank, recommendation: move money

1. The top nav is now retained for consistency
2. Buttons are now positioned next to each other below the input fields