Made the banking dashboard customizable and grew widget adds by 60%

Context

Gazprombank is one of Russia’s largest banks, with more than 5M monthly users across its mobile and web apps. The dashboard is the home screen of the web banking app, the first thing a customer sees after signing in. It holds widgets: balance, cashback, spending, a QR scanner. The better it fits a customer, the faster they find what they need and the less often they go to the menu

The problem

The dashboard was meant to be the customer’s personal space, like the home screen on iOS or Android, where everyone arranges widgets their own way. In practice you could only pick widgets from a fixed set, but you couldn’t really make it yours

My task

1. Review how dashboard customization worked
2. Collect references on home screen customization
3. Build a concept: one grid, color, edit mode, a widget gallery, and widget promotion
4. Work out the details: states, animations, widget cover art
5. Take the solution to release

Auditing the existing flow

• There was no edit mode. You couldn’t move, resize, or remove a widget, on desktop or on mobile
• Customization meant checkboxes. Widgets were switched on and off in a list on a separate page, with no preview and no size options
• The expanded sheet lost its color. On mobile the dashboard opened as a sheet: collapsed, it was in color, and once expanded it turned gray
• Color was picked blind. You changed it on the checkbox page, a toast confirmed the change, and the result only showed up on the collapsed sheet
• The XS size kept the grids apart. Desktop had a one-third-width size that mobile didn’t have, so a dashboard set up on one platform would break on the other

Market benchmarking

The main reference was the iOS home screen: people arrange widgets their own way there, and everyone knows edit mode by the jiggle. Fintech apps let you add, reorder, and hide home screen blocks in a similar way

Key decisions

1One grid across every device

My first decision was to drop the XS size. It paid off two pieces of design debt at once: we no longer had to draw every widget state for a tiny block, and the desktop and mobile grids finally matched. Without that, a dashboard set up on mobile would have fallen apart on desktop

2Color came back to the whole dashboard

The gray came from a technical limit in mobile browsers: the status bar can’t be transparent and only takes one solid color

I hid the seam between the sheet and the status bar with an overlay gradient and moved color settings onto the dashboard itself. Customers select “Edit” and see the color change right away

3The dashboard became editable

I modeled edit mode on the iOS jiggle: people already know it from their iPhone home screen, and most of our mobile web audience is on iOS. For a livelier jiggle, I wrote the CSS witha randomized phase for each widget

4A checkbox list became a gallery

People choose with their eyes, so widgets got cover art, previews, and size selection before you even add them. Illustrators drew the covers, and I reviewed them with the art director

5A promo block and a new-widget notification

New widgets needed a way to get noticed, so I added a “Suggested widgets” carousel below the dashboard: it shows new widgets, and product teams can promote their own there. When a new widget is added to the gallery, a notification dot appears in two places: on the widget itself and on the “Add widget” button

The result

The dashboard now fits the person using it: color, widget mix, size, and order, the same on desktop and mobile

The “Suggested widgets” carousel alone brought in 2.5K widget adds in June. After release:

+12%

clicks on “Edit” month over month

+60%

weekly widget adds within a month

Takeaways

• Customization started with aligning the grids. Nothing else made sense without it
• One simple fix brought color back to the sheet
• The gallery redesign moved the key metrics, which makes sense: people choose with their eyes

← Previous case: Search

Next case: Credit cards →