Екатеринбург

620100, г. Екатеринбург
ул. Ткачей, д. 23, оф. 506 (Бизнес-Центр «Clever-Park»)

info@1pos.ruОткрыть карту8 (804) 333-05-40

Москва

111024, г. Москва
2й Кабельный проезд, д. 1

info@1pos.ruОткрыть карту8 (804) 333-05-40

Новосибирск

630000, Новосибирск
Советская улица, 5

info@1pos.ruОткрыть карту

Санкт-Петербург

196602, Санкт-Петербург
Артиллерийская улица, 1

info@1pos.ruОткрыть карту

Челябинск

454036, г. Челябинск
Свердловский тракт, 1ж, Парк офисов «СДМ», оф. 415

Открыть карту8 (804) 333-05-40

Выберите тип вашего проекта

Шаг 1 из 5
< Назад
Имя
Номер телефона
Электронная почта
Сообщение
Ваш проект:
Тип
Старт
Цель
Бюджет
Ваши контакты
Заполнить бриф

О клиенте

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

Цель:

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

Идея:

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

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

  • Photoshop
  • Illustrator
  • Figma

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

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

Задачи

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

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

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

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

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

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

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

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

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

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

01

05

Этапы работ

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

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

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

1

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

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

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

2

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

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

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

3

Верстка

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

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

4

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

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

5

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

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

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

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

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

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

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

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

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

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

01

05

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

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

1

Подбор запчастей по марке

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

2

Мультиязычность

Так как компания работает не только по России, но и за рубежом, одной из задач стало создание мультиязычности. Для этого на сайте был реализован специальный переключатель языков. Его особенность заключается в том, что он не просто переводит сайт на другой язык. По сути, для каждого языка мы реализовали отдельный сайт, со своим функционалом и наполнением, а также с возможностью включать\выключать блоки и разделы для того или иного языка.

3

Связи

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

4

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

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

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

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

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

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

01

05

Контакты

АДАПТИВ

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

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

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

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

01

05

>

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

#1970C2
#5BB0FF
#DC261A
#292929
#202020
#808080

Отправить заявку

Оставьте в форме ваши контактные данные и наш специалист свяжется с вами

Нажав на кнопку “Отправить”, Вы даете свое согласие на обработку персональных данных

Спасибо!

Ваша заявка успешно отправлена!
Наш специалист свяжется с Вами в ближайшее время.
Перейти на главную