MTS Bank was hit by sanctions, so it obtained a new license and launched a new brand — MTS Dengi (“MTS Money”). The task: build a platform for the new product.
Evolving the web app
Before I joined the company, there had already been a first attempt to launch the web app. Unfortunately, it failed. Apparently, the designer took the brief too literally and started the project from scratch, with no one overseeing the work. After the release, it became clear that the solution didn’t scale, the design system wasn’t being used, and development would basically have to start over. The project’s author left the company soon after.
MTS Fintech bet on strengthening its design team — a lot of strong people came on board, me included. Just like on my other team, a radical redesign was off the table: the platform had already shipped as is, and the product teams hadn’t yet brought over all of their core functionality.
That meant every team would be building from scratch. I started looking for ways to take some of the load off product designers and product managers so they could bring their solutions to the web faster.
Wanted: a solution, preferably cheap
The logical first step was to lean on the design system. At the time, Granat 2.0 (the design system of the parent MTS) was already trying to build unified web components similar to the mobile ones. That got me thinking: why should the web be any different from the app?
What if we could ship the same design for mobile and web? That could cut design time almost in half: the customer journey gets approved once and is used on both platforms. The number of approval rounds gets cut in half, too. Sounds too good to be true — so what’s the catch?
Back then, MTS Fintech 2.0 (our fork of Granat 2.0) was essentially just a UI kit. The components hadn’t been fully adapted, and implementing them in code was barely on the table. That gave me freedom — a chance to build my own ideas and principles into the system.
Mobile first → Application first
While working on the responsive layout, I came up with the idea of “stretching” the mobile app design to desktop while keeping it universal across all screen sizes. I built a grid system that lets you design a master screen once and then automatically adapt it to every breakpoint. I packaged this system into a template and handed it off to the other designers.
- Drop in a screen from the app (for convenience)
- Set up the master component
- Get a ready-made responsive layout
Hybrid
Wait, didn’t I just say a redesign was too expensive… and now I’m doing a redesign? Yes, but only because the groundwork had been laid first — otherwise we would have repeated my predecessor’s mistakes.
I took the old front end and stripped out every breakpoint above mobile. Then I adapted the mobile layout to the new grid system. That’s how the hybrid version came about: it let teams ship their products no matter what stage of work they were at.
Different teams had different amounts of capacity. For example, my Transaction History team could afford to use the new design system and extend it as needed. The debit cards team, on the other hand, was focused on getting its features onto the platform — and couldn’t spare resources for migrating to the new design system on top of that.
So long, iOS
Some time later, MTS Dengi was sanctioned too. The apps, and then their clones, were pulled from the App Store. The company started cutting costs, including letting go of all its iOS developers. Under these circumstances, the web suddenly became a top priority: it was now the only way for iOS users to use online banking. This is where the idea of a single design for all platforms really came into its own.
A new home screen
A year later, it was time to update the home screen itself. The design director proposed a concept, and all that was left was to roll it out across platforms technically. Given the web workflows we’d already put in place, that shouldn’t take much effort. Unfortunately, I won’t be around to see it through to release, but I’m confident the teams will handle the build and ship a product they can be proud of.
