Создание интернет-магазина по продаже бытовой химии

Летом 2018 года в нашу веб-студию поступил звонок от системного администратора компании NCT, хотел поручить нам срочные работы на основном сайте компании - http://nctrus.com. Как выяснилось, студию “3840” ему порекомендовали знакомые - наши клиенты, которым ранее мы делали сайт.

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

Задачи проекта

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

В течение суток системный администратор предоставил нам доступы к сайту, так что мы смогли внимательно изучить его техническое устройство и процесс работы. При первом же знакомстве с сайтом нас удивило то, что фактически у заказчика был не один единый ресурс, а несколько самостоятельных. При этом интернет-магазин, являвшийся частью основного сайта, был сделан на CMS OpenCart, а сам информационный сайт - на WordPress. Зачем это было сделано - так и осталось неизвестным, и пояснить это представители заказчика не смогли.

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

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

Фактически, от нас требовалось:

1. Создать новый интернет-магазин на подходящем для этого движке (CMS).
2. Частично переделать структуру сайта, сделать ее более простой и логичной.
3. Разработать новый, адаптивный дизайн обновленного интернет-магазина (соответственно, верстка также должна быть адаптивной), чтобы ресурс хорошо смотрелся на разных устройствах, в том числе и мобильных. Прежний сайт адаптивным не был, поэтому у него были проблемы с корректным отображением на разных браузерах и устройствах. Верстка тоже содержала ошибки.
4. Доработать и обновить функционал: создать и настроить формы обратной связи, сделать общий поиск по сайту, разместить на главной странице слайдер для акций компании, добавить на сайте возможность купить товар «в один клик», переработать карточку товара, заставить имеющийся модуль скидок корректно работать (он не работал, соответственно, подсчет в корзине также производился не правильно, не учитывались положенные скидки), добавить в каждую карточку блок «Рекомендуемые товары».
5. Глобально переделать форму корзины заказа, установить и настроить на сайте модуль транспортной компании СДЭК, с возможностью расчета доставки с учетом объема и веса посылки, добавить возможность онлайн оплаты банковской картой через банк заказчика ПСКБ, перенести весь товар со старого интернет-магазина на новый.

Фактически все это означало создание нового современного интернет-магазина с мощным и нестандартным функционалом, возможностью покупки онлайн и расчетом точной стоимости доставки товара прямо на сайте.

На выполнение всех работ заказчик отводил 30 дней. Срок представлялся нам очень сжатым, так как объем предстоящей работы был действительно большим, а многие из поставленных заказчиком задач - нестандартными. Поэтому мы попросили 2-3 дня на осмысление задачи и подготовку коммерческого предложения, содержащего полный перечень работ, сроки их реализации и стоимость интернет-магазина “под ключ”.

Через 2 дня мы отправили подробное коммерческое предложение на почту заказчика. В свою очередь, тайм-аут для принятия решения теперь взял заказчик. Через несколько дней его представитель спросил, сможет ли кто-то из наших сотрудников приехать к ним в офис для обсуждения некоторых пунктов коммерческого предложения, обсуждения и согласования некоторых изменений в нём. В назначенный день наш руководитель проектов выехал на встречу в офис компании NCT.

В ходе встречи мы несколько часов вновь обсуждали перечень работ, запросили необходимую нам информацию, объяснили некоторые спорные моменты и дали консультации по отдельным предлагаемым решениям. Заказчик планировал сделать новый интернет-магазина CMS 1C-Битрикс, но после нашего общения было принято решение делать его на OpenCart 2.3. Его функционала было более чем достаточно для создания магазина с учетом всех пожеланий.

Наш руководитель проектов попросил подробно расписать желательный алгоритм покупки товара и его доставки. Заказчик планировал осуществлять доставку своего товара через две транспортные компании и их пункты выдачи – СДЭК и Boxberry. Нам необходимо было интегрировать их модули на новом сайте заказчика.

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

Всю работу и оплату по сайту мы решили разбить на три больших этапа:

1. Подготовка и обработка материалов, разработка структуры сайта и его разделов, создание нового дизайна для всех страниц.
2. Создание основного функционала, установка и интеграция дополнительных модулей.
3. Верстка сайта и его наполнение, адаптация. В конце работ мы должны были написать подробную инструкцию для менеджера заказчика, который планировал самостоятельно администрировать новый ресурс. После подписания договора мы приступили к работе.

Реализация цели

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

Вначале заказчик хотел сделать 6 основных категорий, но уже в ходе разработки структуры сайта попросил добавить седьмую - «Гипоаллергенная серия средств с героями мультфильмов «Маша и медведь», и прислал нам фотографии и описания для карточек в эту новую категорию товаров.

Ниже (под иконками категорий) разместили небольшой информационный блок «О Нас» с текстом о компании «NCT» и ссылкой «Подробнее», которая должна была вести на страницу «О Компании». Однако впоследствии страницу «О компании» заказчик попросил полностью убрать. Если пользователь кликал на кнопку «О компании» в главном меню, то перенаправлялся на второй (информационный) сайт NCT, сделанный на CMS WordPress. Первоначально сайт планировалось убрать, но в последний момент заказчик решил сохранить его.

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

В самом низу страницы разместили блок с реальными отзывами (со ссылками на аккаунты написавших их пользователей в Instagram) и форму обратной связи «Остались вопросы?». В футере сайта разместили информацию которую просил разместить заказчик, включая ссылки на скачивание документов с презентациями компании NCT.

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

Дело в том, что во время одной из встреч с заказчиком мы поняли, что шаблонов карточек скорее всего будет несколько (в соответствии с разными группами товаров), то есть одной универсальной карточки товара не будет. Кроме того, заказчик не представлял, каким именно способом следует показывать разный объем одного и того же товара. В итоге было принято решение, что каждый объем товара должен иметь собственную карточку. Соответственно, при выборе внутри карточки товара соответствующего объема товара посетителя незаметно переносило в другую карточку. Фотография и объем в карточке менялись. Такой вариант заказчика устроил.

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

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

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

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

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

Когда мы полностью разобрались с контентом (а некоторый контент также пришлось несколько раз менять), веб-мастер смог приступить к работе с функционалом сайта. В раздел «Доставка и оплата» установили виджет Boxberry, на карте которого посетитель сайта мог увидеть пункты выдачи в своем городе. Но самое интересное ожидало нас при оформлении заказа и в корзине. Стандартный функционал корзины и оформления заказа от OpenCart заказчику не подходил, поэтому пришлось основательно все это переработать.

Первым делом мы реализовали возможность расчета скидок товаров в корзине исходя из общей стоимости заказа (заказчик разделил скидки и сделал несколько диапазонов для них, в зависимости от величины суммы заказа). Эти же параметры должны были учитываться и при доставке. После, с помощью модуля Simple (упрощенная регистрация и заказ), мы доработали оформление заказа, убрали ненужные поля и добавили требуемые.

Затем установили и настроили модули транспортных компаний СДЭК и Boxberry, которые считали стоимость доставки заказа до пункта выдачи в реальном времени, исходя из объема и веса посылки. Эти параметры были заложены в каждой карточке товара. Последним этапом было внедрение и установка на сайте онлайн оплаты от банка “ПСКБ”, чтобы посетитель мог сразу оплатить весь заказ.

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

В финале заказчик попросил нас сделать частичную замену информации (номера телефонов, реквизиты, документы). Все это было оперативно выполнено. Заказчик долго не мог определиться, где именно должен располагаться новый интернет-магазин, но в итоге попросил нас разместить его в той же папке сайта, где располагался прежний.

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