Доработка интернет-магазина Добрынинский.рф
О компании
Московский комбинат мучнисто-кондитерских изделий "Добрынинский" — один из старейших в России. Торты, кексы и пирожные комбината уже более 100 лет украшают праздничные застолья и семейные торжества, радуют, вдохновляют и объединяют людей.
Задача:
Улучшить юзабилити сайта за счет проведение следующих работ:
- Создать новую структуру разделов/подразделов каталога товаров (изменение дерева категорий в каталоге согласно требованиям клиента);
- Изменить структуру главной страницы сайта за счет грамотного распределения информации на сайте, в частности меню каталога, а также в части вывода хитов продаж на главную страницу;
- Изменить структуру страницы каталога, сделав ее максимально удобной для выбора продукции и ее покупки.
Реализация:
Прототипы:
Одна из самых главных задач при редизайне страниц - это прототипы.
На этом этапе формируются основные требования и структура будущих изменений.
Клиентом были представлены прототипы для следующих страниц:
- Главная страница сайта;
- Страница каталога товаров;
- Страница подробной карточки товара.
Дизайн/Верстка и внедрение:
На этапе дизайна учтены основные приоритеты от заказчика по цветам: за основу цветового отображения берем фирменные цвета компании.
Главной задачей на этапе дизайна было органично совместить изменения, которые были необходимы по прототипам, и существующий сайт, так как в работу бралась лишь часть страниц сайта. Особенно это касалось нового элемента - каталога слева, который присутствует на всех страницах сайта. А также нельзя было забыть и про адаптив.
Главная страница:
Было:
Стало:
Визуальная часть:
Основные изменения затронули структуру каталога слева и вывод основной части информации на главной странице:
- Логотип компании переместили в левый верхний угол над позициями основного меню - так он всегда будет на виду у пользователя;
- Отказались от слайдера и блока "Наши сотрудники", так как необходимо было освободить место на главной странице для хитов продаж, ведь основная задача сайта (интернет-магазина) - это продажи;
- Блок "Добрынинский и партнеры" после товарных предложений - пересобрали, выделили цифровые показатели;
- Добавили блок "Новости" (выводятся 3 актуальные новости по дате добавления события на сайт) - это удобно, в первую очередь, для пользователей, т.к. нет необходимости в дополнительных кликах по сайту в поисках информации и акций.
Техническая часть:
- Боковое меню каталога (слева) реализовано открытым по умолчанию. Изначально в нем выведены только главные категории с раскрывающимися списками второго и третьего уровней;
- К каждой головной категории добавлена возможность загружать иконку в формате SVG в административной части сайта;
- Так как была создана новая структура разделов/подразделов каталога товаров (дерева категорий) необходимо было проставить редиректы согласно новой структуре для сохранения позиций товара в поиске.
Страница каталога:
Страницы каталога и карточки товара претерпели, пожалуй, более значительные изменения.
Было:
Стало:
Визуальная часть:
- К основному меню каталога слева добавляются фильтры для подбора товаров. В дизайне предусмотрены фильтры: цена, начинка, вес, цвет, вид, но на этапе внедрения (для быстрого запуска) было решено вывести только фильтр по цене;
- Расположение информации на странице стало более компактным и наглядным за счет того, что пользователь теперь сразу может выбрать нужную категорию товара слева (в каталоге), затем посмотреть интересующий его товар на странице, добавить его в корзину справа и сразу перейти к оформлению заказа;
- Корзина фиксированная (прокручивается вместе со скроллом вниз страницы), что удобно для пользователя, так как он всегда видит ее состав и может ее дополнить, либо удалить;
- Если товаров в корзине больше, чем вмещает область блока, то включается полоса прокрутки;
- В каталоге предусмотрены включаемые области для категорийных спец-предложений (баннеры для привлечения внимания пользователя к спец-предложениям).
Подробная карточка товара:
Было:
Стало:
Визуальная часть:
- Перенесены кнопки "Купить" и управление весом, количеством и.т.п. под цену товара, над описанием. Теперь пользователь может сразу выбрать все необходимые параметры для заказа и увидеть итоговую стоимость по позиции. не совершая дополнительных кликов на корзину для просмотра товара;
- Состав товара сделан скрытым слоем, открывающимся по клику на "Состав", для экономии места, а также чтобы не растягивать карточку товара;
- Вкладки "Доставка" и "Оплата" убраны из карточки товара и перенесены под корзину в виде ссылок на всплывающие окна. Такая реализация позволяет пользователю всегда иметь на виду необходимую информацию по условиям оплаты и доставки выбранного товара, без перехода на отдельные страницы сайта.
Результат работы:
Изменения затронули не только редизайн, но и функционал работы сайта, заметно упростили процесс пользовательского юзабилити.
- Процесс выбора товара стал значительно быстрее благодаря подробным пунктам меню слева;
- Информация по заказу, его стоимости стала наглядна для пользователя благодаря внедрению новой корзины.