Зачем вообще делать редизайн? На этот вопрос хорошо ответил автор культовой книги «Дизайн привычных вещей» Дон Норман: «Если дизайн мешает человеку достигать цели, значит, он устарел. Редизайн — это возвращение смысла в продукт».

И это, пожалуй, самое точное объяснение. Со временем любой продукт перестает соответствовать реальности. Люди меняются, рынок меняется, бизнес меняется. Редизайн нужен, когда продукт больше не справляется со своими задачами:

• Пользователи путаются, уходят и жалуются.
• Бизнес вырос, а продукт не поддерживает новые процессы.
• Падают ключевые продуктовые метрики — retention, конверсии, вовлеченность.
• Появляются новые функции, а интерфейс не справляется. Например, в меню не помещаются новые разделы.

Если что-то такое происходит — это знак. Пора взять свой продукт и пересобрать его так, чтобы людям было удобно им пользоваться, а бизнесу — выгодно. Это и есть редизайн.

Особенности мобильной версии

Есть несколько моментов, которые полезно помнить, когда создаешь новый дизайн мобильного приложения.

• На сайте есть пространство «вширь», а в приложении — маленький экран, палец пользователя и несколько секунд внимания. Количество действий, которые можно показать сразу, ограничено. Нужно учитывать сценарии одной рукой, на ходу, в транспорте.
• Приложение — это повторяющиеся сценарии. Если на сайте пользователь может погулять, то в приложение он приходит заходит с конкретной целью. Дизайн выходит из этих сценариев.
• Дизайн мобильного приложения упирается в особенности платформ: разные гайдлайны, ограничения по уведомлениям. Идеальный дизайн «один для всех» не работает.

Редизайн приложения «Дикси»: по шагам

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

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

Запрос «Дикси» был понятный: сделать так, чтобы приложение выглядело, как бренд, и было удобно для покупателей — чтобы не приходилось долго искать выгоды и разбираться в интерфейсе.

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

Например, блок промо-буклета (PDF-каталог акций) был практически неживым — минимальные клики. Пользователи не открывали цифровую листовку, а она занимала место на главной. Решили убрать этот блок, чтобы освободить место для чего-то правда полезного.

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

• QR-код карты лояльности вынесли на первый экран — это самый популярный элемент, люди реально показывают его на кассе.
• Добавили раздел кэшбэка на главную — это вторая зона числу кликов.
• Истории оставили, но опустили ниже — по метрикам пользователи не слишком активно их смотрят, поэтому на первом экране им не место.

Цель — чтобы пользователь сразу видел то, за чем пришел: скидки, выгоды, как сэкономить.

Редизайн был не только про удобство, но и про соответствие новому брендбуку. Что изменили:

• Закругленные элементы (вместо старых угловатых).
• Фирменный шрифт.
• Яркие цвета — оранжевый, зеленый, фиолетовый.
• Маскоты-овощи — появились на экранах запуска и в иллюстрациях. Добавили интерфейсу улыбку.

Когда собрали все основные экраны, началась долгая работа по согласованию. Бизнес хотел показать разные модули (лояльность, каталог, акции), и мы вместе искали баланс: как оставить важное, но не перегрузить.

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

После согласования передали все макеты в разработку. Подготовили аккуратные, детализированные файлы в Figma, сделали UI Kit, чтобы разработчики не придумывали на ходу. Передали все состояния: ховеры, нажатия, ошибки, добавили иллюстрации с маскотами.

Отслеживаем метрики, корректируем курс.

Выводы

Редизайн «Дикси» — пример, как можно быстро, но не наспех обновить большое приложение. Чтобы такой редизайн получился, важно:

• Находить баланс, даже когда мнения разные. Внутри бизнеса много заинтересованных сторон. Все хотят показать свое на первом экране. Важно уметь договариваться и держать фокус.
• Держать темп и не терять фокус. Быстро запускаться — это важно, чтобы не потерять актуальность задачи. Но при этом нельзя бежать, забыв зачем. Темп — да, но осмысленный.
• Уметь сказать «нет» лишнему. Удалить то, что не работает, даже если жалко выкидывать. Лишние функции не помогают пользователю, а мешают.
• Определять, что важно для пользователя прямо сейчас. Не из головы, а по метрикам: чем люди реально пользуются.
• Не забывать про бренд и эмоции. Приложение — это не только про скидки, но и про то, как бренд выглядит и чувствуется. Новый стиль, маскоты, дружелюбие — это то, что помогает приложению быть родным.
• Строить процесс так, чтобы потом было удобно развивать. Собранный UI Kit, готовые макеты, продуманная структура — чтобы разработчики могли быстро дорабатывать, а не чинить по ходу.