Payment History is the go-to feature to verify payments made through RBC. This project aimed to modernize the outdated UI and improve usability. My role focused on design ideation, prototyping, and usability testing.
I reorganized the payment table to establish a clearer visual hierarchy, allowing the user to scan and locate a payment easily.
Users can now click on each payment to access comprehensive payment details, saving their time acquiring the information from the Help Center.
Users faced challenges scanning payment information due to the poorly organized information and suboptimal visual design.
Sadly, Payment History was not accessible on mobile devices. Imagine looking at this page on your phone:
What’s the optimal way to structure the table? I supported our researchers in distributing 41 user surveys, which asked the users to rank the priority of the information:
Based on survey insights, I emphasized primary information in the prominent columns and grouped the secondary information by relevancy to reduce clutter.
Turning the heavy information into a mobile design became a difficult task. Since there is no precedent at RBC, I looked into other mobile banking apps to learn how they lay out the table in a small space.
Precedents from other banking apps
After experimenting various layouts, I iterated based on feedback from other designers to safeguard the consistent experience across desktop and mobile.
Design iterations
With a refreshed visual hierarchy, users can now effortlessly scan the table and locate a payment. Also, the addition of the mobile design allows the users to check payments on the go.
Users have to call RBC to get more payment details like “Expire date”, adding unnecessary workload to the Help Center team. Based on the feedback, the business requested to display payment details in this feature.
After ideation, I championed Option A (displaying payment details on an in-page panel) for its convenience in accessing details without navigating to another page.
To validate this assumption, I created prototypes for both options and conducted A/B testing with 10 users (5 on desktop, 5 on mobile). Surprisingly, 80% of users favored Option B (displaying payment details on a full screen) due to its better readability, particularly for longer content.
The participants also shared an interesting insight: in all payment-related activities, users want to be able to edit or cancel the payment. This inspired us to add quick links for the users to perform these actions in this feature.
Now, users can access comprehensive payment details without needing assistance from the Help Center. Additionally, quick actions for editing or cancelling payments are available within Payment History.
Since my tenure concluded before the delivery, I can only roughly gauge design impact through user satisfaction scores from usability testing. Ideally, I would track a decrease in Help Center calls regarding payment details over time to assess the success of this redesign.
