Кейсы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Технический надзор

После размещения ими сайта мы провели аудит, и выявили 620 несоответствий верстки макетам. Команда не смогла сверстать мобильную и планшетную версии сайта (при наличии макетов каждой страницы), не справилась с подключением фильтров и модальных окон, выкатили сайт на production-сервер без прописанных метатегов.
По данным самой компании, они взяли за разработку сайта 1 700 000 рублей. На разработку потратили 2 месяца.

Результат работы

За 4 рабочих недели наша команда спроектировала, сделала прототип и нарисовала дизайн крупного интернет-магазина
5
Человек проектная команда
52
Макета спроектировали и одели в дизайн
3
Литра морковного сока выпили на этапе подготовки проектной документации