DUOLABS
Work

Bank app screen refit

We reworked five mobile apps run by a regional bank for the new smartphone screen, with a notch cut into the top and a home bar along the bottom. The older screens placed elements at hard-coded positions based on an earlier, smaller screen size, so on the new screen the top menus and bottom buttons could be clipped or overlap. In a banking app, a button, input field, or authentication step that displays wrongly gets in the way of the task itself. We checked every screen, separated fixes that could follow one shared rule from those each app needed on its own, and re-checked every screen we changed.

Launch
2018
Client
A Korean regional bank
Type
Banking & Identity
01 / 04

Screen layouts moved clear of the notch and the home bar

The new smartphone added a notch cut into the top centre of the screen and a home bar along the bottom edge. For five regional-bank apps, every screen was checked and fixed so that the status bar and menu area at the top, and the buttons and tabs at the bottom, stay out of those zones. Because screen ratios and top heights differ from device to device, the layout rules were set against the manufacturer's design guideline for the safe area, so nothing is clipped or overlapped.

Screen layouts moved clear of the notch and the home bar
02 / 04

Old screen code with a small screen size hard-coded in numbers

The regional bank's older screen code was drawn against the fixed screen size of an early, small smartphone, with each element's position and size written in as numbers. Code like that falls out of line the moment the screen size changes. We tracked down the numbers that broke when the screen size changed and reworked them so that positions and sizes follow the screen on current devices.

Old screen code with a small screen size hard-coded in numbers
03 / 04

Regression checks down to the bottom button meeting the keyboard

In a banking app, a button, input field, authentication step, or notice that displays wrongly can stop the user from finishing the task. Every screen whose layout was changed was checked again, one by one. The focus was on buttons fixed to the bottom of the screen being hidden by the keyboard or overlapping the scrolling area.

Regression checks down to the bottom button meeting the keyboard
04 / 04

One shared rule across five apps, with app-by-app handling

Five of the regional bank's apps were reworked at the same time. The bank splits its apps by user and task, for example running personal and corporate mobile banking as separate apps. Screen patterns that repeated across apps were brought to one shared rule, while the older structures that differed from app to app were analysed and handled one by one. The same screen work was also done on another bank's app, which we were maintaining under an operations contract. The problem was the same, but code structure and screen policy differed by app, so each fix was fitted to that app's state.

One shared rule across five apps, with app-by-app handling

Highlights

01

Five bank apps fitted to the new screen format with a notch and home bar

02

Legacy screen code with positions hard-coded for a small screen, cleaned up

03

Regression checks centred on fixed bottom buttons, the keyboard, and scrolling areas

Insights

Read the blog