Разработка «Нестандартного» интернет-магазина для компании Стандарт

Концепция и дизайн

Напомню наши основные этапы работы над проектом:

Работа над интернет-магазином компании «Стандарт» началась с написания концепции и создания прототипа главной страницы. Концепцию — некоторые говорят «Видение проекта» — мы пишем для того, чтобы максимально полно ответить на вопрос “Зачем заказчику нужен сайт?”. Кроме того, мы передаем Концепцию в работу дизайнеру для подготовки макета главной страницы.

В Концепции сайта компании Стандарт мы описали задачи, которые должен решать сайт:

  • Повысить продажи оборудования за счет предоставления всей необходимой информации о товарах и возможности их сравнения;
  • Привлечь новых клиентов с помощью снижения цен на товары интернет-магазина;
  • Выполнять функцию точки продаж с помощью предоставления удобного интерфейса покупки товаров через сайт.

Для того, чтобы было понятно, кто будет пользоваться сайтом, мы перечислили целевые аудитории:

  • Административно-хозяйственные службы коммерческих организаций, бюджетных учреждений;
  • Перепродавцы — индивидуальные предприниматели и юридические лица, занимающиеся торговлей оборудования;
  • Розничные покупатели — мужчины среднего возраста.

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

Прототип главной страницы интернет-магазина компании Стандарт

Дизайн сайта должен решать поставленные в Концепции задачи. Мы всегда передаем концепцию дизайнерам, а не только прототип или модульную сетку. Лучшее качество, которое может быть у дизайнера — готовность “включать мозги” во время работы над макетами сайта. Менеджер проекта всегда жаждет, чтобы дизайнер включился в проект на таком же уровне, как и сам менеджер. Надеюсь, наши концепции помогают в этом.

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

Первый макет понравился заказчику и был принят с несколькими правками. Хороший прототип и хороший дизайнер, умеющий работать не только руками, но и головой, решили задачу на 100%. Ниже представлены первый и заключительный варианты дизайна.

Первый и окончательный вариант дизайна главной страницы

Интеграция с 1С и работа над техническим заданием

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

Для того, чтобы качественно “подружить” сайт с 1С, необходимо выполнение нескольких условий:

  • во-первых, в системе 1С должен быть установлен и настроен Модуль обмена ( http://1c.1c-bitrix.ru/ecommerce/require_1C.php ). Во всех новых версиях платформы в конфигурациях УТ и УТП данный модуль уже есть;
  • во-вторых, на сайте должен быть настроен и подготовлен модуль интернет-магазина для интеграции;
  • в-третьих, самое интересное - только новая версия модуля обмена (11.0.6.7.) позволяет передавать на сайт измененную структуру каталогов, отличную от структуры номенклатуры в 1С. До этой версии приходилось создавать в номенклатуре 1С такую структуру, какую мы хотели иметь на сайте. Так произошло и в этот раз. Как оказалось, менеджерам по продажам с новой структурой (как на сайте), даже удобней работать.

Мы справились с интеграцией во многом благодаря специалисту компании Стандарт, Александру. Спасибо!

Отдельно хочется отметить общее количество характеристик у товаров на сайте. После проработки каждой категории в 1С контент-менеджер заказчика создавал для товаров этой категории отдельный набор свойств. Штук по 15 у каждой. Все бы хорошо, но при выгрузке на сайт, все свойства оказываются в едином списке, общим количеством ~500. Начинается самое интересное - без специальной настройки на хостинге нельзя проводить никакие операции с товарами: добавлять, сохранять. Нельзя применить настройки к категории товаров. Решил проблему тариф Eterno хостинговой компании ООО Таймвэб. Правда, все же пришлось некоторые переменные в конфигурационных файлах устанавливать вручную. Мы рекомендуем данный тариф клиентам с крупными и сложными сайтами.

Техническое задание получилось объемным, насыщенным прототипами, таблицами, шаблонами. Директор ООО «Стандарт», Светлана Викторовна, проверяла все макеты внутренних страниц, а также их описания в ТЗ. Это один из немногих случаев, когда директор лично знаком с ТЗ, структурой сайта, а также логикой работы сайта. Это хороший вариант совместной работы. Бывает и плохой, когда со стороны заказчика на вопросы по ТЗ отвечает “админ”, а директор, видя готовый сайт, не принимает его. Поэтому мы всегда стараемся донести всю важную и необходимую информацию, до лица, принимающего решения. Хотя бы на уровне прототипов.

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

Например:

  • Любое оборудование на сайте можно сравнить по характеристикам, так как список характеристик один на весь каталог;
  • Страница товара имеет специальную версию для печати, на которой не отображается ничего лишнего - только изображение товара, его характеристики, а также телефоны магазина;
  • Нажимая на бренд в списке товаров, мы получаем отобранные с помощью фильтра товары данного производителя (очень удобно для визуалов, а также тех, кто помнит, как выглядит логотип, но не помнит название);
  • Категории каталога и фильтр по товарам располагаются в одной колонке. Переключение происходи с помощью табов. Такое решение позволило сэкономить целую колонку на страницах!
  • Для категорий товаров можно настраивать, какие свойства и в каком порядке использовать в фильтре, и отдельно в списке товаров. Кроме того, работает наследственность. Можно настроить только корневые разделы каталога, и ко всем подразделам применятся данные настройки;
  • На странице Сервисный центр можно узнать, в каком состоянии находится сданное в ремонт оборудование. Для реализации этой возможности мы применили специальное решение и попросили в 1С создать отдельный каталог товаров, в котором фактически находятся заявки на ремонт.

Оформление заказа

Особое внимание было уделено процессу оформления заказа. Мы пытались сделать процесс покупки на сайте максимально удобным и быстрым. Исследования специалистов показывают, например, что увеличение обязательных полей при оформлении заказа всего на 2, уменьшает конверсию на сайте также на 2%! (подробнее на  http://prograbli.ru/techno_experience/The_ideal_form_is_what_should_be_the_system_of_ordering_on_your_site_/ ). Поэтому, обязательных к заполнению полей на этапе оформления заказа должно быть минимум. Лучше применять постпродажные обзвоны покупателей для увеличения информации о ваших клиентах.

В итоге, для того, чтобы оформить заказ, достаточно заполнить всего 4 обязательных поля - Имя, телефон, эл. почта, адрес доставки (или указать Самовывоз). Кроме того, после добавления товара в корзину, на любой странице сайта сразу можно перейти к оформлению заказа с помощью кнопки “Оформить заказ”. Это экономит пользователям время и уменьшает количество шагов до покупки.

Если пользователь не авторизован на сайте, ему вежливо предложат зарегистрироваться, но есть специальная кнопка “У меня мало времени”, которая позволяет оформить заказ без регистрации.

Мгновенный переход с любой страницы к оформлению заказа

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

Обязательные поля на этапе оформления заказа интернет-магазина Стандарт

Запуск, поддержка и развитие

У компании Стандарт был действующий сайт  tools34.ru . Сложность, как часто бывает, заключалась в поиске доступов в панель управления доменом. Вторая сложность - психологически тяжело дать команду на открытие нового сайта взамен старого. Всегда кажется, что-то еще не наполнили, и каталог не весь на сайте, и цены некоторые не проставлены.

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

Мы прописали ns-адреса, новый сайт заработал по старому адресу. В первую неделю из 1С на сайт были выгружены все товары. Сейчас сайт наполнен и работает отлично.

Акты подписаны, что дальше? У нас, как у разработчиков, уже появилось несколько идей по улучшению и расширению возможностей сайта. Мы собираемся представить их заказчику. Любой сайт, пройдя весь цикл разработки, немного отстает от первоначальных задач, поставленных на начальном этапе. Поэтому сайты нужно постоянно улучшать и развивать.

Комментарии (9)

...
  • Антон
  • 17.03.2013 09:20:53
1) А дизайнер "включал" мозги когда добавлял ссылку на страницу доставки практически в подвал сайта? В прототипе ссылка на раздел доставки вообще не предусмотрена. Сейчас это ссылка ведет на главную страницу, а на сколько я понимаю, вопросы доставки габаритных товаров очень сильно будут интересовать целевую аудиторию сайта. Другими словами раздел доставки очень сложно найти, а те кто все-таки смогут это сделать вместо информации по доставке попадут на главную страницу. Итого: эта серьезная ошибка приведет к снижению конверсии сайта.

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

По данной статье видно что в проекте разбирались, но эти 2 пункта - серьезно портят общее впечатление о сайте
...
Антон, добрый день.
Благодарим за уделенное нашей работе внимание.
Отвечу:
1. Нижнее меню добавили уже на этапе дизайна, поэтому его в прототипе не было. Крупногабаритный груз и стоит дорого, здесь без голосовой связи с менеджерами магазина все равно не обойтись. Я не думаю, что кто-то ограничится только прочтением информации на сайте. Все равно позвонят.
Сейчас ссылка "О доставке" ведет на главную страницу, потому что информация только готовится к публикации. Контент-менеджер сайта должен опубликовать материал, и исправить ссылку на действительную.
2. Будем очень благодарны, если укажете ошибки по верстке, или хотя бы ссылку и часть страницы. Исправим, но нужны не голословные замечания, поймите правильно.
...
  • Сергей
  • 22.04.2013 23:40:06
***** А дизайнер "включал" мозги когда добавлял ссылку на страницу доставки практически в подвал сайта?**** недостатки можно найти на любом сайте, к тому же, многие недостатки, это мифы, просто принятые за аксиому. По этим мифам доставку делают на самом видном месте, и огромные кнопки купить яркого цвета, вот только забывают, что сильно перегруженная информацией страница, вернее перегруженные зоны внимания, мешают восприятию информации, и отчасти давят, словно манипулируя. есть люди, которые привыкли противиться всякому давлению и навязчивости, и при этом имеют сообразительность, при необходимости посмотреть и в подвале, и по телефону позвонить. Вопрос доставки, в части случаев это маловажный вопрос, скорее вспомогательный , и нет смысла акцентировать на нем внимание.
Я бы понял сильный акцент на Доставке, если бы было бы нечто особенное, отличное от других, что-то типа срочная доставка в течении 2-х часов, или доставка 5 моделей, из которой на месте можно выбрать одну, и т.п.. что отличало бы сайт от других, а так, обычно люди понимают, что доставка на следующий день. что о доставке лучше договориться с оператором, что можно забрать самовывозом. и т.п.
...
  • Антон
  • 18.03.2013 11:19:55
1) История из СССР: при загрузке мотоцикла в грузовик для транспортировки разбили фару. Грузчику задали вопрос: "и что теперь делать?". Грузчик ответил: "итак купят" и действительно купили.

Наши дни:
На вопрос: "А дизайнер "включал" мозги когда добавлял ссылку на страницу доставки практически в подвал сайта?" Следует ответ: "Все равно позвонят" А вот позвонят или нет – это уже спорный вопрос, времена другие

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

2) Я уже говорил что просмотрел сайт по диоганали и нашел ряд серьезных ошибок, если углубится, то скорее всего ошибок будет больше. Поймите правильно – это достаточно затратная по времени работа, поэтому делать ее за Вас я не буду. Хотите сами проанализируйте сайт, найдите и исправьте ошибки, не хотите, не делайте этого. Вам решать.
...
Антон, спасибо за содержательный ответ.

По п. 1. Вашего замечания-вопроса:
То, что было недосмотрено на этапе проектирования, а именно, "нахождение в главном меню ссылки на страницу с описанием возможностей доставки" (кажется, это Вы имеете в виду), можно поправить. Мы предложили заказчику переименовать и переструктурировать пункт главного меню "О компании". Если будут согласны с предложенным, они это сделают. Они лучше нас разбираются в своем бизнесе, и им решать о важности информации о доставке для своих клиентов.

По п. 2.:
Вы заявляете, что в проекте есть "ряд серьезных ошибок" без приведения хотя бы одной в качестве примера, и предлагаете нам самим их искать. Похоже на разговор в песочнице. Предлагаю закрыть тему.
...
По второму пункту: никто не просит провести полный анализ сайта и предоставить подробный отчет. Но о тех грубейших ошибках верстки, которые были уже найдены, можно сообщить? Это же не потребует много времени и сил с вашей стороны?
...
  • Антон
  • 18.03.2013 15:37:46
По п. 1
Забавно, ваша компания проводит кучу семинаров на различные темы (в том числе и создание интернет магазинов), а когда дело доходит до конкретного проекта, решение конкретного важного вопроса вы даете на откуп заказчику, а не специалистам в штате Интерволги. Заказчик хорошо знает свой бизнес, но хорошо ли он знает специфику интернет магазина? Я не вижу смысла спорить по этому вопросу, у Вас свой подход к решению проблем у меня свой.

По п.2
В песочнице Вот Вам лопаточка http://cl.ly/image/152T0l3k3x2Z дальше копайте сами, это не сложно, просто заставьте дизайнера "включить мозги"

Упс, обратите внимание на количество комментариев к этому посту на этой странице и вот на этой http://www.intervolga.ru/blog/ не сходится http://cl.ly/image/2t1I2t0A3C0n
...
Спасибо, замечания приняты, поправим.
Надеемся, больше "грубейших ошибок по верстке" нет.
Про сайт ИВ -- ну кэш, ну бывает. Через некоторое время числа стали бы соответствовать действительности.
Приходите к нам на следующий семинар, вместе подискутируем про интернет-магазины и проектирование для веба и для бизнеса. Приглашаю)
...
  • Антон
  • 26.03.2013 15:01:10
"Надеемся, больше "грубейших ошибок по верстке" нет. "

В предыдущем посте я написал:
"В песочнице Вот Вам лопаточка http://cl.ly/image/152T0l3k3x2Z дальше копайте сами"

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

"Ну кэш, ну бывает", а вот это тоже кэш http://cl.ly/image/3N401k1N1Z2F

Александр, если я и прийду на семинар, то только в качестве докладчика Если Вас это предложение заинтересовало, то пишите мне на почту