Редизайн приложения «Дикси» — это...

Зачем вообще делать редизайн

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

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

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

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

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

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

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

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

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

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

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

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

Исследование показало, какими разделами пользуются, а какие открывают редко или игнорируют. Поэтому мы убрали с главного экрана промо-буклеты в PDF-формате и FRESH-контроль — они потеряли актуальность. Магазины на карте перенесли в адресную строку.

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

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

Дарья Алехина, UX-дизайнер Friflex

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

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

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

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

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

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

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

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

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

Результаты и выводы

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

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

Дарья Алехина, UX-дизайнер Friflex