Back to portfolio

Xnext: Branch Banking



In the begining of 2013, ING Bank Turkey started an operational transformation which covered re-development of softwares used inside of the company. These softwares were approximately 15 years old and seen as the main reason for the low efficiency.


Project Definition

Xnext is the core banking application which was going to be used by ING employees in headquarter, operation center, call center and branches. There were 4 different softwares in use which had over 2.000 transactions in total and Xnext would replace them all. These transactions included all the transactions related to retail banking and commercial banking. It was considered as the future of ING Bank Turkey and being developed with agile development method.

This is the story of how I made a positive difference to everyday work life in ING Bank Turkey.

My Role

I was part of the pitch team and responsible for the experience strategy and design of the core banking app. I lead the UX work, producing all major deliverables and presenting these to the executive community between February 2013 and May 2014.

Also, I provided UX trainings to entire project team which included developers from ING itself and 3rd party companies, business analysts and business unit product owners. My aim was to increase the awareness of UX in the project team and create a corporate UX culture.

The Challenge

Integrating 4 Softwares into 1

There were four different softwares in use. Each focused on different parts of daily banking transactions. Our aim was to create one software which unites all the banking needs of the employee in one software.

The Approach

User-Centered Design

Software development approach in ING Bank Turkey was based on the business need. This was causing the end product meet the real users at the end of development. Starting with the new project this approach replaced with user-centered design.

Problems

The research phase was a high-intensity effort that allowed us to audit the existing softwares, review the competitor products and begin research into our user needs, profiles, behaviours and pain points.

Our research showed us revealed pain points. We listed these below:

Accessibility of Systems

Accessibility of Systems

Currents softwares were developed as desktop applications. Hence employees were not able to use it anywhere else except for computers.

Training Costs and Low Learning Curve

Training Costs and Shallow Learning Curve

All employees were being trained for three weeks before starting the job. Despite that, learning curve was shallow due to the complexity of softwares.

Low Employee Efficiency

Low Employee Efficiency

User needed to interact with multiple pages to complete transactions because the needed information was on different pages. Consequently, it increased the completion time for all tasks.

Information Architecture

Information Architecture

Not having a proper information architecture in any current software made users gotten lost in the softwares and hindered the discovery of functionalities.

Flows Different From Real Life

Flows Different from Real Life

Additions made within time of usage make transactions page extremely dense, which leads to broken process flows.

Unclarity of System Changes

Unclarity of System Changes

Due to the lack of documenting updates, softwares were too complex and obscure. This made page changes too risky.

After listing the problems we created personas for each role. There were 11 different roles such as Branch manager, accounter, retail banking specialist, commercial banking specialists etc.

Screen shots from the previous softwares: A transaction page and the landing page. (Blured due to company policy)

Generic placeholder image

Objectives

The research phase revealed main problems with the current softwares. Our aim was to create an application that both solve these problems and enable to adapte any changes in future.

We listed our objectives below:

Accessibility Anywhere and Anytime

Accessibility Anywhere and Anytime

A web-based responsive application, which is accessible anywhere, anytime on any device and with any resolution.

Intuitive Design and Learnability

Intuitive Design and Learnability

An application that can be used easily regardless of users experience and self-learning experience that does not require any training..

User-Centered Design

User-Centered Design

User-centered processes and interactions, personalization, shortcuts, templates etc. to bring the needed information to the right place at the right time.

Information Architecture

Information Architecture

Different roles creates different needs. And switching rate between roles among employees was high. Hence single information architecture for all user roles but different content for each of them.

Match Between System and Real Life

Match Between System and Real Life

Ethnographic research to match real life, defining UI rules to avoid information intensity and applying Gestalt principles for layouts to prevent user errors.

Unclarity of System Changes

Documentation

Documentation of every update to manage the clarity of page changes made within time of usage.

Design

After discovering the problems, listing the objectives and defining the personas, I organized a 2 day workshop held in the operation center of ING in Istanbul and invited 3 employees from each role with different experience level. Daily used transactions and most needed interactions were defined with the help of ux methods such as card sorting and treejack.

Gathered information from the workshop led us draw the first mockups with Axure RP. I grouped the informations and created new pages based on the user need. For example I designed 5 pages which are used very often by a marketing focused retail banking specialist which shows customers, products and etc.

Usability testings and workshops

Generic placeholder image

When an employee is successful, he/she get promotion and jumps to the next role in the bank. Inexperienced employees start as accounters and within time they become retail managers then corporate banking specialist etc. If I was designing different information architectures for each role, when they get promotion, they would have to learn the interactions all again. Eventhough they use completely different transactions and have various needs, one information architecture that matches with all would solve the problem.

After designing multiple versions, performing usability tests and redesigning these version, we decided on one version of ia.

With the help of business analysts and based on our research results we created scenarios and storyboards to see end-to-end interaction of user with the softwares. To test scenarios, I created high-fi prototypes with Axure and performed usability tests. After redesign-retest circle a third party design agency finalized our visual design and our software was ready to go.

Protototyping (Blured due to company policy)

Generic placeholder image

Development

Xnext was in production after a massive development process included 5 different agile teams including over 70 developers and 30 business analysts. Since the software was being developed with the latest web technologies such as Html5, Css3 and AngularJs, a third party development company was providing Front-end developers. I defined UX standarts for the transaction pages, created ui pattern and taxonomy libraries of the project based on the most used transactions for the project and consulted analsyts to apply them in every transaction. Money withdrawal - deposit - transfer, Loan, Insurance were some of the most used transaction.

Launch

We build a UX team including the business analysts who were performing UX tasks during the project. After that we conducted surveys and made some field researchs to see how users interact with the final software. We discovered some minimal problems and after solving them the software was published to all branches around Turkey.