О проекте
Medar Beauty занимается розничной продажей натуральной корейской косметики напрямую от производителей. Уникальные товары позволяют магазину конкурировать с крупными торговыми сетями.
На момент обращения к нам у клиента было несколько оффлайн-магазинов и раскрученная группа в Instagram.
запуск февраль 2020 г.
Задача
Создать автоматизированный интернет-магазин, в котором покупатели смогут самостоятельно оформить заказ. Помочь бренду наладить онлайн-продажи. Часть трафика мы собираемся направить на сайт из Instagram.
Результат
Интернет-магазин, в котором все процессы протекают без участия собственника. Разгрузили колл-центр, т.к. покупатели с помощью удобной навигации по сайту и фильтров в каталоге сами находят то, что ищут.
Прототипы
На этапе прорисовки прототипов страниц будущего сайта продумали, как покупатели будут просматривать каталог, пользоваться фильтрами, корзиной и оформлять заказы.
Создание прототипов — самый важный этап создания нового проекта. На этом этапе у заказчика и исполнителя складывается общая картина того, как будет выглядеть будущий проект. Для клиента это несомненно плюс — в конце он получит ожидаемый результат без риска переплатить за переделки.
Дизайн
Главная страница
Для интернет-магазина желательно с первой страницы эффектно представлять свои товары. Особенно в сфере продаж косметики, где основная аудитория - женщины, у которых восприятие товаров предопределено эстетикой пространства, а выбор зачастую эмоционален. Поэтому, неслучайно, для прорисовки баннеров была выбрана сочная цветовая гамма, которая также подчеркивает направление органической косметики.
На Главной сделали акцент на популярных товарах, которые можно приобрести в пару кликов. Вывели разводящий блок с основными направлениями магазина. И особое место уделили блоку “Мы в Instagram”
Desktop - 1440 px.
Tablet - 768 px.
Mobile - 320 px.
Дизайн проработан в трех вариантах, чтобы адаптировать верстку под разные размеры экранов.
Каталог
Общий список
В каталоге товаров сделан акцент на функциональности. Просмотр товаров можно изменить на вид списком или плитками. Слева от списка располагается удобный фильтр, в котором при выборе параметра моментально без перезагрузки страницы обновляется отфильтрованная выдача. Если по определенному фильтру нет товаров, сайт автоматически скроет этот параметр.
Карточка товара
Детальная страница товара сделана с акцентом на контент. Красивое фото и информативное описание товаров позволяет клиенту принять решение: покупать или искать дальше. Также ниже на странице алгоритмы предлагают сопутствующие товары.
Корзина и оформление заказа
Корзина
При наличии товаров в корзине, их количество отображается на иконке в шапке сайта. По клику на корзину отображается предпросмотр покупок. Можно удалить товар прямо на всплывающем окне или изменить количество единиц - увеличить или уменьшить. Перерасчет суммы происходит моментально без перезагрузки страницы.
Если даже при отсутствии регистрации, пользователь закроет сайт, выбранный им товар не исчезает из корзины.
Оформление заказа
Процесс оформления заказа мы поделили на шаги, чтобы клиенты не путались в последовательности заполнения данных. Состав корзины клиента всегда у него перед глазами — плашка фиксируется и следует за скроллом.
Сделали валидацию данных, чтобы покупателю было максимально удобно заполнить данные и завершить этап покупки. Проверка на телефон, email, ввод только чисел в числовое поле, букв в символьное поле.
Личный кабинет
Покупатель может просмотреть свою историю покупок и отслеживать заказ в личном кабинете.
Еще немного деталей
Был переработан логотип компании. Предложили клиенту несколько вариантов.
Добавили на сайт оригинальный прелоудер
Прелоудер используется везде, где пользователю приходится немного ждать: при загрузке сайта, серфингу по страницам и там, где происходят сложные вычисления и нужно время для завершения процесса.
Интеграции
Админка
У CMS Bitrix простой и интуитивно понятный административный раздел. Поэтому редактор сайта может создать новую страницу, отредактировать шаблоны email-писем, обработать новые заказы и многое другое без участия программистов.
Интеграция с 1С
Номенклатура из 1С: Предприятие выгружается на сайт в виде каталога. Синхронизация настроена на автообновление каждые пять минут. После оформления заказа на сайте, в 1С моментально появляется новый контрагент с его составом заказа.
Доставка
Сайт определяет город пользователя по IP и предлагает возможные варианты доставки. Для жителей Казани можно выбрать точку самовывоза — оффлайн-магазины Medar Beauty.
Для автоматического подсчета стоимости доставки за пределы Казани мы выбрали готовый модуль из Маркетплейс.
Оплата
Магазин принимает оплаты банковской картой с помощью модуля «Сбербанка».
Отзыв клиента
Это был лучший опыт работы со специалистами по сайтам
Другие проекты
Обсудить проект
Оставьте заявку и мы с вами свяжемся в течение часа