Процесс создания интернет-магазина world-sewing-machines.ru

Редизайн интернет магазина
под системой управления электронной коммерцией opencart.

Начало

Визитка Клиента

Insline Logo

С 1998 г. компания торгует оптом швейным оборудования в России, Беларуси, Украине. С 2012 открылся розничный интернет-магазин в Москве.

  • 2012Год создания

  • Доработанныйopencart 1.5.1.3

  • Основной канал продажЯндекс.Маркет\Контекст\Поиск

  • Дата обращения в Ardoz 2016 год

  • Итоговая работа Открыть

Этап 1

Знакомство Переговоры

Знакомство

Менеджер совершал стандартные холодные звонки, человек со стороны магазина сказал стандартное "не интересует".

Через месяц звонок в офис…

Компания Ardoz. Меня зовут Наталья, добрый день! Слушаю вас!

Добрый день, мы бы хотели заказать у вас редизайн сайта...

Переговоры

На встречу клиент приехал очень подготовленным, с нарисованной на листочке главной и карточкой товара. Даже шрифт клиент попросил использовать именно Opensans.

Общие вопросы

  • На каком движке советуете делать интернет-магазин?

  • Shop Script 7 или 1С Битрикс в зависимости от нюансов

  • Делаете ли сайт под мобильные устройства?

  • Да, делаем только адаптивные интернет-магазины

Специфические вопросы

  • Можем ли мы добавлять инструкции для товаров?

  • Да

  • Есть ли выгрузка в яндекс маркет и заказ на маркете?

  • Это бесплатный модуль от разработчиков движка с полной поддержкой функции заказ на маркете.

  • Сможем ли мы обеспечить загрузку всех основных страниц магазина менее 2.5 секунды?

  • Конечно!

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

Этап 2

Прототипы Дизайн

У нас современный подход к разработке!

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

Мы давно уже знали что чем быстрее разработка перейдет в браузер, тем продуктивнее станет работа. Поэтому на этапе дизайна были нарисованы несколько страниц для создания и понимания общего стиля сайта. Вся остальная работа производится в браузере. В нашем штате работают талантливые дизайнеры, которые знают язык стилей и программы обработки графики. Что в свою очередь позволяет нам быть впереди 90% других студий, которые до сих пор работают по устаревшей схеме. Да-да, именно те студии которые предлагают pixel-perfect верстку, совершенно не понимая что это уже абсолютно не работает. В то время как они пытаются высчитать пиксели в макете для одного экрана - мы создаем сайты, которые отлично выглядят на смартфоне, планшете, маленьком ноутбуке и большом мониторе.

Новые идеи и правки текущих версий

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

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

А давайте кое-где поправим?

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

Дизайн информационных страниц

Одно из наших направлений - дизайн информационных страниц. Было разработано 5 страниц для сайта https://instline.ru/. Запрашиваем максимум данных для страниц и вперед.

  • Инстлайн о компании
    instline.ru - О компании
  • Инстлайн контакты
    instline.ru - Контакты
  • Инстлайн доставка
    instline.ru - Доставка
  • Инстлайн гарантии
    instline.ru - Гарантии
  • Инстлайн оплата
    instline.ru - Оплата

Цена на услуги инфостраниц

3 страницы

14 700

Стоимость одной страницы:
4900 руб.

7 страницы

29 400

Стоимость одной страницы:
4200 руб.

Этап 3

Верстка Программирование

Что сказать про верстку?

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

Мы сделаем вам сайт, который будет работать на всех устройствах. Поэтому не мешайте нам работать, высчитывая пиксели в макете и браузере. На верстке изменения части отступов и размеров блоков неизбежны, и мы делаем это ради кроссбраузерности и кроссплатформерности. Проще говоря, когда выйдет iphone 10, сайт на нем тоже будет великолепен.

Как работает сайт в браузере?

Для демонстрации мы записали два небольших видео готового сайта. Для того что бы вы больше понимали ту выгоду, которую мы предлагаем. В первом видео демонстрация устаревшего adaptive подхода. Во втором современный, используемый нами, responsive подход. Этот подход позволяет больше внимания уделять контенту сайта. В то время как adaptive сосредатачивается на конкретных разрешениях экранов.

Adaptive - (устаревший)

Responsive - (более современный)

Вместо устарешвей adaptive мы используем responsive верстку.

Программирование

Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему.

Не смотря на то, что клиент пожелал только стандартный функционал системы управления shop script 7, по ходу работы выяснился ряд пожеланий, которые отсутствуют в базовой поставке.

Также мы покупали дополнительные модули, которые мы считаем должны быть базовыми, но разработчики CMS(движка) другого мнения.

К слову все эти модули также отсутствуют по-умолчанию в 1С-Битрикс, как и в Shop-Script 7.

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

Модули которые мы купили

  • Страницы брендов с описанием и товарами данного бренда

  • Заказать в 1 клик

  • Документация к товару (инструкции, сертификаты и т.п.)

  • Обратный звонок

Модули которые мы разработали сами

  • Подарки к товару на выбор

  • Запрос карточки компании, если клиент – юр. лицо (реквизиты при оформлении заказа посчитали сложным вариантом)

  • Доработки под мульти цены в карточке товара

  • Модуль «подарки к товару на выбор»

    Требования к подарку были такие:

    1. Подарков должно быть несколько, выбрать можно только один

    2. Возможность поменять подарок прямо в корзине

    3. Подарком может быть любой товар на сайте

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

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

    Совместно с клиентом потратили много часов, чтобы подобрать необходимые размеры и расположение элементов в блоке подарка. Компактность блока осложняли разные длины наименования и цен подарков, которые «плыли» на мобильных экранах.

    Карточка товара с подарком

    Товар с подарком на списке плиткой

    Товар с подарком на построчном списке

    Товар с подарком в корзине

    Назначение подарка в карточке товара

    Назначение подарка в карточке товара

  • Модуль брендов

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

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

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

    Страница бренда

    Список брендов

    Список брендов

  • Запрос карточки компании, если клиент – юр. лицо

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

    Выбор юр. лица при оформлении заказа

    Письмо с запросом карточки компании

  • Цены в карточке в зависимости от параметров

    На ряд карточек товара нужны были мульти цены, т.е. цены менялись в зависимости от параметра «Диаметр». Некоторые доработки были сделаны под этот функционал.

    В целом это стандартный функционал shop-script 7, но кроме стандартного выбора диаметра заказчик попросил добавить таблицу (на скриншотах «прайслист») . Через прайслист можно в удобном виде посмотреть цены и сразу добавить в корзину.

    Также сложности возникли с разным видом фрез в списке товаров, перепробовав возможные варианты, пришли к выводу, что цена для фрез будет прямо в поле выбора диаметра. Это необходимо для ровной сетки товаров.

    Карточка товара с мульти ценами

    Обсуждаем сверла в скайпе...:)

    Отличие сверл с выбором диаметра в списке товаров

Конец?

Постоянное улучшение

Посмотрев на макеты, скриншоты сайта инстлайн и живую версию по ссылке - вы заметите огромное количество отличий. Почему? Потому что сайт требует постоянных улучшений - маленьких/больших это не важно. Действительно хороший сайт как живой организм - развивается постоянно.

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

P. S.

Заметки

Послание от клиента

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

Исходя, из этого вдумчиво выбирать тип каждой характеристики, например, если в категории "Дрели" нужен фильтр по характеристике "Напряжение аккумулятора", то удобнее характеристику делать типом чекбокс, а не просто числом. Далее пример скриншотом

Как выглядит фильтр при разных типах характеристик у товара

Цитата клиента о фильтрах:

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

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

Совет таков: уделяйте особое внимание созданию фильтров и не только ваши покупатели, но и вы сами будете получать удовольствие от работы вашего сайта!

Лично я бы оценил важность фильтров на сайте аж в 50% успеха!"

С уважением, генеральный директор ИнстЛайн