Okra FinTech (B2B2C)

Relaunching Okra's Payment API Solution

Redesigning a Payment API solution from scratch after a failed launch.

In 2021, Okra's reuse of designs from their other Open Finance solutions resulted in a 50%+ drop-off rate on their payment API's key screen. I spearheaded a complete overhaul of the UX designs through user research.

The client

Okra is an Open Finance FinTech company enabling innovative companies to create better and fairer financial services for their customers. It is best known for its Payment API solution which I designed.

My role

  • To carry out UX audit on the existing repurposed Payment API solution and its integration within other Okra’s B2B products.
  • To plan and conduct research and study data in order to drastically reduce the drop off rate.
  • To lead other designers while collaborating with product managers, developers and business development team to improve the user experience and align processes.
My initial observations before doing conducting research.
My initial observations before doing conducting research.
Primer screen that previously had a huge bounce rate and my redesign
Primer screen that previously had a huge bounce rate and my redesign
Banks screen previously designed as a grid
Banks screen previously designed as a grid
Payment methods screen and my iterated designs
Payment methods screen and my iterated designs

The work

Scope

To investigate the payment journey of a customer within different contexts, conduct extensive user research to find out why users were not dropping off, and then carry out custom redesign of entire native mobile, web mobile and desktop web experiences.

Description

Previously, Okra had introduced its identity product and adapted those designs for the payment API service. Following the initial acceptance by its business clients, the company recognized the product’s potential and identified a pressing need for a tailored payment redesign across various platforms used by end-users.
 
During this project, I collaborated with a product manager, two developers, another designer responsible for approximately 10% of the screens, and an illustrator who brought a touch of character to our designs based on my vision. Concurrently, I also led efforts on the company’s Design System project.

Outcomes

  • Used by senior leadership to create 3 distinct offerings as opposed to the previous all-in-one payments API solution – integrated payments, payment links and authorisation (shown below).
    Update: Okra has now merged integrated payments and payment links as “Payments“.
  • Unearthed inconsistent branding issues that contributed to the high bounce rate and solved this using minimalist designs with a touch of character.
  • Drastically reduced the drop-off rate to about 20% before I left the team.
  • Helped fine-tune our design processes by prioritising user research which I championed and analysing data.
  • Established a minimalist design standard within the company, directly influencing the development of the company’s design system.
Sub-product 1: Integrated Payments within a business' existing app flow
Sub-product 1: Integrated Payments within a business' existing app flow
Sub-product 2: Payment Links sent by a vendor to their customers
Sub-product 2: Payment Links sent by a vendor to their customers
Sub-product 3: Payment Authorisation for future direct debits
Sub-product 3: Payment Authorisation for future direct debits

Next: Meta's Avatar Component Library →

(Visited 339 times, 1 visits today)