Кейсы

Проектирование интерфейса и разработка интернет-магазина для компании Amarylis

В 2019 году компания перезапускала интернет-магазин, и, столкнувшись с задачей проектирования интерфейса и создания дизайна обратилась
к нам за помощью.
2020
Дизайн
Маркетинг
Брендинг
Bitrix
Интернет-магазин
Интеграции
Компания Amarylis занимается оптовыми поставками зарубежной косметики на рынок России уже 25 лет. Ассортимент компании - косметика среднего ценового сегмента производства Кореи, Великобритании, США, Швейцарии и даже Бразилии. В компании сильный отдел продаж и отлично выстроенные технологии поддержки продаж, представительства в Москве, Санкт-Петербурге и Киеве, собственный учебный центр для клиентов (школа красоты Amarylis).
В 2019 году компания запустила интернет магазин, и, столкнулась с задачей проектирования интерфейса и создания дизайна, для решения которой обратились к нашей команде. После того как мы сделали проект интерфеса и дизайн, подрядчик, который отвечал за верстку и программирование сайта не справился с проектом, и наша команда реализовала проект до конца.

Задача, поставленная заказчиком

Разработать современный и красивый дизайн для интернет-магазина

Резюме проекта

Подготовка к работам:
2 месяца
Начало работ:
январь 2020
Сдача работ:
март 2020

Какими инструментами пользовались

Excel для проектирования каталога, Confluence для документов, Jira для постановки и отслеживания задач, Figma для прототипов и рисования. Такси для встреч с заказчиком.

Разработка
структуры каталога
товаров Амарилис

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

Разработка
пользовательских ролей и проектирование пути пользователя

Мы разработали несколько пользовательских ролей, которые оформили в виде Customer Journey Map. Ассортимент компании Амарилис ориентирован на женщин, компания предлагает средний ценовой сегмент для разных возрастных групп. Мы сделали сегментацию ассортимента по возрасту и цене. Предусмотрели возможность в интерфейсе для оптимизации частоты покупок, их среднего чека.
Для каждой роли рассчитали количество действий до достижения цели, затем вынесли все необходимые пути на карту и сделали необходимые сквозные элементы и экраны.

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

Разработка прототипов

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

Для проекта разработали 52 прототипа. Эта работа заняла у нашей команды 8 дней.

Интерфейсные решения

На сайте предусмотрели не более 3 уровней вложенности для меню. Управляющие элементы разместили в двух меню: одно для товаров и каталога, в котором заложены самые популярные сортировки, другое - для административной и информационной части.
Справа, всегда в зоне видимости находятся основные кнопки: корзина, избранное, личный кабинет.

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

Глубоко проработали подвал сайта (footer): соцсети, подписка на новости, информационные разделы расположены очень удобно.
Интерфейсные решения для интернет-магазина Амарилис

Дизайн решения

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

Разработали правила оформления баннеров для сайта: описали охранные поля, количество текста и рекомендуемая палитра. Это удобно для контент-менеджеров компании.
Дизайн сайта интернет-магазина Амарилис

Мобильные версии

Дизайн подготовили и передали в html-верстку в трех размерах: для настольных компьютеров - 1920px, планшетов - 768px и мобильных телефонов - в размере 320px.
Для планшетов и мобильных отдельно разработали меню сайта, предусмотрели упрощенную компоновку карточек товаров и каталога.

Для каждой из версий разработали свой размер элементов дизайна (кнопок, форм, ссылок, пунктов меню).

На разработку и согласование дизайна мы потратили около 1 месяца.
Сайты
Сверстали и
запрограммировали сайт
Традиционно, верстали макеты проекта с использованием методологии БЭМ.
Важная деталь: для Bitrix (и других систем, использующих Server Side Rendering, например mod-x) верстать макеты необходимо с учетом их дальнейшей шаблонизации. Это существенно сокращает время на подключение верстки к CMS.

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

Магазин реализован на CMS Bitrix, редакиция Бизнес.

Товарный каталог обновляем на основании интеграции с 1С Предприятие.
Вот посмотрите:

Проработка корзины

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

Мы разработали вариант упрощения этапов оформиления заказа в магазине и уместили его в один экран. В едином интерфейсе покупатель может изменить количество товаров в корзине, выбрать вариант доставки и адрес, оформить и оплатить заказ on-line.
При реализации столкнулись со сложностями: работа встраиваемых модулей служб доставки существенно замедляла корзину. 3 модуля в среднем загружались 6-8 секунд, при высокой нагрузке до 20 секунд. Изменение в заказе приводило к ожиданию пользователя.

Мы изменили сценарий таким образом, чтобы загрузка модулей доставки происходила после завершения работы пользователя с этапом. Таким образом, мы увеличили скорость работы примерно в 3-4 раза, и время ожидания сократилось до 2-4 секунд.

Интеграции
магазина Amarylis

Интернет-магазин Амарилис работает с 5ю службами доставки: СДЭК, Boxberry, Почта России и PickPoint и Grastin. Все службы подключены к сайту таким образом, что по каждой из них в корзине пользователь получает не усредненную, а точную цену доставки до своего адреса или выбранного им пункта выдачи заказов.
В корзине подключена система гое-кодирования DaData: она помогает пользователю подсказками при вводе адреса и нормализует его для отправки запроса в платежные системы. Город пользователя система сама определяет на основании IP-адреса пользователя. Жалко, что она работает только по России.

Для приема платежей в валюте, подключили отдельный эквайринг Fondy.

Работаем с Яндекс.Маркет: подключили и настроили обмен товарными остатками магазина. Для Яндекса также сделали автоматическое создание Турбо.Страниц

Дополнительные модули

Так как магазин принимает платежи онлайн подключили онлайн-кассу Эвотор.

По просьбе маркетологов компании мы подключили модуль 1С-Битрикс - Scoder: Покупай больше - плати меньше. Модуль позволяет реализовать более сложные маркетинговые предложений, чем в стандартной конфигурации битрикса: например скидки нарастающим итогом, чередующиеся скидки, товар в подарок от условия и множество других вариантов.
Так как магазин интегрирован с учетной системой, мы настроили механизм агентов на кроне битрикса. Он позволяет поддерживать скорость работы сайта во время обновления каталога.
Дополнительные модули на сайте Amarylis

Разработали
цепочку писем

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

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

Посадочные страницы для отдельных
направлений и промо-страницы

Один из них - промо-страницы мы создавали для работы менеджеров по маркетингу. Промо страницы позволяют подключать категории и подкатегории товаров из каталога сайта. Такую страницу менеджеры компании собирают в отдельном разделе сайта:
Вот посмотрите:
Промо страницы для Amarylis
Кроме этого, мы разработали посадочные страницы для оптовых клиентов компании. При проектировании страницы предусмотрели два сегмента покупателей: сегмент с небольшим чеком (например, частные мастера маникюра) обрабатываем в автоматическом режиме. Сегмент с крупными чеками - направляем на ручную обработку менеджеров.
Вот такая страница у нас получилась:
Посадочные страницы для Amarylis
Вместе со страницей, разработали для отдела
продаж коммерческое предложение.
коммерческое предложение для Amarylis

Конверсия из визита в заявку по источнику
“Контекстная реклама”
    3,2%
    Контекстная реклама

    Примерочная
    лаков для ногтей

    Основной ассортимент компании Амарилис - товары для ногтей. Для продвижения категории твердых лаков, мы спроектировали и реализовали примерочную для лаков. Она позволяет подобрать готовый дизайн пластины и увидеть, как он будет выглядеть на руке.
    Выберите цвет лака:
    примерочная лаков Amarylis

    Немного цифр

    Считаем мы всегда, но не все цифры можем показывать.
    Но некоторые немножко можем!
    12 человек
    Проектная команда
    52 макета
    Спроектировали и одели в дизайн
    12 сервисов
    Интегрированы и работают с CMS Bitrix
    Cмотрите
    похожие кейсы
    Маркетинг
    Брендинг
    Дизайн
    Bitrix
    Еще ...
    SMM
    Реклама
    Полиграфия
    Интернет-магазин
    Интеграции
    Pro-Cosmetik
    Интернет-магазин для сети
    магазинов профессиональной
    косметики.
    2018
    Маркетинг
    Дизайн
    Промо-страница
    Еще ...
    Фото
    Полиграфия
    Интернет-магазин
    Пельменики
    Креативное и маркетинговое
    сопровождение проекта Пельменики.
    2020
    Фото
    Реклама
    B.Billionaire / Opium
    Фотосопроважождение
    магазинов люкс сегмента.
    2019
    Фото
    Реклама
    Noirot
    Совместно с компанией ООО Нуаро наша команда провела предметную фотосъёмку для каталога и рекламы.
    2019
    Маркетинг
    Брендинг
    Дизайн
    Еще ...
    Frontend
    Реклама
    Полиграфия
    Landing page
    Интеграции
    Cut&Go
    Навели порядок в маркетинге салона красоты
    в Москве. Красота - такая красота.
    2018
    Показать еще