Редизайн интернет-магазина на Shop-Script
О проекте
Наше сотрудничество с интернет-магазином «Билка» — лидером по продаже аксессуаров для мобильных телефонов и планшетов в Украине — длится уже довольно долго. Сайт систематически поддерживается и развивается с помощью команды Вебнавтов. Проводится SEO-оптимизация, а также реализуется множество функциональных доработок, без которых сложно продвигаться в современной е-коммерции. Несколько лет назад сайт удачно «переехал» на более новую систему управления контентом (CMS) с открытым исходным кодом — Shop-Script 7.
Но современный мир очень быстро меняется и необходимо вовремя реагировать на все изменения, чтобы «быть в тренде». Мы заметили, что сайт визуально устарел — его интерфейс перестал быть удобным в использовании, стал казаться «тяжелым» и не таким привлекательным. Параллельно стали снижаться и аналитические показатели — трафик, время пребывания пользователя на сайте, процент конверсий. Также, необходимо было поработать и над адаптивностью. Все это привело к решению провести редизайн сайта.
Общая идея и редизайн главной страницы
Так как дизайн сайта изначально разрабатывался нашим дизайнером индивидуально для клиента, все изменения мы внедряли на основе уже имеющейся концепции: общая идея, название, логотип и слоган, цветовая палитра. Такой подход помог нам удержать существующую у компании аудиторию, сделать так, чтобы и после редизайна привычный покупателю сайт был четко узнаваем.
Вот так стала выглядеть главная страница после обновления:
Сайт визуально упростили, сделали прозрачнее, убрали из верхней части нагроможденные конструкции, состоящие из реквизитов, адресов и телефонов магазина. Вместо этого всю необходимую информацию вынесли одной строкой в шапке (верхней части сайта) и создали отдельную страницу: Меню=>Контакты:
Также эту информацию продублировали и в футере — нижней части сайта:
Страницы с товарами в выбранной категории
Страницу с каталогом товаров выбранной категории хотелось расширить, а также добавить ей лёгкости и прозрачности. Убрав пустые поля по бокам, переместив каталог и фильтр, мы облегчили визуальное восприятие страницы. Фильтр сделали настраиваемым, чтобы можно было отсортировать товар по заданным параметрам — производителю и модели.
Проработки требовали и карточки товара. Мы сделали их компактнее, но вместе с тем увеличили само изображение товара. Изменили шрифт: он стал более читаемым и приятным для глаз. Цветовую палитру, в которой представлен товар, вынесли в виде цветных индикаторов сбоку. Выбрав желаемый цвет и нажав на него, меняется картинка товара. Так, пользователь может выбрать цвет понравившейся модели.
Кроме цены, кода и названия, к каждой карточке товара добавили рейтинг, кнопки «к сравнению», и «в корзину».
Теперь, после всех изменений, страница стала более облегчённой, а за счёт увеличенного пространства на ней отображаются не три, а сразу шесть видов товара.
Страницы — карточки товара
Страницы с изображением выбранного товара также получили больше места. Это дало возможность уместить максимальное количество информации о продукте на странице. Логично вписался в концепцию небольшой блок с информацией о наличии товара, ценой, кнопкой «Добавить в корзину» и предложением «Оплата частями».
Для изображений добавили функцию увеличения картинки по клику, чтобы пользователь смог рассмотреть понравившийся товар более детально и в разных ракурсах:
Добавление товара в корзину
Благодаря яркой и заметной кнопке «Добавить в корзину», стало намного проще сделать заказ. Она удобно расположена и призывает покупателя к действию.
При нажатии кнопки «Добавить в корзину», присутствует эффект «перелетающего» в корзину товара. Так и хочется «ходить» по страницам и «складывать» в корзину понравившийся товар!
После добавления в корзину, пользователь сразу видит количество выбранных товаров и их общую стоимость. Можно приступать к оформлению заказа.
Оформление заказа
Чтобы покупателю не пришлось заполнять большое количество полей, внося о себе информацию, страницу оформления заказа максимально упростили:
Для постоянных покупателей осталась возможность создать личный кабинет, чтобы автоматизировать процедуру оформления заказа. Теперь сделать это можно буквально в два клика:
Оформление блога
Блог в разделе «Новости» облегчили для восприятия, разделив контент на разделы: «Все новости», «В помощь потребителю», «Новости брендов», «Телефоны, смартфоны, характеристики». Так пользователю будет проще сориентироваться во всем многообразии контента.
Контент легко воспринимается за счёт прозрачной фактуры, ярких изображений и отсутствия нагромождений на странице.
Адаптивный веб-дизайн
Так как мобильный трафик сегодня значительно превышает количество десктопных посещений, современный сайт должен корректно отображаться на различных устройствах. Сайт bilka.com.ua также наделен адаптивными свойствами. Легко и быстро он динамически подстраивается под мобильную версию. Понятное и лёгкое в использовании меню дублирует основную версию сайта.
Визуально разграниченные разделы не создают путаницы в ассортименте на маленьком экране, а удобная корзина позволяет беспрепятственно оформить заказ:
Обновление версии Shop-Script (с 7 до 8)
Поскольку изменения в дизайне затронули не только визуальную, но и функциональную часть, мы выполнили обновление платформы с Shop-Script 7 до Shop-Script 8. Чтобы после всех внесенных изменений сайт работал безупречно, поправили возникшие проблемы совместимости кода. Теперь владельцы и администраторы интернет-магазина bilka.com.ua развивают свой бизнес с помощью новейших функций, которые сегодня предлагает Шоп Скрипт.
Заключение
Благодаря комплексному подходу наших специалистов к редизайну, сайт bilka.com.ua получился стильным и современным. Лёгкий и быстрый, логически понятный пользователю, он стал эффективным инструментом в е-коммерции.
Обновлённая стилистика и функциональность привели к росту SEO-показателей: количество просмотренных страниц, время пребывания пользователя на сайте, уровень конверсии. Всё это послужило причиной естественного продвижения сайта в поисковой системе
Комментарии