Создание интернет-магазина оборудования для сферы красоты и здоровья

В начале мая 2019 года в веб-студию поступила заявка на создание интернет-магазина “Crystaleco” для компании “Вектор Трейд Груп” - производителя систем вентиляции и кондиционирования различного назначения. Компания планировала освоить розничный и мелкооптовый сегменты рынка продажи и монтажа оборудования для сферы красоты и здоровья. Для этого и нужен был новый сайт – современный, продуманный и адаптивный интернет-магазин с широкими возможностями и продвинутым функционалом.

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

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

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

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

За сутки мы подготовили три варианта коммерческого предложения: вариант ресурса с упрощенным функционалом, второй - с продвинутым, включающим онлайн-оплату на сайте, интеграцию модуля доставки и др., с заполнением 5-7 карточек и созданием подробной инструкции для заказчика на последующее самостоятельное наполнение сайта, и третий вариант - интернет-магазин “под ключ”, включая полное наполнение товарами.

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

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

Работу начали с создания структуры сайта. Нарисованный заказчиком от руки набросок преобразился в Google-документ, в котором можно, было коллективно работать, оперативно просматривать, редактировать и обмениваться комментариями.

Структура главной страницы включала:

• шапку с полной контактной информацией компании, логотипом, кнопкой «Связаться с нами» и строкой поиска;
• главное меню;
• слайдер;
• блок «Наша продукция», состоящий из трех превью карточек товаров и баннера с возможностью перехода на сайт компании «Вектор Климат Груп»;
• блок «Хиты продаж», с четырьмя превью карточек самых продаваемых товаров;
• дедлайн (счетчик с обратным отсчетом) «Товар месяца», содержащий информацию о товаре, его обычной и акционной стоимости;
• четыре превью «Товаров по акции»;
• блок «О Нас» с небольшим текстом о компании;
• инфографику преимуществ компании.

В футере дублировалась контактная информация и размещались иконки Youtube-канала заказчика и его аккаунта в Instagram.

Каталог продукции состоял из 6 основных категорий, в свою очередь разделявшихся на подкатегории. При клике на одну из категорий посетитель переносился в нее, причем слева появлялось меню со всеми пунктами (включая отсутствующие при наведении на пункт «Каталог» страницы «Хиты продаж», «Товары с подарком» и «Товары по акции»), а справа выстраивались превью карточек товаров без пагинации.

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

Разделы «Оплата» и «Доставка» были информационными. «Полезная информация» представляла собой страницу с опубликованными статьями (заказчик планировал периодически делиться полезной информацией по выбору товаров, советами и т.д. с посетителями сайта).

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

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

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

Готовые структуры для всех страниц сайта отправились на утверждению заказчику и за сутки были приняты без правок. Мы приступили к следующему этапу работ – разработке логотипа и созданию дизайна для всех страниц. На этой стадии заказчик попросил нас создать и активировать корпоративный почтовый ящик info@crystaleco.ru. Это было оперативно выполнено.

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

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

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

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

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

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

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

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

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

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

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

Еще Денис просил нас, чтобы при прокрутке страницы сайта вниз шапка уменьшалась и видоизменялась – на ней должны было оставаться только большая кнопка каталога, строка «Поиск товаров» и корзина. Это мы тоже осуществили, хотя пришлось справляться с возникшими трудностями - перемещением и отображением товара в корзине.

В каждой карточке товара настроили модуль «Отзывы», чтобы любой посетитель мог рассказать о впечатлениях от товара. В качестве CMS использовали OpenCart, который отлично подходит для разработки современных и функциональных интернет-магазинов. Дизайн и верстка сайта – адаптивные.

Сайт сделали за 30 дней. Когда все работы были закончены, мы подготовили для заказчика подробную инструкцию по наполнению сайта и передали доступы к админпанели.