Доработка интернет-магазина Добрынинский.рф

О компании

Московский комбинат мучнисто-кондитерских изделий "Добрынинский" — один из старейших в России. Торты, кексы и пирожные комбината уже более 100 лет украшают праздничные застолья и семейные торжества, радуют, вдохновляют и объединяют людей.

Задача:

Улучшить юзабилити сайта за счет проведение следующих работ:

  • Создать новую структуру разделов/подразделов каталога товаров (изменение дерева категорий в каталоге согласно требованиям клиента);
  • Изменить структуру главной страницы сайта за счет грамотного распределения информации на сайте, в частности меню каталога, а также в части вывода хитов продаж на главную страницу;
  • Изменить структуру страницы каталога, сделав ее максимально удобной для выбора продукции и ее покупки.

Реализация:

Прототипы:

Одна из самых главных задач при редизайне страниц - это прототипы.

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

Клиентом были представлены прототипы для следующих страниц:

  • Главная страница сайта;
  • Страница каталога товаров;
  • Страница подробной карточки товара.

Дизайн/Верстка и внедрение:

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

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

Главная страница:

Было:

Стало:

Визуальная часть:

Основные изменения затронули структуру каталога слева и вывод основной части информации на главной странице:

  • Логотип компании переместили в левый верхний угол над позициями основного меню - так он всегда будет на виду у пользователя;
  • Отказались от слайдера и блока "Наши сотрудники", так как необходимо было освободить место на главной странице для хитов продаж, ведь основная задача сайта (интернет-магазина) - это продажи;
  • Блок "Добрынинский и партнеры" после товарных предложений - пересобрали, выделили цифровые показатели;
  • Добавили блок "Новости" (выводятся 3 актуальные новости по дате добавления события на сайт) - это удобно, в первую очередь, для пользователей, т.к. нет необходимости в дополнительных кликах по сайту в поисках информации и акций.

Техническая часть:

  • Боковое меню каталога (слева) реализовано открытым по умолчанию. Изначально в нем выведены только главные категории с раскрывающимися списками второго и третьего уровней;
  • К каждой головной категории добавлена возможность загружать иконку в формате SVG в административной части сайта;
  • Так как была создана новая структура разделов/подразделов каталога товаров (дерева категорий) необходимо было проставить редиректы согласно новой структуре для сохранения позиций товара в поиске.

Страница каталога:

Страницы каталога и карточки товара претерпели, пожалуй, более значительные изменения.

Было:

Стало:

Визуальная часть:

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

Подробная карточка товара:

Было:

Стало:

Визуальная часть:

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

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

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

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