Евгений Смирнов: заметки с тегом доставка еды

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

Tue, 23 Jun 2026 00:03:12 +0500

Панда Пицца — сайт для заказа доставки пиццы, закусок, десертов и напитков.

На проекте

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

Задача

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

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

Главная

Повысил акцент на товарах:

Уменьшил высоту шапки, убрал заливку и навёл порядок в вёрстке.
Уменьшил поля по краям, чтобы увеличить карточки товаров.

Вместо карусели баннеров сделал сторисы с акциями.

Новый дизайн первый в карусели:

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

Прокрутка меню
Фиксирую только навигацию и корзину, чтобы отдать максимум вертикального пространства товарам:

Мобильная версия

Карточка товара
Исправил тональность цены, чтобы карточка считывалась актуальной и активной.

Использовал облегчённый основной цвет вместо серого для кнопки перехода на страницу товара:

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

Выделил подзаголовки размером и жирностью вместо низкоконтрастного жёлтого.

Добавил QR-код для скачивания приложения:

Страница товара

Увеличил фото товара и добавил выбор дополнительных ингредиентов:

Была идея сделать страницу вместо модального окна, чтобы дать больше места информации о товаре и элементам управления, а также уменьшить вложенность модальных окон:

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

В мобильной версии открывается полноэкранное модальное окно

Адрес доставки и самовывоза

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

Доставка

Объединил выбор адреса доставки и пиццерии для самовывоза в одном окне, чтобы избежать двойной вложенности модальных окон.

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

При вводе адреса под полем появляются подсказки:

Если адрес не входит в зону доставки, подсвечиваю поле ошибкой после его расфокуса вместо кричащего уведомления:

Самовывоз

После указания адреса товар автоматически добавляется в корзину без необходимости повторно кликать на кнопку «В корзину»:

Мобильная версия выбора адреса доставки

Мобильная версия выбора пиццерии для самовывоза

Корзина

Сделал отдельной страницей, а не модальным окном:

При изменении ширины окна, элементы знают, как им перестроиться:

Была идея разместить корзину сбоку от меню:

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

Списание бонусов

Если пользователь авторизован, в шапке появляется баланс бонусов, которые он может списать:

Авторизация

Для оформления заказа пользователь авторизуется по номеру телефона.

Исправил низкую контрастность акцентного жёлтого и сделал тексты понятнее:

Код подтверждения
Сделал очевиднее кнопку возврата к шагу ввода телефона и автоматическую проверку кода после ввода последней цифры:

Форма заказа

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

Визуально облегчил форму:

Разделил группы полей пространством вместо подложек.
Поля сделал серыми подложками вместо обводки:

Было бы хорошо сохранить подписи слева от полей, как в старой форме, но:

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

Поэтому оставил подписи только у полей с похожими данными — квартира, подъезд, этаж. Если расположить подписи слева, они будут без необходимости выделять эти поля на фоне остальных.

Уменьшил высоту сводки заказа и зафиксировал её при прокрутке:

Вместо общего сообщения об ошибке внизу страницы подсвечиваю красным сами поля:

Если ресторан закрыт, новый сайт предлагает сделать отложенный заказ. Вместо кнопки оплаты показывается кнопка «Указать время доставки»:

Сохранённые адреса

После оформления заказа адрес сохраняется и при следующем заказе компактнее отображается в форме:

Можно добавить несколько адресов:

Или отредактировать текущий:

Отслеживание заказа

После оплаты перенаправляем пользователя на экран заказа:

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

Добавил оценку заказа для сбора статистики и обратной связи от пользователей:

Отмена заказа
Вместо звонка в поддержку на новом сайте заказ можно отменить кнопкой:

Если заказ начали готовить, то при отмене деньги не вернутся, о чём сайт кратко и ясно предупреждает:

Когда заказ передали курьеру, отменить его не получится. Кнопка «Отменить заказ...» меняется на информационное сообщение:

Что было самым сложным

Направлять подопечного дизайнера и в сжатые сроки отдавать результат.

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

Результат

Сайт запустили в срок, и люди начали заказывать еду через него.

Работая в формате аутсорса, я не имел доступа к бизнес-метрикам проекта и не мог оценить влияние нового дизайна.

Что сейчас происходит с продуктом

Я занимался дизайном сайта и поддерживал его в ходе разработки с начала до середины 2025.

В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагался whitebox-сайт.

Евгений Смирнов
Арт-директор

Марина Ткаченко
Дизайнер

IceRock Development
Команда разработки

Электропочта • Телеграм

Помог повысить узнаваемость бренда и увеличить продажи через UX, промо-функции и адаптацию брендинга

Sat, 13 Jun 2026 14:49:46 +0500

Панда Пицца — приложение для заказа доставки пиццы, закусок, десертов и напитков.

На проекте

Сделал дизайн iOS-приложения с базовыми функциями: меню, оформление заказа, отслеживание статуса доставки и оценка её качества.
Адаптировал приложение под Android по гайдлайнам Google Material You.
Встроил в пользовательские сценарии промо-функции: бонусную систему, сторисы для акций и функцию рекомендации приложения друзьям.
Адаптировал интерфейс под новый брендинг, чтобы визуально выделить приложение среди конкурентов.

Задача

Бизнес ресторанов обратился за мобильным приложением, чтобы увеличить продажи и повысить узнаваемость бренда. Приложение нужно было задизайнить, разработать и связать с инфраструктурой клиента за 5 месяцев.

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

Доставка и самовывоз

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

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

Если пользователь нажал «Настроить позже», он сможет вызвать системную модалку без перехода в настройки — через кнопку «Определить местоположение» на карте:

Обрезаем адрес слева, а не справа. Так в строке остаются улица и дом — часть адреса, по которой пользователь понимает, куда доставят еду:

Когда что-то идёт не так, приложение объясняет, что произошло и что делать дальше:

Самовывоз
При включённой геолокации центрируем карту относительно местоположения пользователя и показываем ближайшие пиццерии:

Корзина

Изначально для ввода промокода хотел использовать модальную шторку:

При обсуждении макетов с разработчиком выяснил:

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

Заменил шторку на модальное окно. При его закрытии клавиатура скрывается одновременно с ним:

Оформление заказа

При оплате заказа пользователь запускает цепочку взаимодействий между приложением, бэком и платёжной системой, но ему достаточно знать, что платёж прошёл:

Если банк отклонил платёж, запросил подтверждение или бэк долго получает данные заказа, приложение объяснит, что происходит и что делать дальше:

На проде выяснилось, что бэк может несколько минут возвращать данные заказа. Чтобы медленная система ощущалась работающей, троббер сменяется пояснением и кнопкой «Проверить статус».

Приложение само проверяет статус через заданные интервалы, но кнопка даёт пользователю возможность убедиться, что система работает:

Отслеживание заказа

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

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

Заказ может быть отменён без участия пользователя. В таком случае приложение говорит: заказ отменён, деньги вернутся, бонусы уже вернулись. Если остались вопросы, можно позвонить в поддержку:

Оценивание заказа

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

Адаптация под Android

Клиенту понравился дизайн iOS-приложения, и в процессе разработки он также заказал версию для Android.

Интерфейс адаптировал по гайдлайнам Google Material You, чтобы сделать привычные для Android навигационные паттерны и поведение элементов управления:

После запуска МВП начал встраивать промо-функции

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

Разместил сторисы на видном месте рядом с меню, потому что они связаны с выбором товаров:

Бонусы
Для оформления заказа пользователь авторизуется по номеру телефона.

В смете и на экране статуса доставки показывается, сколько бонусов начислится за заказ:

На главной добавил баланс бонусов, чтобы напомнить о возможности их списать и подтолкнуть заказать больше:

За скачивание приложения дают 1000 бонусов, поэтому добавил в корзину предложение авторизоваться:

После авторизации пользователь может списать бонусы:

Рекомендация друзьям

Если пользователь оценил заказ на 4—5 звёзд, на странице оценки появляется блок «Посоветуете нас?». При ответе «Да» предлагаем поделиться ссылкой на скачивание приложения:

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

Ребрендинг

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

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

Результат

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

Отзыв о работе

«Мне очень нравится результат. Вы большие молодцы. Сделали ровно то, что нужно, ничего лишнего. Всё выглядит аккуратно и современно».
Руководитель проекта со стороны клиента

Что сейчас происходит с продуктом

Я занимался дизайном приложения и поддерживал его в ходе разработки с начала 2024 до середины 2025.

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

В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагалось whitebox-приложение.

Пользователям понравилось расширение функционала, но интерфейс заметно изменился:

«Новый дизайн у приложения стал интуитивно не понятным, старый мне нравился больше, анимации, цвет и так далее, жаль что поменяли дизайн приложения».
Отзыв из App Store

Евгений Смирнов
Дизайнер

IceRock Development
Команда разработки

Евгений Смирнов: заметки с тегом доставка еды

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

На проекте

Задача

Главная

Страница товара

Адрес доставки и самовывоза

Корзина

Списание бонусов

Авторизация

Форма заказа

Сохранённые адреса

Отслеживание заказа

Что было самым сложным

Результат

Что сейчас происходит с продуктом

Электропочта • Телеграм

Помог повысить узнаваемость бренда и увеличить продажи через UX, промо-функции и адаптацию брендинга

На проекте

Задача

Доставка и самовывоз

Меню

Корзина

Оформление заказа

Отслеживание заказа

Оценивание заказа

Адаптация под Android

После запуска МВП начал встраивать промо-функции

Ребрендинг

Результат

Отзыв о работе

Что сейчас происходит с продуктом

Электропочта • Телеграм