The Ask
Allow customers to pay for large purchases in instalments
BMO had previously hired a vendor to create designs for their new PaySmart product (which would allow customers to pay for large purchases in instalments) and they needed them to be updated to align with the new design system that was being launched for their online banking platform. Designs also needed to be created for different edge cases and scenarios not originally covered in the vendor’s work.
However, upon starting the work, it was quickly discovered that there were significant gaps in knowledge of technical limitations, project requirements, and edge cases that needed to be sorted out before starting to create designs.
Ideation + Execution
While it was unfortunate that we had to take steps backwards and add workload to an already tight timeline, it also created an opportunity to collaborate closely with the business and technology teams and co-create an experience that would truly benefit the user.
We spent quite a bit of time upfront with the business, development, and vendor teams making sure everyone was on the same page about the requirements and technical limitations for the project, going through multiple requirement refinement sessions. We continued to work closely with them while creating designs to create solutions to edge cases as they came up.
I also collaborated closely with the team working on the platform redesign to ensure the designs were aligned with the latest version of new design system and ensure components and patterns were being implemented and used properly.
Challenges
PaySmart was a brand new product offering
While third party instalment payment options were becoming more popular in e-commerce so people were becoming more familiar and comfortable with the idea that they could pay for large purchases in a smaller monthly amount, there were very few Canadian banks that were offering the service. There was also the difference that third party options were available at the time of purchase and PaySmart was available after the purchase had already been made. While designing the experience I placed a lot of focus on how and where we were educating the customer on how this product worked, doing my best to ensure that it was as clear as possible without overwhelming them with a lot of information.
Significant technological limitations from legacy systems
Working with roundabout legacy systems is almost a guarantee when working in the banking sector, and this product was no different. One of the most significant hurdles we came up against was the realization that after a customer had created an instalment plan for a purchase, there would be no record, evidence, or feedback that they had done so for at least 24 hours while the system created the plan in the backend and generated the identification necessary to display the plan in the front end.
We spent a large amount of time trying to find workarounds for this issue – after we realized we didn’t have time or project budget to request the updates that would be needed to fix it. What we ended up settling on was including copy on the confirmation page for creating a plan that alerted the customer to the fact they wouldn’t be able to see their plan right away and to print or take a screenshot of the confirmation page for their records.
Massive redesign of the entire online banking platform
At the same time that we were creating this brand new product, the entire online banking platform was being redesigned from the ground up and this redesign was launching right before PaySmart was set to launch. This meant all of our designs had to be in-line with the new design system, which was still in-flux in some areas, before it officially rolled out to the larger design team. I collaborated closely with a number of the team members working on the redesign to make sure our designs followed the new system, and to make sure the new components, patterns, and page templates could accommodate the new features that would be needed to launch PaySmart.
Final Designs
Below is the flow a customer would go through in order to create a PaySmart plan
While there are too many elements of the experience that are the results of successfully advocating for a better user experience to list here, below are some highlights:
Addition of tooltip for minimum monthly payment field
Since the monthly payment for any PaySmart plans is added to a customer’s minimum monthly payment, there was a possibility that customers could be alarmed by a sudden increase in their monthly payment. To try and mitigate an increase in calls to customer support, we added a tooltip to this field to provide additional context and remind customers that their PaySmart monthly payments were included in this amount.
Displaying detailed breakdowns of financial line items
In multiple areas of the PaySmart experience, there are detailed breakdowns of the financial line items (e.g. there is both a ‘rate’ field and a ‘total’ field for both fees and interest) and was a direct result of advocating for the users’ needs. The business was of the school of thought that only the minimum amount of information required to complete the task should be presented. Under most circumstances I would agree, however, this was a new product and I wanted to ensure that customers (who may never have used an instalment payment product before) had enough information to be confident in what they were doing – especially because using this product could impact their credit worthiness. Through multiple sessions of explaining my perspective and why showing more information, in an organized and easily scannable way, would be better for the user I was able to show them the value in taking this approach.
The goal in showing the information in this way was to mimic the way a math equation would be shown so that customers could easily understand what the total cost would be, how it was calculated, and how it would be paid.
Using plain English instead of financial jargon
This was a joint effort between the project’s content strategist and I to make the whole process easily understandable regardless of a customer’s financial literacy levels. Getting the business and legal onboard required some reminders that the general public hasn’t been immersed in financial language and jargon like they have, but we were able to get them onboard and replace a number of jargon terms with plain English throughout the experience.
In addition to the ‘create plan’ flow I also delivered:
cancel plan flow
plan details page
updates to transaction details page
error state designs
PaySmart table
variations for PaySmart tab, create flow, cancel flow, credit card overview pages
Disclaimer: The content shown in the images has been subbed in to protect proprietary information.