TrueLayer Products
Truelayer's products
While working at TrueLayer I've seen the product grow and evolve, from a B2B API company that uses open banking to verify user data, to the now growing need for a consumer facing payments network, attempting to take on the likes of Visa, Mastercard, Apple and GooglePay and the like.
With this growth my personal career growth has followed suit. As I've gone in to a manager role, my involvement in these products has been substantial but I cannot take full credit for the work as my position has been less hands on and more advisory, management and strategy based.
HPP (Hosted Payments Page)
This is a core TrueLayer product, which is our platform for consumers to make payments. To incredibly simplify the flow is as follows:
User selects "Pay by bank app"at checkout (clients screen)
This directs the user to HPP (our dialog)
The user selects their bank
Confirms the details
Authenticates using their bank app
Payment is complete
Redesigning HPP
The redesign of our HPP product was kickstarted by the rebrand, as a design function we saw the direction the product was going and we needed to redesign it in a way that was scalable, fresh and the best UX as possible.
The goal
The core team of the project was 2 of my direct reports and another senior designer. Then the extended team was myself, researchers and our head of product design.
Though involved in every stage of the process, from discovery to delivery. My main focus was the execution.
This involved strategising, reviewing and working with my team to take the user research data, concepts and help iterate, structure and refine our new HPP product.
Key introductions
Sleek neutral design - Using our new colour palette, we used a very neutral stripped back design to highlight the key areas. As bank list adds a lot of varied colours, keeping the surrounding content clean and neutral keeps things balanced.
Bottom sheet - We introduced the bottom sheet, this added the bank list to the first screen which removed an unnecessary step to the flow, and also created a stylish feel to the screen using modern design style and gestures to our dialog.
Loading animation - We added an animation to the loading screen to let the user know what's happening. A problem for TrueLayer is educating users on this new experience, rather than overloading with explanatory text, introducing a simple animation helped solve that, it also gave us an opportunity to introduce some colour and our brand.
Now?
Now we are deep into the delivery phase of HPP, I and the team are working closely with the engineering function to make sure it is built not only in keeping with the designs but also in a scalable componentised manner. This includes design iterations and solving problems when surfacing. As well as a lot of stakeholder management, release strategy and process defining.
Embedded UI
Similar to the HPP, the embedded UI is our payments dialog with one major difference. This is directly embedded (via iFrame) to our clients website. So the user is not directed away from the clients site and we are able control the design of our checkout button without having to rely on our clients integration team.
User selects "Pay by bank app"at checkout
A dialog loads in front of their payments page
The user selects their bank
Confirms the details
Authenticates using their bank app
Payment is complete
Embedded UI
One of TrueLayers biggest problems that we needed to solve was a consistent checkout experience. As we always relied on our clients to add us to their checkout screen, the lack of consistency was a pain point. Including different icons, naming, structure etc.
The introduction of the Embedded UI meant we could control how we appear at checkout. This gave us our version of the ApplePay button.
The goal
The core team of the project was the Payment experience team which included 1 of my direct reports engineers and product manager. My involvement has been similar to the HPP project, helping the team build a scalable, well executed product.
Key introductions
Dynamic button - The dynamic button is our way of introducing a consistent checkout, as we don't have the gravitas of Apple, Google and PayPal ours had to be scalable, flexible and clear while including direct reference to the banks.
Bottom sheet - The bottom sheet UX was introduced in our HPP design but with this product we doubled down on it, with every step in the flow appearing as a bottom sheet/dialog showing the customer site behind which gave our users an element of security (based on user research).
Now?
Version 1 is currently live for some clients, I work closely with the designer on the team to help solve any issues or unforeseen problems that have risen.
Also creating cross functional guides and other elements to make sure once live the product is easy to use both internally and externally.
And what?
These are just two recent examples of some of the products I have helped shipped at TrueLayer. In my design manager role my main focus has been cross functional stakeholder management, long and short term strategy and elevating the team around me.
I'm very lucky in the designers in the team are very talented and I have had more time to focus on strategy and management, as I trust their skillset completely. When needed I still do hands on IC work but mostly on shorter, hard timeline projects.