Процесс создания интернет-магазина INSTLINE.RU

Создание интернет магазина
под системой управления электронной коммерцией Shop-script 7.

Начало

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

Insline Logo

Интернет-магазин ИнстЛайн c 2009 года торгует строительным инструментом и оборудованием, садовой техникой, средствами малой механизации, а так же расходными материалами.

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

  • Была собственнаяCMS

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

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

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

Этап 1

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

Знакомство

Один из сотрудников Ardoz покупал в магазине Instline.ru масло для газонокосилки. Забирал самовывозом из офиса и, разумеется, предложил сделать новый сайт, т.к. текущий дизайн был старомоден. Так и познакомились.

сотрудник ardoz.ru

Решили посадить газон на даче. У знакомых оказался культиватор, но нужно масло. Полез в Яндекс Маркет.

Захожу на первый сайт – цена низкая, сайт по внешнему виду ужасен. Захожу в контакты. Они в нашем БЦ! В 150 метрах! Решено – беру! Звоню, подтверждают наличие, иду. Захожу в соседнее здание, нахожу нужную дверь. Думаю: «Вряд ли кто-нибудь захочет что-то слушать про сайт» Но попытка – не пытка.

Мол так и так, занимаемся сайтами, сидим в соседнем здании, а ваш сайт мягко говоря не блещет… Как ни странно, менеджер проявляет интерес к моему порыву, говорит, что тоже думали с руководителем (который отошел на обед) над сайтом и что надо с ним что-то делать, просит оставить контакты.

Ухожу.

Один год спустя...

Прошел год. Тишина. Газон пора стричь. Но нужно масло для газонокосилки. Пытаюсь найти этот «замечательный» сайт, но безуспешно. Ладно, пойду сразу к ним, офис-то я помню.

сотрудник ardoz.ru

Здравствуйте! Я опять за маслицем, есть?

Да. А вы уже у нас покупали?

mini instline.ru
сотрудник ardoz.ru

Да. И по сайту предложение делал.

А мы контакты потеряли. Давайте еще раз, мы почти созрели.

mini instline.ru
Через пару недель звонок в офис…
сотрудница ardoz.ru

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

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

mini instline.ru

Переговоры

На встрече клиент задал ряд общих вопросов и ряд специфических.

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

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

    mini instline.ru
  • Женек ardoz.ru

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

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

    mini instline.ru
  • Женек ardoz.ru

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

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

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

    mini instline.ru
  • Женек ardoz.ru

    Да

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

    mini instline.ru
  • Женек ardoz.ru

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

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

    mini instline.ru
  • Женек ardoz.ru

    Конечно!

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

Этап 2

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

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

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

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

  • instline главная
  • instline список товаров таблицей
  • instline список товаров плиткой
  • instline карточка товара
  • instline корзина
  • instline письмо
  • instline оформление заказа
  • instline сравнение товаров
  • instline мои заказы
  • instline мой профиль

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

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

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

Вот простой пример:

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

Утвержденная шапка старая
Утвержденная шапка новая
Готовая шапка

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

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

Наш трекер задач

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

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

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

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

3 страницы

14 700

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

7 страниц

29 400

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

Этап 3

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

Технические параметры нашей верстки

  • Тип версткиОтзывчивая верстка на float

  • ФреймворкНет

  • BreakpoinsНеограниченно

  • УстройстваВсе

  • Поддержка браузеров Все современные

  • Графика Независимая от разрешения

  • Микроразметка Для поисковой оптимизации

Тип Верстки

Отзывчивая верстка на float (для flexbox считаем рано).

Фреймворк

По умолчанию не используем.

Breakpoins

Breakpoints - точки остановки, на которых ваш сайт меняет расположение элементов.

Устройства

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

Поддержка браузеров

  • Internet Explorer 10.0 и выше;
  • Яндекс.Браузер 15.9 и выше;
  • Google Chrome 40.0 и выше;
  • Mozilla Firefox 15.0 и выше;
  • Opera 17.0 и выше;
  • Safari 5.0 и выше.

Графика

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

Микроразметка

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

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

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

Гифка отзывчивой или адаптивной верстки

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

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

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

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

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

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

Тестирование на реальных устройствах нашими профессионалами

Красивая девушка на ardoz.ru
скрин инстлайна на iphone 7

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

Измерять продуктивность программиста подсчетом строк кода — это так же, как оценивать постройку самолета по его весу. © Билл Гейтс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Назначение подарка в карточке товара
  • Модуль брендов

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

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

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

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

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

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

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

    Редактирование бренда

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цифровое сравнение старого и нового интернет-магазина

  • Отказы

    -26%
  • Глубина просмотра

    +33%
  • Время на сайте

    +62,9%
  • Скорость загрузки

    -1cек.
  • Заказы

    +125%

Посмотреть подробную таблицу

Плюсы\минусы работы по проекту

Минусы

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

Плюсы

  • Заказчик хорошо понимал, что нарисовать даже 10 уникальных иконок это не «дел на 5 минут», и даже не на час.
  • Утонченный вкус клиента и любовь ко всем деталям интернет торговли. Трепетное отношение к фотографиям товаров, что сильно влияет на восприятие интернет магазина.
  • Тщательное ведение базы заказчиком: качественное заполнение характеристик, описаний, закрепление документация, настройка фильтров.
  • Быстрая реакция клиента на все вопросы, макеты и просьбы с нашей стороны. За это отдельное спасибо!
Конец?

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

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

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

P. S.

Заметки

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

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

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

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

Внешний вид фильтра интернет магазина

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

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

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

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

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

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