«Я устроилась, подписала NDA и узнала, что буду руководить масштабным редизайном мобильного приложения»

Дизайн-лид направления рассказывает, как они с командой работали над ребрендингом.

В июле этого года я вернулась в компанию после двухлетнего перерыва. Поскольку мой предыдущий опыт в тогда ещё Tele2 запомнился мне с хорошей стороны, то конечно же я была очень рада вновь присоединиться к ребятам. Но в этот раз был нюанс — после трудоустройства и подписания NDA мне сообщили, что в компании уже практически полгода идет масштабный ребрендинг, и мне нужно будет руководить редизайном приложения.

Главный вызов заключался в том, что мне нужно было молниеносно погрузиться в контекст полугодовой работы команды. Как только в рабочих чатах появилось сообщение о моем назначении, посыпались вопросы, на которые требовались срочные ответы. При этом текущие обязанности дизайн-лида никто не отменял — например, мы продолжали расширять команду продуктовых дизайнеров, и у нас было целых три вакансии, которые сейчас, к счастью, уже все закрыты.

Если попробовать описать наш редизайн всего в двух скриншотах, то получится такая картина: слева — версия, которая была у пользователей последние несколько лет, а справа — обновлённый дизайн, запущенный 4 сентября в день ребрендинга.

Ошибки в цифрах нет — это действительно 4-я и 6-я версии. Но на самом деле 5-я версия тоже существовала.

Как вы можете заметить, пятая версия очень сильно похожа на шестую и просуществовала всего месяц. У многих, кто сейчас читает эту статью, наверняка возникает вопрос: зачем выпускать полноценную версию нового приложения всего на месяц, если обычно они существуют от года до нескольких лет?

Изначально мы планировали стандартный, плановый редизайн, который обычно происходит раз в несколько лет. В таких случаях пересматривается структура приложения, обновляется дизайн-система, и приложение получает свежий, более современный вид.

Первые наброски новой версии 5.0 появились ещё в 2022 году. В 2023 году мы синхронизировали макеты с веб-версией и начали создавать дизайн-систему в коде. Всё шло по плану, пока в начале 2024 года не было объявлено о подготовке к полному ребрендингу. Это означало новый логотип, цвета, шрифты, стиль и, конечно же, совершенно новую дизайн-систему.

Несмотря на грядущий ребрендинг, мы решили не останавливать работу над версией 5.0 и в итоге мы разделили редизайн на два этапа:

• На первом этапе мы обновили структуру и навигацию в версии 5.0, поскольку к моменту анонса ребрендинга у нас уже был готов каркас новой версии с улучшенной логикой и удобством использования.

• На втором этапе сосредоточились на визуальном стиле, выпустив версию 6.0, где обновления дизайна не затронули ранее переработанную структуру и навигацию.

Поскольку пользователи в целом не любят редизайны, мы постарались провести изменения максимально мягко и незаметно, насколько это было возможно.

После выпуска версии 5.0 у нас было время проанализировать, как изменилось поведение пользователей после изменений структуры и отдельных блоков приложения. Это позволило нам оперативно вносить корректировки до выпуска версии 6.0, если что-то пошло бы не так.

Таким образом, мы понимали, что если конверсии в определённые разделы или действия изменились, то это связано именно с изменением структуры, а не визуальной составляющей. Это позволило исключить влияние таких факторов, как «красота», цвета и шрифты, на поведение пользователей. В результате метрики стали более чистыми и точными.

После релиза версии 5.0 мы получили достаточно хорошие данные.

Уровень продаж ключевых продуктов, услуг и сервисных транзакций сохранился на прежнем уровне:

Конечно, может возникнуть вопрос, почему сохранение уровня конверсии мы считаем успехом. Дело в том, что при глобальном редизайне и изменении структуры приложения мы не ставили целью сразу повысить конверсии повсюду или в каком-то одном разделе. Люди в целом настороженно относятся к редизайнам, поэтому сохранение прежнего уровня конверсии означает отсутствие критичных ошибок в UX. Это подтверждает, что пользователи, несмотря на изменения в навигации, по-прежнему могут легко находить нужные опции.

Наблюдается эффект новизны и исследования интерфейса:

После обновления пользователи стали активно переходить в новые разделы и кликать на плашки, изучая, что там внутри. Это не оказывает прямого влияния на конверсии, но свидетельствует об интересе к редизайну. Многие пользователи пошли дальше главной страницы, открывая для себя новые разделы, что положительно характеризует их взаимодействие с обновлённым интерфейсом.

Основной негатив был связан с отсутствием двух фич, которые мы добавили позже:

Поскольку времени на редизайн было ограничено, нам пришлось сократить количество фич, вошедших в релиз. Отсутствие двух из них вызвало негатив у пользователей, но это было ожидаемо: мы изначально планировали добавить их позже. В итоге мы своевременно вернули эти фичи в приложение, устранив причину недовольства.

В нескольких разделах трафик значительно вырос благодаря изменениям в структуре главного экрана.

Пользователи стали чаще заходить в центр управления гигабайтами и минутами, поскольку мы сделали эту кнопку более заметной, добавив яркий дизайн и анимацию. Возможность управления гигабайтами и минутами является одним из наших ключевых преимуществ по сравнению с другими операторами, поэтому для нас важно повышать осведомлённость абонентов об этой функции.

Также наблюдается рост трафика и целевых действий в маркете Т2. Ранее плашка для входа в этот раздел находилась в боковом скролле, но теперь она размещена на видном месте.

Вопреки популярной среди продуктовых дизайнеров практике максимально эффективно использовать пространство экрана, скрывая элементы в скролле или выпадающих формах, мы выбрали иной подход. Мы отказались от множества скроллящихся списков на главном экране и не побоялись сделать страницу длиннее. Такой подход привёл к росту конверсии в ключевых для нас разделах.

Во время редизайна у нас появилась первая дизайн-система, интегрированная в код. Поскольку ребрендинг имел четкий дедлайн, а компонентов было достаточно много, особенно важной оказалась коммуникация и сотрудничество между дизайнерами и разработчиками. К счастью, обе команды осознавали значимость этой задачи, поэтому к 4 сентября у нас уже была полноценная дизайн-система в коде.

С технической точки зрения тоже произошли значимые изменения. Команда Android-разработчиков перешла на Jetpack Compose.

Что это значит простыми словами? Во-первых, Jetpack Compose — это рекомендованный фреймворк для создания интерфейсов Android-приложений, который значительно упрощает процесс разработки. Он позволяет описывать пользовательский интерфейс в виде декларативного кода: «в таких-то условиях покажи это, а в других — покажи то». Это дает большую гибкость в настройке интерфейсов. Например, мы можем задать параметры компонентов, которые автоматически изменяются в зависимости от темы или места их использования.

Благодаря переписанной на Compose части приложения, переход от версии 5.0 к версии 6.0 стал максимально простым — буквально как включение лампочки. С использованием старого фреймворка такой переход занял бы гораздо больше времени и усилий.

К сожалению, не все прошло гладко. Мы упустили из вида некоторые сценарии отображения контента на устройствах с шириной экрана 320 пикселей. Несмотря на то, что дизайнеры проверяли макеты на маленьких экранах, часть проблем осталась незамеченной. Одной из причин стало использование нового шрифта: он оказался шире и массивнее предыдущего, что создало дополнительные трудности. Разработчики вовремя заметили проблему и мы быстро её исправили — стали использовать для маленьких экранов во многих сценариях кнопки размера S.

Еще одним неожиданным вызовом стал поиск изображений со старым логотипом. Их оказалось больше, чем мы предполагали, и искать их пришлось вручную. Вывод на будущее: необходимо минимизировать использование логотипа в иллюстрациях без крайней необходимости. При изменении названия, цветовой схемы или стиля логотипа такие изображения требуют ручного обновления, что отнимает много времени.

На руководящей позиции может казаться страшным показаться недостаточно компетентным, ведь лидер будто обязан знать больше всех. Но в процессе редизайна я постоянно задавала вопросы дизайнерам и другим коллегам, и это оказалось абсолютно нормальным.

Приходилось принимать много важных концептуальных решений, и часто это нужно было делать быстро. Конечно, не все решения оказывались идеальными с первого раза. Однако практика показала: лучше принять решение и позже его улучшить, чем долго тянуть, пытаясь найти идеальный ответ. Потеря времени в таких случаях редко приводит к чему-то хорошему.

TG-канал Полины "Дневник дизайнера"