NatWest

Payit by NatWest

Mobile App UI Design

9 Months

Payitâ„¢ is a proprietary payment software that allows users to pay for products and services by connecting (once authenticated) directly to their bank accounts at checkout via mobile app’s and the web.

I was brought on to the team to design interfaces and develop prototypes in Figma. The prototypes were used by the marketing and sales teams to demonstrate to potential customers how Payitâ„¢ could work for them and of course to convert them to paying customers.

There were three ways in which we could deliver the demos depending on the client’s requirements:

Build a white label prototype to demonstrate what it could look like integrated with Payitâ„¢

This was often used if my workload was stacked and the client required a quick response. This type of demo would be tailored toward the industry of the client.

Type: Generic Demo

Build demos using the client’s own branding + rebrand Payitâ„¢ screens with client’s brand

These were the majority of demo’s delivered.

Type: Embedded

Build demos using the client’s own branding, but using the original Payitâ„¢ components

This was the most cost-effective method.

Type: Hosted

A break down of available Payitâ„¢ journeys

The product has a number of variations for different scenarios offered by NatWest’s Payitâ„¢ service. Alongside delivering a fully interactive prototype that mimics the behaviours (animations etc) of the client’s app/website, I had to include the correct type of journey that they requested. These variations are:

  • Standard online purchases (via retail app or mobile)
  • Setting up savings and regular payments
  • Reminder/Notice of payments – starting point receiving an email
  • Reminder/Notice of payments – starting point receiving a text message

Emulating the client’s journey for an authentic experience

Figma can be a powerful tool when it comes to delivering great designs and prototypes to demonstrate ideas and concepts. With my hands-on experience, I was able to utilise Figma’s potential to build products that have end user’s experiencing the app or website journey as though it was the actual thing.

The prototypes were comprised of intricacies such as variants and nested interactions making for a much more rewarding experience.

How it works

Below is a high-level journey map of a typical journey with Payitâ„¢ integrated.

A prototype for Nando’s

One of the clients seeking NatWest’s Payitâ„¢ solution was Nando’s. In order to create a full experience for the fast food chain, I had to take screenshots of each screen of customer journey for purchasing lunch. These screenshots covered the journey end-to-end.

There were screens that we didn’t have, for instance, the thank you page which comes after making a payment, so this resulted in me having to re-imagine what would look like.

There were also screens that needed to be manipulated to show how Payitâ„¢ features work with the client’s brand. In the case of Nando’s, the payment screen needed to have the Payitâ„¢ option added in and an additional screen added for the bank selection.

Here’s a look at the final demo 👇

What I brought to the team

I was a proponent in the decision taken to move from Sketch and Invision to Figma for the delivery of design assets and customer-facing demos.

One of the main reasons I expressed my thoughts on this matter was because of the inefficiency of the workflow within NatWest. Designing in Sketch and importing the frames over to Invision was longwinded and added no value to the delivery of the prototypes. It was the right time to move to Figma given its suitability and the extensiveness of the tools capabilities.