HSBC Online Banking

Mobile & Web Experience
Project Overview
HSBC is an international financial institution that can still be found in the Americas but one that somehow falls behind of its competitors (Chase, Bank of America) when it comes to the digital consumer experience.

The HSBC project here is a showcase of how the user experience in its online and mobile banking experiences can be improved on.
My Contributions
User Experience Research
Web & Mobile UI Application Design
The existing HSBC website and mobile banking experience can make one feel dated against its competitors (Bank of America, Capital One, Chase, TD Ameritade).

The login experience for both website and mobile falls short of being user-friendly. It requires a degree of effort to select your region, log in (securely), and view transactions in an account.

Below are some of the use-cases I wanted to improve on:
  • Sign-in experience on the website and app requires too many steps
  • No option to turn on Touch ID on mobile app (at the time of this study)
  • Transactions are difficult to distinguish between debited and credited amounts
The Problems
Goals
Have a direct login homepage for users to sign in right away. Simplify the mobile app's home screen. Offer a Touch ID option (for iOS and Android). Improve distinguishing between debited and credited amounts in an account's transactions by the use of color.
Original HSBC Banking Website
Below are examples of the original homepage of HSBC for online banking.
Mapping out the Pain Point
Below is a webpage map that illustrates the steps a user must take upon each visit to reach the appropriate Personal Account login page:
‍
Select Region/Location
Select Personal Account Login
Accept the legal Terms & Agreement
Select Login button (again) This step is indicated by the red dot.
The Redesigned Digital Experience
Have a direct personal banking URL for customers to log into.
Redesigned Homepage: Wireframe with styled design displaying a direct login prompt for consume-facing banking, user-enabled location detection.
The Redesigned Mobile Experience
Original screens of the HSBC mobile banking app. The original banking app is cluttered, feels dated (it still is), and transactions are difficult to differentiate between debited and credit.
Redesigned Mobile UI: Focused login or sign-up prompt with tertiary options as buttons below it. Touch ID prompt.
Redesigned Accounts/Transactions view using color cues for debit and credit values.
DIANA YEE
Linkedin