МТС Банк оказался под санкциями, поэтому приобрёл новую лицензию и запустил новый бренд — МТС Деньги. Задача: создать платформу для нового продукта.
Развитие личного кабинета
Ещё до моего прихода в компанию была предпринята первая попытка запустить личный кабинет. К сожалению, она оказалась неудачной. Судя по всему, дизайнер воспринял задачу слишком буквально и начал проект с нуля, без контроля со стороны. После релиза стало ясно, что решение не масштабируется, дизайн-система не используется, а разработку приходится вести практически заново. Автор проекта вскоре уволился.
Компания МТС Финтех сделала ставку на усиление дизайн-команды — пришло много сильных специалистов, в том числе и я. Как и в другой моей команде, уходить в радикальный редизайн было нельзя: платформа зарелизилась как есть, а базовый функционал от продуктовых команд ещё не был внедрён в полном объёме.
Это значило, что все команды будут вести разработку с нуля. Я начал искать способы снизить нагрузку на продуктовых дизайнеров и менеджеров, чтобы ускорить интеграцию их решений в веб.
Ищу решение, недорогое решение
Первым логичным шагом стало использование дизайн-системы. На тот момент Granat 2.0 (ДС от большого МТС) уже предпринимал попытки выстроить унифицированные веб-компоненты, схожие с мобильными. Это навело меня на мысль: зачем веб должен отличаться от приложения?
Что если мы сможем реализовать одинаковый дизайн для мобильного и веба? Это могло бы сократить время на дизайн почти вдвое: клиентский путь согласовывается один раз и используется на обеих платформах. Сокращается и количество согласований — в тоже вдвое. Как говориться: «А минусы будут?»
На тот момент MTS Fintech 2.0 (наш форк Granat 2.0) представлял собой, по сути, только UI-кит. Компоненты были не полностью адаптированы, а о реализации в коде речи почти не шло. Это дало мне свободу — возможность заложить в систему свои идеи и принципы.
Mobile first → Application first
Работая над адаптивом, я придумал «растянуть» дизайн мобильного приложения на десктоп, при этом сохранив универсальность для всех экранов. Разработал систему сеток, позволяющую создать мастер-экран один раз, а затем автоматически адаптировать его под все брейкпоинты. Эту систему я упаковал в шаблон и передал другим дизайнерам.
- Подставляем экран из приложения (для удобства)
- Настраиваем мастер компонент
- Получаем готовую адаптивную растяжку
Гибрид
Кажется, я только что говорил, что редизайн слишком дорог… а теперь устроил редизайн? Да, но только потому, что были проделаны подготовительные шаги — иначе мы бы повторили ошибки моего предшественника.
Я взял старый фронт и удалил из него все брейкпоинты выше мобильных. Затем адаптировал мобильную вёрстку под новую систему сеток. Так появилась гибридная версия: она позволяла командам внедрять свои продукты, независимо от того, на каком этапе работы они сейчас.
У разных команд был разный объём ресурсов. Например, моя команда «История операций» могла позволить себе использовать новую дизайн-систему и дополнять её по мере необходимости. А вот команда дебетовых карт была сосредоточена на затаскивании своего функционала на платформу — и не могла тратить ресурсы еще и на переход на новую ДС.
Досвидания, iOS
Спустя время, МТС Деньги тоже попали под санкции. Приложения, а затем и клоны удалили из App Store. Компания начала сокращать издержки, в частности всех iOS-разработчиков. В этих условиях приоритет веба резко вырос — он остался единственным способом для владельцев iOS-устройств пользоваться интернет-банком. Тут то концепция единого дизайна для всех платформ раскрылась в полную силу.
Новая главная
Спустя год, пришло время обновлять и саму главную. Дизайн-директор предложил концепт, который осталось технически раскатить по платформам. Учитывая заложенные процессы работы с вебом это не составит огромного труда. К сожалению, довести эту работу до релиза я не успею, но убежден, что команды справятся с разработкой и выпустят продукт, которым можно гордиться.
