Ноябрь 9, 2018

Кейс: редизайн интернет-магазина «Летопись»

Интернет-магазин православных товаров Летопись

Время не стоит на месте, и ни один сайт не может оставаться актуальным, интересным и привлекательным без постоянной работы над внешним видом, юзабилити, функциональностью и адаптивностью. И однажды в истории практически любого проекта наступает момент, когда локальными правками уже не обойтись, — нужен редизайн. Именно такую задачу, а также её решение, мы рассмотрим в сегодняшнем кейсе о редизайне интернет-магазина «Летопись» на платформе Битрикс.

Кстати, на примере именно этого проекта мы недавно рассказывали о том, что такое адаптивный веб-дизайн, и как его реализовать.

О проекте

История «Летописи» началась в 2013 году с целью предоставить максимально широкий выбор продукции, которая может понадобиться православному верующему человеку. Интернет-магазин предлагает своим покупателям книги, свечи, иконы, ладан, распятия, масла и лампады, атрибутику для священнослужителей, а также другие православные товары.

Редизайн интернет-магазина на Битрикс шаг за шагом

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

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

Для начала разберем несколько элементов-блоков, которые отображаются на каждой странице данного ресурса – «шапка» (header), меню и «подвал» (footer).

Шапка сайта

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

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

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

Кейс: редизайн интернет-магазина"Летопись"
До редизайна
Кейс: редизайн интернет-магазина"Летопись"
После
Кейс: редизайн интернет-магазина"Летопись"
"Прилипающая" шапка сайта, которая видна при пролистывании

Боковое меню

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

Кейс: редизайн интернет-магазина"Летопись"
Меню сайта до редизайна
Кейс: редизайн интернет-магазина"Летопись"
После всех изменений

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

В целом боковая панель стала менее нагруженной информацией, но более функциональной и практичной.

Кейс: редизайн интернет-магазина"Летопись"
Убрали блоки
Кейс: редизайн интернет-магазина"Летопись"
Меню раздела в раскрытом состоянии

Футер сайта

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

Кейс: редизайн интернет-магазина"Летопись"
До
Кейс: редизайн интернет-магазина"Летопись"
После

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

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

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

Кейс: редизайн интернет-магазина"Летопись"
Подборки товаров
Кейс: редизайн интернет-магазина"Летопись"
Блок подписки на рассылку

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

Не менее значимые страницы на сайте — страницы разделов каталога. Мы не вносили кардинальных изменений в структуру отображения товаров, их все также можно отобразить и плиткой и списком, однако сейчас на каждом товаре выведено намного больше информации. Это очень удобно: в карточке видно количество фото и отзывов, больше сведений о цене и скидках, добавлен функционал «Избранного».

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

Кейс: редизайн интернет-магазина"Летопись"
Было
Кейс: редизайн интернет-магазина"Летопись"
Стало

Страница товара

Едва ли не решающее значение для конверсии в интернет-магазине имеет страница товара. Здесь изменения функционала весьма существенные:

  • добавили полезные кнопки «Предыдущий товар» и «Следующий товар» для быстрой навигации по разделу;
  • добавили вкладки «Описание» и «Содержание» для структурирования описания товара, а также вкладку отзывов, где покупатель может оставить отзыв о данном товаре;
  • прямо со страницы товара клиент может поделится данным товаров в любых соцсетях.
Кейс: редизайн интернет-магазина"Летопись"
До
Кейс: редизайн интернет-магазина"Летопись"
После

Слайдер изображений

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

Более практичным (и адаптивным!) стало перелистывание товаров непосредственно в карточке товара.

Кейс: редизайн интернет-магазина"Летопись"
Вот так выглядит слайдер после нажатия на фото товара

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

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

Кейс: редизайн интернет-магазина"Летопись"

Условия доставки

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

При переходе на страницу «Условия доставки» покупатель получает информацию по условиям доставки для выбранного города. Здесь же при необходимости можно поменять выбранный населенный пункт и посмотреть способы / цены / сроки доставки для любой точки РФ в реальном времени.

Кейс: редизайн интернет-магазина"Летопись"

Другие статические страницы

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

Также мы добавили несколько новых страниц. Например, «Отзывы», где покупатели могут посмотреть все отзывы об интернет-магазине с оценками, а также поделиться своим мнением.

Кейс: редизайн интернет-магазина"Летопись"

Корзина

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

Кейс: редизайн интернет-магазина"Летопись"

Адаптивность

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

На данный момент интернет-магазин «Летопись» полностью оптимизирован под любое разрешение экрана от 320 до 2540 пикселей. Неудивительно, что сайт успешно прошел проверку на адаптивность в Google: https://search.google.com/test/mobile-friendly.

Кейс: редизайн интернет-магазина"Летопись"

Адаптивность шапки интернет-магазина

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

Кейс: редизайн интернет-магазина"Летопись"
До
Кейс: редизайн интернет-магазина"Летопись"
После (смартфон)
Кейс: редизайн интернет-магазина"Летопись"
После (планшет)

Адаптивность каталога интернет-магазина

Кнопки в каталоге при отображении плиткой и списком — большие, что делает интерфейс более удобным для нажатия пальцем на смартфоне. Скролл-панель также крепится к верху экрана и помогает в навигации по сайту.

Кейс: редизайн интернет-магазина"Летопись"
Карточка товара в каталоге (плитка)
Кейс: редизайн интернет-магазина"Летопись"
Карточка товара в каталоге (список)
Кейс: редизайн интернет-магазина"Летопись"
Прилипающая к верху экрана шапка сайта

Резюме

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

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

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

Кейс: редизайн интернет-магазина"Летопись"

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Scroll Up