OpenPayd

In collaboration with OpenPayd's internal team, we built a web application that provides an easy way for users to manage their funds.

Scope

New Product

Industry

FinTech

Services

Ad-hoc

Technologies
Angular
Angular
NgRx
NgRx
GraphQL
GraphQL
Illustrator
Illustrator
XD
XD
Invision
Invision
Photoshop
Photoshop
Openpayd

OpenPayd

In collaboration with OpenPayd's internal team, we built a web application that provides an easy way for users to manage their funds.

Openpayd
Scope

New Product

Industry

FinTech

Services

Ad-hoc

Technologies
Angular
Angular
NgRx
NgRx
GraphQL
GraphQL
Illustrator
Illustrator
XD
XD
Invision
Invision
Photoshop
Photoshop
INTRODUCTION

About The Project

OpenPayd is a digital banking app that offers a variety of banking solutions. Our team worked in collaboration with the client’s in-house frontend team to build the desired product as quickly as possible.

Partnership

Our developers got on board quickly to speed up the front-end development, and help OpenPayd impress investors with bi-weekly demos.

UX Design

UI Design

Front-End Development

PROCESS

The Challenge

The client needed a product that provides an easy way for users to manage their funds as well as implement new features.

fact_check

Feature-rich

The app had to offer features such as exchanging money in different currencies, FX management, bank cards management and payments processing.

PROCESS

Our Approach

Throughout, we followed a solution-oriented approach, tackling issues one by one in a quick manner.

Approach -  Manage
SOLUTION 1

Analysis

Following team discussions with the product owner, in-house frontend developers and the backend team, the client needs were clarified. A proposal for the application architecture and tasks for the backlog were put forward.

Approach - Deisgn
SOLUTION 2

Design & User Experience

Visuals (mocks) were almost immediately prepared, following UX best practices. This gave the product owner a better idea of what the product would look like.

Unblocking was ensured by mocking the GraphQL backend before the backend was ready. This allowed our team to push forward without dependencies on other teams.

Approach - Coding
SOLUTION 3

Development

Future proofing was done by using NGRX to keep the application infrastructure scalable. Consistency was also achieved by following the Angular and Airbnb style guides.

Weekly demos ensured requirements were clear and progress was being made each week. Real-time updates were also provided by ticking off tasks one by one within JIRA, for the product owner to monitor.

Testing
SOLUTION 4

Code Quality

Code reviews using both automated tools and reviews by at least one senior developer were set up from day one.

Quality was additionally ensured by applying critical path unit testing to all projects, while keeping cost-efficiency in mind.

RESULT

Impact

palette

Design

Following design uplift, the number of clicks needed to perform an action was reduced.

speed

Performance

Performance was improved by adding NgRx to the application, reducing the reliance and backend which made the app snappier.

app_shortcut

Product

Our team delivered a fully-functional product with all required features including money exchanges, payment transactions, funds transfers across accounts, FX and cards management.

settings

Automation

We introduced multiple quality monitoring tools and processes into the project that helped maintain a great overall standard, including Sonar, linting, code coverage & testing tools, detection and build pipeline monitoring.

Phone with fintech application

Build a highly performant product with great UX