Если поставить цифровые продукты в один ряд с объектами промышленного дизайна, то первые отличаются гораздо большей пластичностью и стремлением к изменениям, что обусловлено более коротким дизайн-циклом.
Финтех давно перестал быть чем-то исключительным, став доступнее для широкой аудитории. Управление личными финансами, инвестиции, а в случае b2b-сегмента выполнение рабочих задач превратилось в повседневную рутину наравне с вызовом такси, заказом продуктов или записи к врачу в ближайшую поликлинику. Любой из этих сервисов вносит свою лепту в формирование общего представления о «хорошем сервисе».
Большинство финтехов плюс-минус выровнялись по реализованному функционалу, что подтверждает толкучка в верхних строчках Markswebb, в то время как Альфа-Бизнес стабильно занимает одну из них.
Озадачившись выбором одного из конкурирующих сервисов, пользователи всё больше опираются на критерии современности, удобства и привлекательности.
В статье я поделюсь своим опытом и расскажу, как мы приводили обновление визуального стиля десктопной версии Альфа-Бизнес. Эта история может быть полезна как начинающему дизайнеру продукта, так и дизайн-менеджеру. Я подробно расскажу о пройденных шагах, сложностях, с которыми мы столкнулись во время реализации, достигнутых результатах и выводах, которые я вынес из этого проекта.
Ситуация
Последнее крупное визуальное обновление Альфа-Бизнес случилось около пяти лет назад, что по меркам цифровой эпохи — целая вечность. Ряд конкурентов убежали далеко вперёд, обновив свои интерфейсы, другие же были в одном шаге от этого.
Как я писал ранее, цифровые продукты более пластичны, но не стоит забывать, что чем крупнее компания, тем сложнее протащить глобальные обновления. Это обуславливается большим количеством вовлечённых лиц.
Также свои ограничения накладывает текущий уровень автоматизации, что в нашем случае выражалось в низком покрытии целевыми компонентами, наличием legacy-библиотек и обилием кастомных решений, реализованных на уровне продуктовых команд.
Наша дизайн-система b2b, живёт в собственном репозитории, а все коммунальные компоненты, такие как кнопки, поля вводы, селекты и базовые токены, наследует из Core DS, но с применением нашей собственной темизации. Это как игральные карты: дизайн и рубашка разные, но тройка пик есть и там, и там.
Прицеливаемся
Когда речь заходит о визуальном апгрейде, первая же идея звучит как: «А давайте-ка бабахнем редизайн? Всё переделаем и будет чертовски красиво!». Идея прекрасная, вдохновляющая, но в нашей ситуации практически гарантировано обречённая на провал. Тут немного подробнее.
Если обобщить, то перед тем, как начинать работать над задачей, нужно ответить всего на 3 вопроса, ответы на которые определят саму задачу и сформируют образ результата:
- Зачем мы это делаем?
- Что мы от этого получим?
- Как мы планируем это сделать?
Ответить на эти вопросы можно бесчисленным количеством комбинаций. В свою очередь мы пришли к следующему:
- Зачем мы это делаем? Выровняться по визуальному стилю с другими каналами Альфы и не отставать от конкурентов.
- Что мы от этого получим? Более современный визуальный язык канала, готовый к дальнейшему развитию.
- Как мы планируем это сделать? Внесём изменения в ограниченное количество элементов, которые максимально повлияют на восприятие интерфейса для как можно большего числа пользователей.
Как бы ни привлекала идея полноценного редизайна, как любой крупный проект, он чрезвычайно требователен к ресурсам. Помимо формирования концепции, что само по себе затратно, только представьте, сколько потребуется ресурсов инженеров, тестировщиков, дизайнеров, владельцев продукта, поддержки на внедрение подобной махины.
Ограничение задачи позволяет точнее сфокусировать усилия и увеличить предсказуемость результата. Мы выбрали двигаться к большим изменениям небольшими шагами, а проект получил название «Рефреш Альфа-Бизнес».
Планируем
Прочесав собственные интерфейсы, посмотрев на наших соседей по банку, решения конкурентов и другие цифровые сервисы, мы сформулировали список необходимых интерфейсных решений:
- Визуально смягчить интерфейс. Как и многие другие, мы используем решение зонирования контента с выносом на плашки. Специфика b2b-сегмента диктует более сложные сценарии, большую плотность контента, а многие навигационные хабы построены на виджетах. Плашек много, а это повышает когнитивную нагрузку.
- Накатить единую темизацию с Core дизайн-системой. Я писал ранее об атомарниках и темизации. UI компонентов в наших продуктах отличается от общебанковского, а наши собственные компоненты так и вовсе во многих случаях построены на legacy-библиотеке.
- Переобуть компоненты в единую цветовую палитру. Трудно приуменьшить влияние цвета на восприятие и формирование общего стиля. Мы использовали собственную палитру, построенную на базе синего цвета. В планах было перейти на общебанковскую, построенную на чёрном.
Также предполагалось по касательной затронуть графику — положить конец безголовым человечкам на экранах успеха, которые возникают в 90% сценариев и жутко мозолят глаза. Стиль иллюстраций явно устарел и отбрасывает пользователя в тёплый ламповый мир воспоминаний.
Уже после старта проекта эта цель расширилась до полного искоренения 2D-графики (выживут только иконки), а реализацию этого трека залидировал маркетинг. Под капотом задачи расположились: формирование нового фирменного стиля, концепция его применения с последующим производством обновлённой графики и повсеместной её замены.
Деконструкция
Чтобы не сбиться с пути, мы заранее продумали план действий. На первый взгляд он выглядит достаточно просто, но так как речь шла об инициативе канала, нужно было тщательно подготовить всё к масштабной раскатке обновления.
Итак, дорожная карта проекта:
- Переход на общую темизацию и core-компоненты
- Переход на общую палитру
- Обновление зависимости в тех наших компонентах, что переедут в новую библиотеку
- Разработка недостающих компонентов на новых токенах и палитре (в рамках этой задачи планировалось избавиться от человечков)
- Описание связанных паттернов
- Обновление storybook и библиотеки в Figma
- Внесение задач на обновление в мастер-планы продуктовых команд (kick-off встреча с руководством)
- Раскатка мажорного обновления фронт-/дизайн-библиотек
- Постепенная раскатка в несколько волн
Не буду рассказывать о каждом из этапов, многие из которых понятны и без описания, остановлюсь лишь на нескольких.
Общая темизация
Наши интерфейсы гораздо более монохромные, нежели у розничных продуктов, а цвет в большинстве случаев говорит о статусе того или иного документа. Даже основной цвет фона у нас серый, в то время как интерфейсы сайта, физлиц и приложений используют белый.
Чтобы дополнительно привлекать внимание к основным действиям, мы красим нашу primary кнопку в красный цвет — отлично считывается и контрастирует с серо-чёрно-белым интерфесами.
Не все решения универсальны и подходят для любого пользователя или сценария. Иногда нужно отходить от общих стандартов, если следование им приведёт к ухудшению опыта пользователя. Мы не могли рисковать, поэтому отложили переезд на солидную чёрную кнопку и продолжили использовать свою красную до той поры, пока в b2b не поселится достаточно цвета.
Работа с графикой
Планировалось, что обновление интерфейсов станет основой проекта, а графика подтянется чуть позже, поэтому на старте проекта мы не учли зависимость от маркетинга, крупного подразделения со своим планированием, сроками и приоритетами. Достаточно быстро проект разделился на равные части, так что к kick-off мы готовились выйти уже вместе.
Наладить взаимодействие удалось не сразу, и подобная недальновидность сильно сказалась на сроках проекта: вместо планируемого летнего запуска мы стартовали раскатку только несколько месяцев спустя. Вернувшись назад во времени, я бы посоветовал себе потратить больше времени на подготовительный этап и собрать более полный список всех ожиданий от каждого из участников.
Задержки случаются частенько, и главное не терять настрой, а образовавшуюся паузу использовать в собственных целях. Мы в свою очередь получили дополнительное время на полировку описаний, разработку кросс-канальных компонентов, обновление паттернов и переработке сетки.
Два в одном
Видимый эффект, озвученный в задаче — сам по себе отличный и желанный результат. Но с технической стороны он раскрывался совсем иначе. Обновление Рефреш АБ требовал от продуктовых команд переход на обновлённую компонентную базу, как на уровне Figma, так и кода, что, в свою очередь, позволяло нам совершенно законно обрубать «гнилые ветки» — то есть претендовать на искоренение legacy-библиотек.
Согласитесь, трудно сосредоточиться на беге, если на одной ноге вместо кроссовка надет ласт. Я считаю, чтобы начинать строить что-то новое, сперва стоит выровнять почву или быль готовым латать дыры в будущем.
Покатились
Как я уже говорил, мы планировали релиз обновлений на начало лета. Важная дата, если учесть, что проект существует не в вакууме. Продуктовая работа не останавливается: команды работают над новыми сценариями, проходят крупные дискавери и исследования проектов, релиз которых намечен на конец года. Помимо этого, в начале 2023 года мы начали разрабатывать MobileWeb — PWA-приложение для тех наших клиентов, кто лишился iOS-приложения. Об этом я расскажу в другой раз.
Важно здесь следующее: новые интерфейсы и сценарии должны мимикрировать под нативное приложение для iPhone, что требовало использовать мобильные версии Core-компонентов и общебанковскую палитру.
Первоначальный план предусматривал, что мажорки появятся в доступе фронтов и дизайнеров как раз перед тем, как команды начнут разработку. Срок сдвигался несколько раз, поэтому дизайнерам приходилось проектировать на старых. Такая схема работала до момента, когда первая команда перешла к тестированию. Конечно же, макеты выглядели иначе, нежели приложение.
«Ждать больше нельзя, покатились! Чем дольше ждём, тем сложнее будет разгребать» — с такими словами мы обратились к владельцу канала и руководителю департамента дизайна. Ещё раз удостоверились у IT-лидов, что обновление не поломает существующий функционал, мы получили долгожданный ОК и с большущим облегчением открыли общий доступ к библиотекам.
Использование новых библиотек оставалось на усмотрение продуктовых команд, а чтобы получить финальное благословение от руководства и вернуться к первоначальному плану, потребовалось ещё некоторое время.
Продолжение следует
Завершение проекта намечено на середину следующего года, а обновление будет проходить волнами. В первую вошли 8 команд из нашего стрима, которые работают на такими высокочастотными разделами, как главная страница, навигация, витрина продуктов и коммуникации (письма / чат / уведомления). Мы намерено целились в частотные экраны и сценарии, чтобы эффект от обновления был заметен большему количеству пользователей.
К первой волне подключились команды-волонтёры, те, кто уже успел затащить обновления в свой продукт. Вся продуктовая работа теперь ведётся на обновлённой компонентной базе, сценарии MobileWeb множатся, а собранная на прекрасных мобильных компонентах MVP-версия готовится к раскатке уже на 100к клиентов.
Подытожим
Чем крупнее задача, тем тщательнее стоит подходить к подготовительному этапу. Лучше сфокусироваться на отдельных частях и двигаться к большой цели поступательно. Грамотная декомпозиция, чётко сформулированная цель, понимание возможностей и достаточное количество времени на обсуждения «на берегу» — то, что стоит держать в голове для проектов подобного уровня.
Без слаженной работы всех заинтересованных лиц очень трудно получить хороший результат. Дипломатия и сотрудничество важны для любого проекта, даже если в проекте принимают участие всего несколько человек. Из любой ситуации можно вынести пользу для себя, команды или компании. Чтобы наладить работу большого количества людей, нужно много усилий, но это того стоит, ведь согласитесь, чертовски приятно наконец-то увидеть результат.
Наличие красивой и желанной идеи — это очень важно, но без необходимых ресурсов она так и останется в метафизическом поле. Порой стоит приземлиться и спуститься на уровень реального положения дел. Осознание текущей ситуации может расстраивать, но позволяет посмотреть на задачу под другим углом и подойти к её реализации, сфокусироваться на возможном, оставив за бортом всё несбыточное.
Автор:
Алексей Кухта, ведущий дизайнер цифровых продуктов в Альфа-Банке
