Интернет-магазин «Акварель-Уфа»

1 августа 2016 aquarele-ufa.ru Компания «Акварель» занимается оптовой продажей лакокрасочных материалов, ручного инструмента, садового инвентаря, сантехники и крепежа. За годы работы с 2002 года создали базу клиентов по всей республике. Сайт у компании был, но требовал доработки под современные требования

Задача

Сделать полный редизайн сайта.

Кратко о результате:

  • переработали каталог;
  • доработали интеграцию с 1С;
  • упростили регистрацию;
  • улучшили поиск;
  • изменили дизайн сайт.
Сайт до обновления:

Главная страница до обновления сайта

Главная страница после обновления

Каталог до обновления сайта

Каталог после обновления сайта

Реализация

Подготовка прототипа

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

Вариант № 1 — всплывающее меню. Предполагается, что пользователь должен навести на категорию, затем на подкатегорию и выбрать нужную группу. Например, навести на «Царицинские краски» → «Грунты» → «Торговая марка EUROPLAS». Подобный вариант встречается на сайтах розничной продажи, но на сайте для оптовиков нужна навигация попроще.

Вариант № 1 — всплывающее меню

Вариант № 2 — ниспадающее меню. Предполагается, что пользователь должен нажать на категорию и при этом открываются все товары в этой категории, а в меню появляются вложенные подкатегории. Например, нажать на «Царицинские краски» → открываются краски и можно сразу начать покупки + сбоку разворачивается меню и можно перейти к изучению подкатегорий.

Вариант № 2 — ниспадающее меню

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

Вариант № 3 — всплывающее и ниспадающее меню

Третью версию прототипа утвердили и перешли к разработке дизайн-макетов.

Разработка дизайн-макетов

Подготовили концепцию главной страницы, предложили обновить логотип:

Концепция главной страницы

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

Для экономии ширины экрана перенесли артикул, показатели количества под название товара:

Макет каталога (промежуточный вариант)

Доработали каталог и переместили все показатели в столбец, заменили кнопку «В корзину»:

Макет каталога (финальный)

Подготовили остальные страницы сайта: «О компании», «Контакты», всплывающее меню. Утвердили с заказчиком макеты и перешли к верстке и программированию.

Верстка и программирование сайта

Сделали верстку сайта для десктопа:

Сжатие каталога для узких экранов. Название в 5 строк, столбцы «прижимаются»

Каталог на 1100 px и больше

Доработали поиск:

Сделали так , чтобы в высоту экрана помещалось максимальное количество товаров, а кнопка «Показать все» была внизу монитора.

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

В панели администратора есть все для управления слайдами

Упростили добавление товаров в корзину. Пользователь нажимает на группу товаров в меню и строка с первым товаром становится активной. Сделали возможность управлять клавишами:

  • «Вверх» — добавить товар;
  • «Вниз» — удалить товар;
  • «Enter» — положить в корзину.

Упростили работу в каталоге

Сделали блок дополнительных продаж «Рекомендуемые товары» на главной странице. В панели администратора сайта сделали сетку для настройки рекомендуемых товаров:

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

Настройка сетки рекомендуемых товаров

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

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

Сделали авторизацию только для существующих клиентов:

Форма авторизации

Технический директор Ильжан
Руководитель отдела проектирования и дизайна Олеся
Программист Рамис
Другие работы
Интернет-магазин «Bagira»
Мобильное приложение «Ермак-Уфа. Оптовик»
Новая версия сайта для зоосалона «Багира»
© 2009-2017 ИТ-компания «Атма» Обратная связь  
ул. Чайковского, дом 9, г. Уфа
Республика Башкортостан, Россия
Пишите: post@atmapro.ru
+7 962 542-42-42
Заказать обратный звонок

Обратный звонок

  ||  Закрыть