Commercial Banking
A responsive website for business finances in Hong Kong
DURATION
Jan 2019 - Jun 2020
(18 months)
TEAM
2x UXUI designer
MY ROLE
Junior UXUI Designer: UX design, UI design, Prototyping, Usability testing
TOOLS
Sketch, Invision, Flinto, Zeplin
Background
I worked with a Senior UXUI Designer to provide continuous UXUI design support to Commercial Bank in the largest multinational bank in Hong Kong. We worked with various Product Owners and developers for the Commercial Bank's responsive website from discovery to launch.
Goals
-
Enhance existing design with customer's feedback and latest design system
-
Add new commercial banking features
-
Apply AA accessibility standard
-
Get design approval with the company's Design Team
-
Verify the design with usability testing every quarter
Design Sprint
We executed 3-week sprints to complete a set amount of design work for the Commercial Bank.
![Ceremonies.png](https://static.wixstatic.com/media/c11667_4877d17cd5824fb3827749bb13989b89~mv2.png/v1/fill/w_980,h_256,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Ceremonies.png)
Wireframe & Design
We have done numerous enhancements and new features for Commercial Bank. I heavily involved UX and UI processes for the features of Payment Tracker and Foreign Exchange.
Payment Tracker
After users send an online payment, they are able to track its status from the Recent Payment Widget on the Homepage or the Payment Tracker Detail page.
​
Goals
(Business)
- Address pain points and feedback from customers and front-line staff
- Reduce customer calls to the call center
- Cater existing technical limitation
(User)
- Increase the visibility of payment status and details
- Easy to cancel and amend payment online
- consistent design for both desktop and mobile
Analysis
Recent Payment Widget
-
didn't specify the time period for summary
-
Unclear hierarchy while containing Recent Payment and Payment Summary in the same widget
​
Payment Tracker Detail Page
-
2 filters share the same functionality in setting the date range
-
The current status for payment is not prominent and confused user with double status
-
Duplicated information
![PaymentTracker.png](https://static.wixstatic.com/media/c11667_626c7f2269ac4ec597b25002c26a31fd~mv2.png/v1/fill/w_980,h_256,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/PaymentTracker.png)
Usability Testing
We had 5 rounds of usability testing for Commercial Bank within 18 months. We worked closely with PO to define the testing scope for each usability testing. Senior designer and I drafted the test script and created the clickable prototype. Each round of usability testing lasted for two days with 8 to 10 participants.
![IMG_F0D01C5CF794-1.jpeg](https://static.wixstatic.com/media/c11667_82da38a891124272a25f5c232f358f7b~mv2.jpeg/v1/fill/w_344,h_256,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_F0D01C5CF794-1.jpeg)