Drop4you — e-commerce-продукт для покупки оригинальных кроссовок с доставкой в Россию. Я пришёл в проект как дизайнер интерфейсов на раннем этапе: из визуальной базы существовал только логотип. Вся остальная система — структура, визуальный язык, интерфейсы и поведение — была спроектирована мной с нуля и доведена до продуктового состояния.
Задача заключалась в создании полноценного интернет-магазина с поддержкой сложных пользовательских сценариев: подбор размеров, работа с брендами и коллекциями, оформление доставки, оплата частями, личный кабинет, скидки и пост-продажное взаимодействие. При этом продукт не должен был выглядеть как шаблонный магазин — ему требовался собственный характер и узнаваемость.
Одним из ключевых решений стал визуальный приём со скошенными углами карточек и промо-блоков. Он появился на этапе поиска стиля и изначально рассматривался как эксперимент. Приём оказался удачным: он добавил интерфейсу динамику, визуальный ритм и стал легко узнаваемым элементом.
В результате скос был принят командой и зафиксирован как часть фирменного стиля. Он используется дозированно — в промо-карточках, акциях и рекомендательных блоках — и не ломает чистоту основного интерфейса.
Я спроектировал все ключевые пользовательские сценарии интернет-магазина:
— главную страницу с навигацией по категориям, брендам и подборкам;
— листинги товаров с фильтрацией и сортировками;
— карточку товара с подбором размеров, доставкой и оплатой;
— корзину и сценарий оформления заказа;
— личный кабинет с заказами, адресами, скидками и подписками;
— вспомогательные контентные разделы.
Элементы интерфейса ведут себя консистентно на всех страницах: состояния кнопок, переключателей, фильтров и инпутов не меняются от раздела к разделу и не требуют переобучения пользователя.
Каталог построен как гибкая система, а не плоский список товаров. Пользователь может фильтровать товары по размерам, стоимости, коллекциям, сезонам, материалам и цветам. Размеры представлены в нескольких шкалах, переключение между ними происходит явно и предсказуемо.
Фильтры работают синхронно с листингом и моментально отражаются в выдаче, без промежуточных экранов и перезагрузок.
Карточка товара спроектирована вокруг основного действия — покупки. Вся вторичная информация доступна, но не мешает принятию решения.
В карточке реализованы:
— выбор цвета и размера;
— добавление в корзину и избранное;
— быстрый переход к оформлению заказа;
— варианты доставки с указанием стоимости;
— интеграция оплаты частями (Яндекс Сплит) с автоматическим перерасчётом платежей;
— таблица размеров и связанные товары;
— отзывы и рейтинг.
Интерфейс выдерживает баланс между информативностью и визуальной чистотой, не превращаясь в перегруженную «простыню».
Подбор размера вынесен в отдельный сценарий. Пользователь видит таблицу соответствий и может сразу посмотреть видео-инструкцию, как правильно измерить стопу. Это снижает количество возвратов и повышает уверенность при покупке.
В продукте появился отдельный сценарий подбора образов. Это не витрина товаров, а рекомендательный слой поверх каталога. Пользователь переключается между стилями («Каждый день», «Офис», «Вечеринка» и т. д.) как между radio-кнопками, без перезагрузки страницы.
Карточки образов поддерживают лайки, динамически меняют выдачу рекомендаций и ведут к подборкам товаров. Каталог дополняется контентным сценарием и перестаёт быть линейным.
Для повышения конверсии и повторных покупок был спроектирован отдельный сценарий подарочных сертификатов. Пользователь может выбрать фиксированную сумму или задать свою — интерфейс работает как input с мгновенным пересчётом значений.
Сертификат оформляется и оплачивается сразу, активируется в личном кабинете, имеет срок действия и поддерживает частичное списание — остаток сохраняется для следующих заказов.
Корзина объединяет покупку и регистрацию в единый сценарий. При вводе кода подтверждения кнопка меняет состояние, а по истечении таймера предлагает повторную отправку. Это позволяет пройти путь без лишних экранов и разрывов.
Дополнительные рекомендации (аксессуары и уход за обувью) встроены аккуратно и не перекрывают основное действие.
Адреса доставки синхронизированы с картой: при вводе адреса он сразу отображается на карте, а при выборе точки — автоматически заполняются поля формы. Поддерживаются курьерская доставка и самовывоз.
Такой подход снижает количество ошибок и ускоряет оформление заказа.
Пользователь может гибко управлять уведомлениями по заказам, скидкам и избранным товарам. Поддерживаются e-mail, SMS и Telegram. Кнопка сохранения появляется только при изменении настроек — интерфейс не давит и не создаёт лишних действий.
Сценарий заказа детализирован до уровня состояний. Пользователь видит полный путь заказа: от проверки оплаты до доставки. Таймлайн меняется в зависимости от способа доставки (курьер, ПВЗ, почта).
Интеграция Яндекс Сплита встроена нативно: график платежей отображается прямо в заказе, суммы пересчитываются автоматически, статусы синхронизируются с общей логикой продукта.
Система скидок построена не только на промокодах. Пользователь может выбрать любимые бренды или коллекции — логика работает как чекбоксы, с возможностью быстро изменить выбор.
Ограничения и условия отображаются сразу в интерфейсе, без скрытых правил. Это повышает прозрачность и доверие к продукту.
В продукт встроен блог с новостями, подборками и гайдами. Он работает как дополнительный вход в каталог: статьи ведут к конкретным моделям, трендам и ценовым подборкам.
Контент усиливает бренд и увеличивает время взаимодействия с продуктом.
Drop4you — это коммерческий e-commerce-продукт, который я проектировал как целостную систему. В нём нет случайных экранов: каждый сценарий выстроен от первого касания до пост-оплаты. Моей основной задачей было создать бесшовный флоу, который минимизирует трение на пути к покупке и поддерживает быстрый рост продукта.
Этот кейс — результат работы не просто с визуалом, а с архитектурой и поведением интерфейса в реальном бизнес-контексте. Я сфокусировался на мобильном опыте и оптимизации критических узлов: корзины, чекаута и фильтрации товаров. Вместо одноразовых решений я внедрил модульную систему компонентов, которая позволяет легко масштабировать ассортимент и добавлять новые функции без перепроектирования всей логики.
В итоге получился инструмент, где дизайн напрямую работает на удобство и скорость совершения сделки, оставаясь при этом визуально чистым и предсказуемым для пользователя.
