ATB Financial
Pre-Approved Mastercard
Role
Product design lead
Duration
Q4, 2024
Provide clients (new and returning) the convenience of a credit-based pre-approval process for specific Mastercard offerings.
As the auto-approval process required constant checks against a user's current credit score to gauge the amount that could be allocated to a particular user, we wanted to ensure that the user experience was seamless within the experience, but allowed the backend space to run checks against the information as it was entered.
To reduce the amount of time spent churning through ideas and allowing our refinement sessions to begin as soon as possible, we put together a rough map of the proposed flow. This allowed us to anticipate how we might segment the information that would be required on each page and plan with the development team where info validation would be required from our backend systems.
We knew that we wanted to limit potential fraud or user input errors, so tailored the flow to require users to pick up their new Mastercard in-branch if they changed their on-file address. This also allowed us to provide users with the option to tailor their pickup/delivery method based on what worked best for them.
ATB's digital ecosystem works on a currently-in-development design system, and so I spent time determining what visual assets could be leveraged and what new UI assets would be required from the development team. Unless a comprehensive design system is already in place, I find this step eliminates a number of headaches later on during refinement and design handoff.
Next, I moved to sketching out rough concepts that would be used for the purpose of brainstorming ideas with the product manager and as illustrated examples to check for technical concerns with the lead developers on the project.
Early on in the flow, there was a requirement to allow the client to choose their Mastercard. I suggested that we show them a carousel of cards rather than something less visual like a dropdown option. This way we could also present them a list of each card's strengths and drawbacks, helping further inform their choice.
High-fidelity design overview
As ATB already operates on a design system, I skipped the more conventional step of wireframing the early sketch concepts. Our component library was already largely templatized and concepts were easier and faster to compose by dragging the pre-built components into place rather than manually wireframing.
Due to technical constraints, we were able to prompt an offer to a client, but would require the client to accept the offer before running validation against their account credentials. To soften the effect of an immediate rejection for certain accounts, we organized a "consolation page" to provide alternative offers.
Based on the client's account standing and existing information tied to the account, there were cases where clients might need to input a large amount of information to complete the flow. We split this information into separate pages, categorizing them into navigable elements inside of a sidebar.
We identified that we could use location APIs to help clients more quickly identify branches that they could automatically send the Mastercard to, eliminating confusion and speeding up the happy path.
We ended the flow with an application summary, providing users with an opportunity to review their choices and make changes as necessary by using the side bar for quick and easy navigation.
The PAMC project felt like a step forward in my growth as a product designer. Many of the previous lessons that I had learned around ideating as early as possible, keeping technical feasibility in mind, conferring with partner groups (product management, development, and SMEs) helped ensure the project went smoothly. What was expected to take a month or more to refine was handed off to development in a little over three weeks.
As happy as I am with the planning and execution of the work, if I could do it over, I would push for testing right after the ideation phase had completed. Our product success group was by nature very client-centric, but testing would have given us that little bit of confidence that I believe would have helped condense our decision-making processes in the middle stretch.
Another big lesson: sometimes there are small effort/big wins at every stage of the design process. Sometimes it's good to just go for a walk to see things in a different light!