Premier Ice – дизайн мобильного приложения для B2B-фудтеха и HoReCa

Логотип Premier Ice на фоне айсберга в открытом море

О проекте

Крупнейший B2B-дистрибьютор продукции глубокой заморозки. Цель — вдвое увеличить онлайн-заказы от партнёров из HoReCa и снизить зависимость от колл-центра.

Иконка приложения Premier Ice на главном экране iPhone рядом с Календарём, Фото и Заметками
Premier Ice на главном экране — рядом с приложениями, которыми пользуются каждый день

Информационная архитектура

Представьте проект как айсберг: визуальные концепции и прототипы — лишь эффектная верхушка, а основная сила скрыта под водой.

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

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

Карта информационной архитектуры приложения: вход, авторизация, главная, каталог, корзина, заказы и профиль с вложенными экранами
Информационная архитектура: все разделы и экраны внутри них

Роли

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

Дерево ролей: гость, клиент, торговый представитель и водитель; клиент делится на директора и сотрудника магазина
Четыре роли и два типа клиента внутри одной компании

Прототипы

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

Мы работали по Lean UX: Think — Make — Check (делаем прототип, проверяем на пользователях, делаем выводы). Так быстро видно, что действительно работает, а что тратит ресурсы впустую, и в работе остаётся только то, что приносит ценность.

Авторизация

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

Схема авторизации в вайрфреймах: ввод телефона, код, поиск компании по ИНН и ветки по ролям
Прототип авторизации: свой путь для каждой роли

Главная

Структура сокращает время до первого осмысленного действия. Персонализация и бонусный баланс мотивируют пользоваться своими преимуществами. Рекомендации и подборки следуют принципу «минимального выбора» — двигаться дальше легко, без перегрузки.

Вайрфреймы главного экрана и экранов, куда он ведёт: поиск, акции, задания и быстрые списки
Прототип главной и её ответвления

Каталог

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

Вайрфреймы каталога: категории, подкатегории, фильтры, выбор торговой точки и карточка товара
Прототип каталога: от категории до карточки товара

Профиль

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

Статистика за период делает работу прозрачной и закладывает основу для будущей геймификации повторных покупок.

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

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

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

Пошаговый сценарий — выбор даты, способа оплаты и подтверждение — выстроен по рекомендациям Baymard и NN/g.

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

Вайрфреймы оформления: корзина, дата доставки, способ оплаты, оплата задолженности по QR-коду и подтверждение
Прототип оформления: от корзины до подтверждения

Результат прототипирования

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

Кликабельный прототип в Figma. Протестирован на 5 клиентах из HoReCa (SUS = 71/100).

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

Дизайн

После проверки концепции мы перешли к детальному дизайну, сохранив структуру и логику сценариев. На основе утверждённых решений собрали UI-кит на компонентах с auto layout, переменных и дизайн-токенах — это дало масштабируемость и единообразие интерфейса. Так удалось быстро наполнить проект реалистичным контентом, проверить визуал на живых сценариях и подготовить дизайн к передаче в разработку.

Гарнитура NT Somic и палитра: коралловый оранжевый, тёмно-коричневый, жёлтый, бирюзовый, зелёный, розовый, фиолетовый и тёплые нейтральные
Одна гарнитура и палитра вокруг фирменного оранжевого

Авторизация

Приветственный экран показывает позиционирование бренда через витрину ключевых партнёров и сильный оффер и даёт пользователю два пути — быстрый гостевой вход или полную регистрацию.

Раньше у клиента была длинная форма регистрации без гостевого доступа: 21% пользователей бросали корзину, когда их просили создать аккаунт. После появления гостевого режима CAC снизился на 7%.

Экран ввода телефона сведён к минимуму действий — один шаг авторизации с мгновенной проверкой. Это сокращает время до первого входа и снижает отток на старте.

Четыре экрана авторизации: приветственная витрина с брендами партнёров, ввод телефона, компания найдена по ИНН, регистрация компании
Авторизация: приветствие, телефон, поиск компании, регистрация

Главная

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

Быстрые ярлыки ведут прямо в нужный сценарий и сокращают число шагов до целевого действия.

Промоблоки и задания на главной возвращают пользователя снова и повышают конверсию в заказ.

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

Поиск объединяет быстрый доступ к товарам, автоподсказки и рекомендации — и становится сильным инструментом допродаж. История запросов и блок «Вы уже заказывали» возвращают к привычным покупкам, а уместные подсказки удерживают в сценарии заказа.

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

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

Каталог

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

Главный экран каталога сочетает подборки и основные категории и помогает быстро перейти от общего просмотра к нужному сегменту. Хиты продаж и промоблоки встроены в ленту и подталкивают к импульсным покупкам.

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

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

Карточка товара даёт всё, что нужно для решения: состав, цену, бонусы и условия акций.

Заметная кнопка «В корзину» с пометкой о спецпредложении подталкивает купить сразу.

Экраны каталога: подборки и категории, выбор торговой точки, фильтры по цене и упаковке и карточка морского коктейля
Каталог: подборки, выбор точки, фильтры и карточка товара

Корзина

Корзина настроена на рост конверсии и среднего чека: список полностью редактируется, акции и бонусы выделены, а блок «Предложения» подсказывает товары, которые увеличивают чек. Задолженность вынесена в заметный модуль с оплатой в одно касание. Шкала минимальной суммы заказа подталкивает к допродаже, а закреплённая кнопка «Оформить заказ» ускоряет оформление и повторные покупки.

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

Всегда видимый «светофор» из трёх цветов превращает контроль задолженности в ненавязчивую геймификацию. Красный блок просрочки работает как визуальная тревога — его естественно хочется погасить. Жёлтый — платежи в ожидании, зелёный — всё оплачено. Просроченная задолженность снизилась на 12%: мотивация выросла, платежи стали быстрее.

Просрочка подсвечивается понятным уведомлением, и оплатить её можно сразу по QR-коду — быстро и прямо с телефона клиента.

Экраны корзины: предупреждение об участии товара в акции, «светофор» задолженности — жёлтый, зелёный, красный — и QR-код для оплаты долга
Корзина: предупреждение об акции, светофор задолженности и оплата по QR-коду

Акции

Раздел «Акции» собирает все действующие предложения в одном месте и работает на средний чек и удержание. Персональные скидки, условия и товары из акций — под рукой, что подталкивает к импульсным покупкам и сокращает путь к оформлению.

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

Все товары акции собраны на одном экране — выбрать и добавить в корзину можно, не выходя из сценария. Блок «Другие акции» предлагает уместные кросс- и допродажи, что растит средний чек и удержание.

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

Экраны акций: список предложений 1+1 и 2+1 с фильтрами, страница акции с товарами и выбор подарка
Акции: список, страница акции и выбор подарка

Заказы

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

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

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

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

Детальная карточка заказа содержит всю нужную информацию и позволяет повторить покупку в одно касание — это экономит время и упрощает регулярные поставки.

Экраны заказов: список со статусами и суммами, фильтр по сумме, календарь периода и детальная карточка заказа
Заказы: список, фильтры, календарь и карточка заказа

Профиль и поддержка

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

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

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

Инвентаризация позволяет быстро добавить оборудование: номер, тип и фото. Компактная форма сокращает время ввода данных в полевых условиях.

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

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

Экран поддержки строится на персональном формате — это вызывает доверие и помогает быстрее решать вопросы.

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

Итоги дизайна

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

iPhone с главным экраном Premier Ice во льду
Готовый главный экран

Результаты

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

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

Ключевые метрики:

  • +28% повторных заказов через приложение за первые 6 месяцев
  • −35% времени на создание заказа у полевых торговых
  • +19% к среднему чеку при использовании персональных рекомендаций

Мы помогли оптовому дистрибьютору замороженной продукции перейти от офлайн-продаж к полностью цифровому каналу: с запуска приложения доля онлайна в выручке выросла до 38%.

Клиент
Premier Ice
Роль
Продуктовый дизайн · UI/UX
Что сделано
Информационная архитектура, Роли пользователей и гипотезы, Кликабельный прототип, тест на 5 клиентах HoReCa, UI-кит на дизайн-токенах, Дизайн мобильного приложения
Premier Ice: B2B-приложение для HoReCa — Андрей Антар