Автомагазин Liqui Moly e-commerce

О клиенте

Liqui Moly (Ликви Моли) - это инновационная и динамично развивающаяся немецкая компания, региональный представитель LIQUI MOLY на Урале. Масла и автохимия компании LIQUI MOLY имеют допуски крупнейших мировых автопроизводителей: Mercedes-Benz, BMW, VW, Porsche, MAN, Volvo.

Цель:

На этапе разработки сайта www.liquimoly-ural.ru стояла задача сделать удобный интернет-магазин по продаже продукции «LIQUI MOLY».

Идея:

Разработка брендового сайта в стиле официального дилера.

Инструменты:

Photoshop
Illustrator
Figma

liquimoly-ural.ru

Целевая аудитория

Частные автовладельцы
Предприятия с автопарком

Задачи

Маркетинговое исследование

Анализ сферы деятельности.

портрет пользователя

Составление портрета целевой аудитории.

дружелюбный интерфейс

Разработка дизайн проекта в соответствии с брендбуком, реализация понятного дизайна и интуитивной навигации по сайту.

Удобная карточка товара

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

Личная история заказов

Реализация личного кабинета.

Этапы работ

сбор информации

На начальном этапе разработки мы детально изучили отрасль, описали целевую аудиторию будущего сайта и провели исследование конкурентов по данной тематике.

На основе полученных данных, мы составили схему дальнейшей работы.

Прототипирование

На следующем этапе мы составили карту переходов по сайту и составили полную карту сайта.

На основе полученной структуры мы начали отрисовку первого высокодетализированного прототипа сайта, в котором наглядно показали расположение всех графических элементов и их взаимодействие между собой.

Разработка дизайна

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

На основе утвержденного дизайна мы написали спецификацию для последующей верстки сайта.

Верстка

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

Верстка сайта кроссбраузерна и абсолютно адаптивна, из-за чего одинаково корректно отображается на всех устройствах.

Программирование

На заключительном этапе мы интегрировали сайт в систему управления контентом (CMS) Битрикс 1С и объединили верстку сайта с его функциональной частью.

Структура сайта

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

ГЛАВНАЯ СТРАНИЦА

структура и концепция

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

Все подразделы наглядны и интуитивно понятны, в них можно попасть буквально с помощью двух кликов.

Прототип сайта

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

Уникальность сайта

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

Информативный каталог

Проработан каталог отображения товаров, позволяющий отображать в плитке наличие скидки на продукцию, акции (при ее наличии) и статус наличия товара на складе.

Интеграция с 1С

Настроено автоматическое обновление цен, а также отображение актуального наличия товаров из 1С, средствами 1С-Битрикс.

Удобный подбор масла

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

Личный кабинет

В личный кабинет подгружаются текущие акции, предложения.

Просмотр истории заказов, с возможностью проверить статус отгрузки и повторить заказ.

Блок, позволяющий авторизовавшись написать обращение директору или задать уточняющий вопрос, здесь же отображаются ответы.

Преимущества авторизации

Авторизовавшись, пользователь видит другую версию сайта – появляются дополнительные баннеры, указывающие на преимущества покупки, меняются цены у товаров.

Система скидок

На сайте реализована скидочная система, зависящая от суммы покупки. Скидка проставляется автоматически, а условия можно задавать через административную панель.

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

Было проведено альфа-бета тестирование карточки товара. Создано две версии карточки товара и проведен тест с помощью инструментов 1С-Битрикс.

По итогам теста была выявлена наиболее удобная и конверсионная карточка товара. В ней были учтены следующие моменты:

Удобно представлена возможная фасовка товара;
Навигация по информационным блокам;
Цена в корзине;
Блок, кратко описывающий способы доставки.

ВНУТРЕННИЕ СТРАНИЦЫ

Также были созданы еще 14 внутренних страниц и вариаций их отображения:

Контакты

АДАПТИВ

При разработке сайта, была детально подумана и его мобильная версия. Помимо версии для Desktop, сайт был разработан под следующее разрешение экрана:

Мобильный телефон 320*480px

Мобильная версия

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

Цвета и типографика

#1970C2

#5BB0FF

#DC261A

#292929

#202020

#808080