Ozan

Alongside Ozan's internal team, we built a feature-rich payments platform including issuing of virtual & physical cards, checkout, account to account payments as well as bank top-ups & reporting.

Scope

New Product

Industry

FinTech

Services

Ad-hoc

Technologies
React
React
Redux
Redux
GraphQL
GraphQL
Illustrator
Illustrator
XD
XD
Hero - Ozan

Ozan

Alongside Ozan's internal team, we built a feature-rich payments platform including issuing of virtual & physical cards, checkout, account to account payments as well as bank top-ups & reporting.

Hero - Ozan
Scope

New Product

Industry

FinTech

Services

Ad-hoc

Technologies
React
React
Redux
Redux
GraphQL
GraphQL
Illustrator
Illustrator
XD
XD
INTRODUCTION

About The Project

Ozan is a digital banking app that allows users to make safe transactions in different currencies. Our team was engaged to create the processes and design of a mobile app as well as to upgrade, optimise, and develop new features for an existing application. Key highlights from the project include:

15K

lines of code removed

41%

increase in build speed

200%

reduction in bundle size

Partnership

As an extension of Ozan's internal team, we provided them with skilled resources and technical expertise to launch their web & mobile apps.

UX Design

UI Design

Front-End Development

PROCESS

The Challenge

Our team delivered on multiple products in parallel: a merchant panel, checkout, admin portal and a customer-facing dashboard.

add_card

Card Issuing

Card issuing where users could create physical or digital cards was a critical goal for the business. A streamlined and consistent process was required across both mobile and web apps.

speed

Dashboard

Due to architectural issues, new features were taking considerably longer to build. We also had a short timeframe to address these prior to a PCI audit.

phone_iphone

Mobile App Concept

Ozan wanted a fresh new look for their mobile app, while taking the opportunity to address any limitations with the current interface.

PROCESS

Our Approach

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

Approach -  Manage
SOLUTION 1

Analysis

Through stakeholder and competitor research, we identified what features had to be put in place. Different combinations and flows were presented to the client. To make sure all features were feasible, technical architects were present throughout the project.

As a result of a GAP analysis, new tasks were added to the backlog for monitoring. Additional limitations, common user complaints and improvements the stakeholders wanted in place were identified for the mobile app concept.

Approach - Deisgn
SOLUTION 2

UX & UI Design

User stories and personas were created and tested from both internal and external users. We used low-fidelity wireframes for testing until imperfections were ironed out and a high-fidelity prototype for card issuing was created. The client could choose from a few photorealistic options for physical cards.

We provided multiple ideas on how the platform could be improved, based on the feedback. A high-fidelity prototype was created with improved usability, new features, and a fresh look for the mobile app.

Approach - Coding
SOLUTION 3

Development & Testing

Before starting development on the card issuing process, technical discussions determined what could be split into small blocks and reused. This led to faster delivery and a more maintainable codebase.

We reduced complexity by removing repetition and thousands of lines of code on the platform. Maintainability was optimised by adding type support, splitting up features and using Redux across the board. A lot of upgrades were free as they were delivered alongside features or bug fixes.

Testing
SOLUTION 4

Code Quality

Code reviews and automation were used to improve quality. Unit tests were not built as resources were short. However, a QA team constantly monitored and built E2E tests for the project.

RESULT

Impact

package

Consistency

Card issuing was delivered on time. The experience both on the web and mobile app were consistent and inline with branding guidelines.

manage_history

Efficiency

Thousands of lines of code and styles were removed, while new features were delivered. Onboarding of new developers on this project was significantly easier.

Cost-effective

Maintenance costs were significantly reduced following platform optimisations. One of the biggest wins was removing a redundant application.

fact_check

Feature-rich

The mobile app concept was delivered in 10 working days with new features including multiple bank accounts and multiple cards for the same account, shared & business accounts, transfers to alternative platforms, services and subscription payments.

CASE STUDIES

See More Of Our Stories

Travel Enterprise

Learn more
case study https://cdn.sanity.io/images/68sc9ce8/production/35f41f30ca51258fd6b7df0440697ebfaffbbfc2-1080x1080.webp?w=400&fit=max 400w, https://cdn.sanity.io/images/68sc9ce8/production/35f41f30ca51258fd6b7df0440697ebfaffbbfc2-1080x1080.webp?w=1000&fit=max 1000w, https://cdn.sanity.io/images/68sc9ce8/production/35f41f30ca51258fd6b7df0440697ebfaffbbfc2-1080x1080.webp?w=1500&fit=max 1500w,  https://cdn.sanity.io/images/68sc9ce8/production/35f41f30ca51258fd6b7df0440697ebfaffbbfc2-1080x1080.webp?w=2000&fit=max 2000w

Tech Startup

Learn more
case study https://cdn.sanity.io/images/68sc9ce8/production/74da5a091f662dccb9f6aa1caa376d7b21bda77f-1080x1080.png?w=400&fit=max 400w, https://cdn.sanity.io/images/68sc9ce8/production/74da5a091f662dccb9f6aa1caa376d7b21bda77f-1080x1080.png?w=1000&fit=max 1000w, https://cdn.sanity.io/images/68sc9ce8/production/74da5a091f662dccb9f6aa1caa376d7b21bda77f-1080x1080.png?w=1500&fit=max 1500w,  https://cdn.sanity.io/images/68sc9ce8/production/74da5a091f662dccb9f6aa1caa376d7b21bda77f-1080x1080.png?w=2000&fit=max 2000w

Travel Startup

Learn more
case study https://cdn.sanity.io/images/68sc9ce8/production/b10d41f04eec439157f81726760382aa430fdb60-1080x1080.png?w=400&fit=max 400w, https://cdn.sanity.io/images/68sc9ce8/production/b10d41f04eec439157f81726760382aa430fdb60-1080x1080.png?w=1000&fit=max 1000w, https://cdn.sanity.io/images/68sc9ce8/production/b10d41f04eec439157f81726760382aa430fdb60-1080x1080.png?w=1500&fit=max 1500w,  https://cdn.sanity.io/images/68sc9ce8/production/b10d41f04eec439157f81726760382aa430fdb60-1080x1080.png?w=2000&fit=max 2000w
Phone with fintech application

Meet your users where they're at