Редизайн інтернет-магазину на 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-показників: кількість переглянутих сторінок, час перебування користувача на сайті, рівень конверсії. Все це спричинило природне просування сайту в пошуковій системі.
О проекте
Наше сотрудничество с интернет-магазином «Билка» — лидером по продаже аксессуаров для мобильных телефонов и планшетов в Украине — длится уже довольно долго. Сайт систематически поддерживается и развивается с помощью команды Вебнавтов. Проводится 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-показателей: количество просмотренных страниц, время пребывания пользователя на сайте, уровень конверсии. Всё это послужило причиной естественного продвижения сайта в поисковой системе
Комментарии