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

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

Wed, 22 Jul 2026 18:55:31 +0500

GruzOnline — сервис для поиска грузов и машин без посредников

На проекте

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

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

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

Затем согласовал визуальное направление и приступил к проектированию интерфейсов.

Список объявлений

Объявления — основное содержимое приложения, поэтому им отведён главный экран:

При прокрутке вниз поиск и плавающая кнопка создания объявления скрываются, а при прокрутке вверх появляются обратно:

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

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

Без детальной аналитики препродакшн-версия карточки ожидаемо получилась далёкой от реальности:

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

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

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

Как и контакты:

При необходимости можно перейти в профиль автора объявления и убедиться в его надёжности:

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

Поиск объявлений

Грузы можно найти по названию, компании, которая разместила объявление, или пункту маршрута:

Для поиска также доступны фильтры:

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

Создание объявления

Из-за большого количества полей и отсутствия взаимовлияния между ними в мобильном приложении сделал форму пошаговой:

В веб-приложении поля расположены на одном экране и сгруппированы по смыслу:

Перед запуском МВП сгенерировал логотип и доработал его вручную

Логотип адаптируется под ширину экрана:

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

Подходящие объявления

После создания объявления о грузе приложение подбирает подходящие машины, а после создания объявления о машине — подходящие грузы:

Калькулятор выгоды

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

Выгодность груза относительно рынка

AI-помощник для поиска объявлений и их создания

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

Помощника также можно вызвать из приложения, нажав кнопку «Штурман» в верхней панели:

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

По мере общения помощник уточняет параметры, чтобы подобрать объявления:

Если пользователь вводит запрос, который нейросеть не распознаёт как параметр объявления, помощник подсказывает, как его скорректировать:

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

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

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

Потребность постоянно изобретать решения на фоне тяжёлого эмоционального состояния.

Как я с этим справился
Переиспользовал найденные решения. Это создавало рутину, которая помогала двигать проект вперёд.

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

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

Приложения были опубликованы в конце 2025 и постепенно обрастают функционалом и пользователями.

На 22.07.26 мобильное приложение скачали уже 6 000 человек, средняя оценка в сторах — ★4.5.

Продолжаю поддерживать и развивать дизайн продукта в 2026.

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

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

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

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

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
Команда разработки

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

Сделал дизайн ленты «Подслушано» и встроил в неё сторисы, чем помог в 2,5 раза увеличить вовлечённость пользователей и подготовить приложение к монетизации

Fri, 22 May 2026 10:12:41 +0500

Кампус — приложение с расписанием пар, лентой «Подслушано» и анонимными отзывами на преподавателей. Работает на Android и iOS.

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

Мои задачи в рамках стратегии

Визуально обновить Android-приложение, чтобы сохранить текущую аудиторию и создать основу для привлечения новой.
Сделать ленту «Подслушано» со сторисами, чтобы повысить вовлечённость пользователей.
Встроить рекламные блоки внутрь приложения.

Результаты бизнес-стратегии и улучшений Android- и iOS-приложения

Раньше пользователи заходили в приложение в среднем 32 раза в месяц на 35 секунд, а стали заходить 81 раз на 39 секунд.
Количество пользователей увеличилось с 247 000 в 2021 году до 750 000 в 2023 году.
244 000 активных пользователей в пиковые месяца.

Итерационно вернул Android-приложение «из прошлого века»

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

Расписание занятий

Страница занятия

Переходы к вложенным страницам сделал полноэкранными:

Избранные расписания

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

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

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

Отзывы о препродавателях

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

Страница преподавателя

Написание отзыва

Оформление

В приложении были нейтральные светлая и тёмная темы, в которых можно менять основной цвет.

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

«После обновы пропала тёмная тема, вернее она осталась но это скорее голубой в темных тонах».
«Добавьте тогда уж чёрную тему».

Поэтому вернул темы в нейтральные тона:

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

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

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

Лента «Подслушано»

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

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

Добавили пост дня, который выбирался среди всех вузов по количеству лайков за предыдущий день:

Закреплённая кнопка «Предложить пост» закрывала посты и создавала визуальный шум, когда появлялась или исчезала при смене направления прокрутки:

Когда появилась строка сторисов, перенёс в неё пост дня и кнопку «Предложить пост»:

К истории «Пост дня» прикрутили нейронку, которая генерировала контекстную картинку. Нейронка делала такие же трешовые картинки, как и сами посты, поэтому студенты ловили «ха-ха»:

Эту сторис для кейса сгенерировал ChatGPT в 2026 году без дополнительной настройки промпта. Получилось уже не так трешово.

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

Вывод

Я подготовил Android-приложение к привлечению новой аудитории и маркетинговой активности: обновил существующий интерфейс и добавил ленту «Подслушано» со сторисами как основу для рекламных форматов.

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

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

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

Как я с этим справился
Вместе с ЛПР собрали проблемы из отзывов пользователей, обсудили их и я внёс корректировки в дизайн.

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

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

В 2024 продукт зарабатывал и инвестировал всю прибыль в развитие.

На 2025:

Количество пользователей iOS- и Android-приложения превысило 1 000 000.
В среднем пользователи заходят в приложение 109 раз в месяц.
В пиковые месяцы приложение набирало 350 000 активных пользователей.

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

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

Евгений Гребенщиков
Арт-директор

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

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

VEKA Еcosystem — Объединил в единый сервис каталог, калькулятор окон и форму заявки, чтобы покупатели могли выбрать окна и заказать их в одном месте

Tue, 12 May 2026 11:32:50 +0500

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

На проекте

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

Клиент

VEKA Rus — дочерняя компания концерна VEKA AG — мирового лидера в производстве оконных конструкций с годовым оборотом 1,5 млрд. €.

Задача

Бизнес решил объединить приложения «Каталог VEKA», «Замерщик окон 2.0», «VEKA Конфигуратор AR», «VEKA Калькулятор» и административную панель в единый сервис. Это должно сократить время создания, обработки и выполнения заявок от клиентов.

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

Решение

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

Калькулятор как самостоятельный раздел приложения

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

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

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

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

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

Оптимизировали визуальное отображение окна
Раньше дизайнер под каждую комбинацию створок рисовал отдельную 3D-модель, а админ вручную назначал нужную картинку для каждого набора условий.

Проблемы:

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

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

Основы конструкций:

Створки:

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

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

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

А ещё лучше — подумал, как превратить калькулятор в интерактивный лендинг, который совмещает рассказ о продукте с его настройкой.

Связь созданного окна в калькуляторе с формой заявки

Шаг 1 — контактные данные
После нажатия на кнопку «Рассчитать стоимость» открывается форма заявки. Если пользователь авторизован, контактные данные заполняются автоматически:

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

Шаг 3 — уточнения

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

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

Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:

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

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

Например, профилем и его ламинацией:

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

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

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

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

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

Или создать новое окно:

Вывод

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

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

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

Сохранить паттерны навигации, которые сложились в существующих сервисах.

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

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

Приложение выпущено в 2023. После выпуска я завершил участие в проекте.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

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

Евгений Гребенщиков
Арт-директор

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

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

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

На проекте

Список объявлений

Поиск объявлений

Создание объявления

Подходящие объявления

Калькулятор выгоды

Выгодность груза относительно рынка

AI-помощник для поиска объявлений и их создания

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

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

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

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

На проекте

Задача

Главная

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

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

Корзина

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

Авторизация

Форма заказа

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

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

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

Результат

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

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

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

На проекте

Задача

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

Меню

Корзина

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

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

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

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

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

Ребрендинг

Результат

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

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

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

Сделал дизайн ленты «Подслушано» и встроил в неё сторисы, чем помог в 2,5 раза увеличить вовлечённость пользователей и подготовить приложение к монетизации

Мои задачи в рамках стратегии

Результаты бизнес-стратегии и улучшений Android- и iOS-приложения

Итерационно вернул Android-приложение «из прошлого века»

Расписание занятий

Страница занятия

Избранные расписания

Отзывы о препродавателях

Оформление

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

Лента «Подслушано»

Вывод

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

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

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

VEKA Еcosystem — Объединил в единый сервис каталог, калькулятор окон и форму заявки, чтобы покупатели могли выбрать окна и заказать их в одном месте

На проекте

Клиент

Задача

Решение

Калькулятор как самостоятельный раздел приложения

Связь созданного окна в калькуляторе с формой заявки

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

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

Вывод

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

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

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