Онлайн-платформа с узнаваемым лицом
Яркое решение для крупной сети вейп- и кальянной продукции
Как мы делаем:
О клиенте
Smoke Market — быстрорастущая сеть специализированных магазинов табачной и никотиносодержащей продукции, кальянных товаров и аксессуаров с географией от Екатеринбурга до Кургана и Калининграда.
Задача
Показать реальный магазин в онлайне и не выйти за рамки закона
Основной вызов — превратить сайт в рабочий инструмент для сети, не превращая его в классический e-commerce. Нужен был сценарий, где покупатель выбирает товары в каталоге, видит наличие по адресам и оформляет резерв, а покупка и проверка возраста происходят уже в магазине.
Параллельно сайт должен поддерживать дополнительный функционал: блог, сервис аренды кальяна, оптовое направление и «приложение» на базе PWA.
система
E‑commerce с личным кабинетом, блогом, и страницами сопутствующих услуг.
отличительные черты
Визуал должен выделяться среди других продуктов ниши и быть ярким и запоминающимся.
начало работы
Поиск визуального языка
01.
Градиент, чёрный и крупная типографика
Мы собрали для Smoke Market новую цельную дизайн-систему: фирменный градиент в закатных цветах, сочетающийся с глубокими фоновыми чёрными блоками, крупные иллюстрации, акцентная типографика и лаконичные иконки. На их основе собраны карточки товаров, баннеры, промо-панели, паттерны и спецблоки под юридические предупреждения и уведомления. В итоге бренд получился узнаваемой сетью с собственным визуальным характером.
процесс
Из логики — в продукт
02.
Без структуры — нет системы
Перед стартом дизайна мы собрали полную архитектуру: от каталога и фильтров до личного кабинета и сопутствующих услуг.
Всё — в логической схеме, где каждому элементу нашлось место. Это обеспечило надёжную основу для разработки.
03.
От технических характеристик до наличия по адресам — без ощущения складской таблицы
Карточка товара собирает всю ключевую информацию в одном месте: технические параметры, связанные категории, подходящие расходники, стоимость и список магазинов, где позиция есть в наличии. Дополнительно вынесено пояснение, что ознакомиться с зарезервированным товаром можно только при личном посещении магазина. Так сайт честно объясняет правила игры и подталкивает к визиту в точку продаж, а не к ожиданию курьера.
04.
Сценарий резерва вместо дистанционной продажи
Мы спроектировали страницу «Резерв» и сопутствующие блоки так, чтобы путь пользователя был простым и при этом юридически корректным. После выбора товара покупатель оставляет заявку, а затем менеджер уточняет детали и подтверждает заказ. На странице прямо говорится: сайт носит ознакомительный характер, сделка совершается только в магазине, дистанционная продажа никотиносодержащей продукции не ведётся. Всё это оформлено в виде читабельных карточек, а не «простыней» юридического текста.
05.
Простой и понятный путь к покупке
Страницу товара мы собрали вокруг реального сценария пользователя: сначала понять, «то ли это», потом — посмотреть цену и наличие, и только потом уже углубляться в детали. Наверху — крупное фото, название, цена, выбор магазина и кнопка действия. Всё важное умещается в первый экран и на десктопе, и на телефоне — без прокрутки к самым нужным элементам.
Результат
Визуальный стиль
Бренд получил яркий, но собранный визуальный язык: фирменный градиент, чистая сетка и простая типографика. Сайт заметно выделяется среди типичных тёмных витрин, при этом не выглядит «кричащим» и не устаёт в ежедневном использовании.
Опыт пользователя
Структура каталога, карточек и резерва выстроена вокруг реального поведения покупателя: понятно, где искать товар, как проверить наличие и что делать дальше. Важные действия и статусы подсвечены аккуратными акцентами, поэтому интерфейс не отвлекает от выбора и помогает без лишних шагов дойти до офлайн-магазина.
PWA и рост
Сайт работает как основная точка входа и на десктопе, и на телефоне: его можно закрепить на главный экран как PWA-приложение, а интерфейс и визуальный стиль остаются цельными на любых экранах. Это упрощает возвращаемость аудитории и позволяет безболезненно наращивать ассортимент и новые разделы сети.
Обсудим проект?
Прикрепить файл
Отправить
Нажимая на кнопку «Отправить», вы соглашаетесь с правилами обработки персональных данных.