Ozan

parallax illustration of /assets/images/case-studies/cards/cs_ozan.png
Brief

To design a mobile app, flows, perform several maintenance tasks on an existing application, as well as perform upgrades, optimisations, and feature development.

Scope:

New Product

Industry:

FinTech

Services:

Ad-hoc

Technologies:

React

Redux

REST

GraphQL

Illustrator

XD

Invision

Photoshop

Card Issuing

 

 01 

Challenge

Ozan had a digital wallet web app, built in React. The app allows users to manage funds, exchange money and make transactions. Card issuing was a critical goal for the business and a process was needed so that consumers could create physical or digital cards. A streamlined and consistent process was required across both mobile and web apps.

Ozan design screenshot

 

 02 

Process

Analysis

As part of the analysis, we identified what features the stakeholders wanted in place, as well as how other companies and banks handle the same problems. Different combinations and flows were presented to the business owners. Edge cases (such as delivery failed) were included as part of this process. Technical architects were present throughout, ensuring all features were feasable.

UX & UI Design

Different user stories and personas were created, and tested from the point of view of internal and external users. We then found the best process that gathered all required information while still being user friendly.

Low fidelity wireframes were created, tested, until imperfections were ironed out. Following that, documentation and a high fidelity prototype was created.

A few photorealistic options for physical cards were presented to the client to choose from.

Development and testing

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

Realtime updates were provided by ticking off tasks one by one within JIRA, for the product manager to monitor.

 

 03 

Results

Card issuing was delivered on time. Happy paths and edge cases were implemented and approved by the QA team. The final experience on the web app and mobile app were consistent and inline with branding guidelines.

Ozan Card Design

Dashboard

 

 01 

Challenge

Ozan had a number of problems to solve with their platform, however, due to architectural issues, new features were taking exponentially longer to build. In addition, there was a short timeframe to fix a number of issues due to a PCI audit.

stat icon

Over

15K

Lines of code removed.

stat icon

Over

41%

Increase in build speed.

stat icon

Over

200%

Reduction in bundle size.

 

 02 

Process

Analysis

GAP analysis We identified gaps with the product manager, and backend team. As a result, new tasks were added to the backlog for monitoring.

Development and testing

A lot of upgrades were free as they were delivered alongside features or bug fixes.

Realtime updates were provided by ticking off tasks one by one within JIRA, for the product manager to monitor.

We reduced complexity by removing repetition and thousands of lines of code.

We improved maintainability by adding type support, splitting up features using atomic structure, and using redux across the board.

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.

 

 03 

Results

Onboarding of new developers on this project was significantly easier.

PCI and security audits were passed.

Maintenance costs were significantly reduced. One of the biggest wins was removing a redundant application. Repetition of logic was replaced with a permission management strategy to merge two applications into one.

Thousands of lines of code and styles were removed, while new features were delivered. One example was replacing webpack with a “create react app” configuration for build tooling.

Mobile App Concept

 

 01 

Challenge

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

Ozan Phone Design

 

 02 

Process

Analysis

As part of the analysis, we gathered a list of limitations, common user complaints, as well as improvements the stakeholders wanted in place. We researched the current user base, competition and current design trends.

UX & UI Design

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.

 

 03 

Results

The concept was delivered in around 10 working days. Features within the concept included: Creating multiple bank accounts, creating multiple cards for the same account, shared accounts, sending money to alternative platforms, services and subscription payments through the app, business accounts. The concept was served as a useful point of reference for discussions and feature development throughout the course of months.

Ozan Card Design

Have a look at our other success stories

Working hand in hand with the client, we built a web application with a number of features like exchanging money in different currencies and FX management that enabled Openpayd's users to be in total control of their funds.

OpenPayd

Learn more
case study cs_openpayd.png

By leveraging on several tools and by building a solution in Angular, we powered this fintech company to launch new ICOs quickly while allowing clients to sell and manage their crytocurrencies.

Wexsel

Learn more
case study cs_wexsel.png

Take a look at how we enhanced this gaming monitoring platform's app architecture with a fresh UX/UI and a number of first-rate features

Legaleyse

Learn more
case study cs_legalyse.png
arrow forward