Overview

The data systems of one of the biggest banks in Israel were developed using old technologies that were created 30 years ago. Until today, banking product development has been long and cumbersome. The Designer is an internal organizational system that aims to make banking product development short and simple. With the help of the system, the bank will function quickly and save time, resources, and money.

Problems and challenges

The data is presented in the form of long and not visual code, so it is difficult to navigate the code lines.
In addition, users work on complicated systems that ignore basic user experience principles. Hence the need for a single central system for planning and developing banking products in a clear and efficient manner. This system should have a simple and functional design.

Solution

Creating a single system that breaks down all existing data into small components. The user will be able to connect various components and use them to build banking products that contain only information relevant to the product.

Design system

1. Creating a visual hierarchy for data

Before I got into screen design I created an icon set that represented the different levels in the hierarchy. I chose geometric shapes. The hexagon symbolizes the highest entity’s level and the triangle represents the lowest entity’s level. This structure tree helped me design the tree that accompanies the whole system and creates an easy-to-navigate orientation map.

3. Data item - Sub-Object Type

In the data type of sub-object type, I was asked to think of a way that the user can choose an object in the system and then cut relevant data parts for the sub-object. The solution included case studies like what happens when there are two fields with identical names. The interface had to be easy to understand and explain how to work with the feature.

Manual sketch from the feature design to create a sub-object derived from the selected object

Wireframe of sub-object creation. The screen is divided into three parts:

Upper part: Select the object from which we will derive data.
On the left is a tree with data inside the object.
On the right is the data we derived from the object, which is now imported to a sub-object.

When marking a single leaf in a tree it moves like this to the sub-object. When marking a branch in the tree, it also moves all the leaves below it. In this scenario, we can see a situation where we have derived two values with the same name.

The designed screen contains the sub-object feature

2. Advanced Search

In the system, a standard search can be performed when the search field functions as an autocomplete. In addition, I was asked to design an advanced design screen for more complex searches.

How do I locate a specific microservice out of dozens of microservices that were created within a certain date range and contain the word "exchange"?

The challenge I faced was to design the advanced search so that it would provide results even if the search bar was empty. Then, the results would be based on attributes like times, strings within the entity, and filtering specific domains. I had to solve problems like conflicts of selecting a set of time periods or date ranges, searching strings within long business logic documents, and more.

The solution I found was to divide the advanced search window into two parts: the first part is related to searching for a string that includes a search bar and check boxes for selecting a specific area in the entity where the search will be performed. The second part is related to various characteristics such as time periods, dates, and a filter for selecting domains from the entire system.

Designing an advanced search according to the design system. You can see in the window that the user searched for the word ״exchange״, within a certain date range.

I will select the checkbox to search for "exchange" within Business Logic only. I will open the domain filter to select certain business domains.

A model that contains a tree of all the business and service domains in the system. I created this model to further target my search.

The search results are displayed when they are categorized into different tabs of the system components. The string I was looking for is highlighted in red, so the solution I created locates very specific information within the entire data.