Задача: Сделать редизайн старого сайта с учетом современных тенденций интернет-магазинов и пожеланий клиента, а также seo-ready.
Проблема старого сайта
Прежний сайт был с дизайном старого образца, на CMS WordPress и без корзины. Кроме того функционал сайта не учитывал особенности продукции, такие как: не было возможности отдельно выбрать и просчитать цены на Плоскость и Угол, не было возможности автоматизировать цены на акционных группах товаров и многих других важных для интернет-магазина функций.
Что было решено сделать
Принято решение делать сайт на CMS Opencart с уникальным дизайном, корзиной, автоматическим расчетом угловых и плоских товаров, с подсчетом цены за упаковку и метр квадратный.
Дополнительно клиент попросил внедрить автоматический расчет цен в рублях исходя из закупочных цен в иностранных валютах (евро и доллар) для выбранных категорий товаров.
Процесс создания
После сбора всех требований клиента мы изучили конкурентов и на основе имеющихся данных сделали прототип сайта в Axure. В процессе создания прототипов активно участвовали seo-специалисты, т.к. дизайн должен быть не только удобным для пользователя, но и отвечать маркетинговым требованиям.
Прототипирование
Были разработаны подробные прототипы на сервисе Axure, включая страницу корзины, маркетинговые страницы и технические.
Дизайн
Главная страница
В шапке сайта вынесли самое важное — контакты, меню по внутренним страницам О компании, Акции, информация о доставке и оплате, фотогалерея выполненных объектов из материалов каталога и график работ.
На первом экране решено вынести слайдер с баннерами для акций и специальных предложений с возможностью перехода на внутреннюю страницу с данной акцией или спецпредложением.
Меню каталога было решено оставить на прежнем месте — слева в сайдбаре. Решение было принято по той причине, что у старого сайта уже был трафик из поисковых систем и рекламных сетей. Изменять навигацию коренным образом нельзя в данном случае, т.к. постоянные покупатели “потеряются” на сайте.
На втором экране главной страницы сделан блок преимуществ и хиты продаж:
При этом хиты продаж можно переключать по категориям, сами категории можно добавлять или удалять из блока.
Категория
В категории вывели родительские карточки коллекций и фильтры по цене, спецпредложениям/скидкам, производителям, поверхностям и морозостойкостям.
А также сортировка по цене и популярности — эта метрика основывается на автоматической настройке по популярности покупок, т.е. сортируем сверху те товары, которые чаще отправляются в корзину покупателями сайта.
Сам каталог имеет три вида.
1. Плитка:
2. Список:
3. Прайс:
По умолчанию выбран вид Плитка, поскольку он содержит основную информацию — название коллекции, изображение, цену/скидку и наличие.
Карточка товара
Первый экран карточки товара содержит основную информацию о товаре:
1. Один и тот же товар может продаваться в двух видах — плоскость и угол. В зависимости от выбранной опции меняется цена за упаковку и за метр квадратный. Итоговая цена рассчитывается из стоимости упаковки, которые можно добавлять в карточке товара и отправить в корзину необходимое количество
2. Кнопка В корзину, по нажатию откроется окно с функциями: добавить/уменьшить кол-во, удалить из корзины, цена, информация о скидке, кнопка Продолжить покупки, Открыть корзину и Оформить заказ.
3. Кнопка Купить в один клик, по нажатию на которую открывается специальное окно для сбора контактов:
4. Информация о скидках (при покупке на сайте клиент предлагает скидку на все товары 5%), информацию о доставке и помощи с выбором.
Второй экран карточки товара содержит состав коллекции и характеристики текущего товара:
При этом состав коллекции можно выбирать Плоскость или Угол, цены меняются в коллекции соответственно типу.
Вкладка Характеристики содержит основную информацию о продукте:
Третий экран карточки товара содержит список сопутствующих товаров. Настройка сопутствующих сделана гибко, т.е. можно в каждой коллекции по отдельности выводить свои сопутствующие товары.
Корзина
В верхней части корзины указываем что при покупке через корзину действует скидка. Ниже список товаров, которые удалить или добавить/уменьшить количество. Общая цена и переход к оформлению заказа.
Оформление заказа
Оформление заказа состоит из трех частей:
1. Способ доставки — здесь мы спрашиваем у пользователя как ему удобнее — доставка или самовывоз.
Самовывоз предполагает выбор один из трех магазинов (адреса новых магазинов можно добавлять из админ части сайта):
Расположение пунктов можно посмотреть на карте:
Доставка содержит поле для ввода адреса и информацию о стоимости:
2. Способ оплаты
Предполагает: онлайн оплату, при получении или безналичный расчет.
3. Контакты покупателя
После отправки заявки, менеджер магазина получает email, где видит выбранные товары, а также способ оплаты и контактные данные покупателя.
Верстка и программирование сайта
При верстке сайта использовали микроразметку schema.org, что обязательно скажется на CTR в поиске.
CSS и DOM-структура максимально оптимизированы, не использовали лишних скриптов при отрисовке элементов.
В процессе работы над версткой все страницы проверялись w3.org валидатором, поисковые системы очень любят валидную верстку и награждают такие сайты более высокими позициями.
Итог
Разработка магазина заняла чуть больше 3-х месяцев от начала проектирования, до финального выхода сайта на домен. Сайт полностью подготовлен для продвижения, после выхода на домен был произведен технический seo-аудит.
После разработки, сайт находится у нас на технической поддержке, в процессе которой мы вносим необходимые изменения в функционал и внешний вид сайта по желанию клиента.
Работы по готовности
Поскольку это редизайн сайта, у которого уже был некоторый трафик из поисковых систем, то после того как сайт был сделан на тестовом домене, были произведены необходимые манипуляции для того чтобы сохранить имеющийся трафик из поисковых систем.
