Bottom Sheet Confirmation

Dmitrii Ziuzin
2 min readApr 2, 2018

--

When I worked at Ak Bars Bank (Ak Bars Digital Technologies) our team was having a problem with displaying a transactions confirmation screen. What was the problem?

We couldn’t get real time data about all transaction details. The back-end gives away different data it needs to confirm of specific transactions. This is a list of the possible items: amount, foreign currency amount, CVC, SMS code, transactions details, exchanging fee, transaction fee, confirmation button.

Ultimately the screen can have just amount and button (2 items) or amount and currency amount, transaction and exchanging fee, details, text field and the button (7 items). So it can affect the look of the screen, too much free space or lack of enough space.

How confirmation screen could look like

During our discussion I decided to try a bottom sheet. It helped in making the screen flexible depending on the content and in avoiding separated screen. It also allowed a smooth user flow.

I needed to find out a common solution for all possible cases. I created a template which can be filled with different items. The elements have the same structure and the same look in any case. The app gets a respond from back-end and builds specific bottom sheet.

The finished work principle of the bottom sheet looks like this video.

Feel free to contact me if you have any questions and let’s stay in touch!

--

--