Role

Product Designer

Team

3 developers scrum client team, Tech lead, Project manager

Tools

Adobe XD, Adobe Illustrator, Invision, Zeplin

Timeline

15 months, 2019-2021

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, the development process of banking products has been long and cumbersome. The Designer System is an internal organizational system that aims to make the banking product development process short and simple to operate. With the help of the system, the bank will function quickly and thus 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 find your way around the lines of the code.

In addition, users work on complicated systems that ignore basic user experience principles. Hence the need of a single central system for planning and developing banking products in a clear and efficient manner, with 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 the information relevant to the product.

Design system

1. Creating a visual hierarchical structure for data

Before I went into screen design I created an icon set that would represent the different levels in the hierarchy. I chose geometric shapes, the hexagon represents the antithesis at the higher level and the triangle represents the antithesis at the lowest levels. This structure tree helped me design the tree that accompanies the whole system and creates an easy-to-navigate orientation map.

Hierarchy tree as shown in the system:

Hierarchy tree:

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 be able to 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 make it clear to the user how to work with the feature.

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

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

  1. Upper part: selecting the object from which we will derive data. 

  2. Left part: tree with the data inside the object.

  3. Right part: 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 derived two values with the same name.

The designed screen that 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 was created within a certain date range and contains the word "exchange"?

The challenge I faced was to design the advanced search so that it would provide results even if the search bar is 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 period or date range, 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.

Advanced search design according to the design system. At this point you can see in the window that the user searched for the word ״exchange״, within a certain date range.

At this point I will mark the checkbox of the search for the word “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 domains 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 components in the system. The string I was looking for is highlighted in red, so the solution I created most quickly locates very specific information within the entire data.

The project was characterized and designed as part of my work at Matrix

Designer

 
Banking product
development system
 

I'm working on the mobile version in order to avoid this awkward situation.

I'd love if you could access my portfolio from your computer's browser.

If you would like to chat instead, click and we'll talk.

Oops!

🦺