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

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

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

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

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

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

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

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

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

Материалов у заказчицы практически не было, только придуманное ею название для сайта «Гранд Аморе» (Grand Amore). Тем не менее, у нее было огромное желание получить красивый и современный сайт, сразу по готовности которого она планировала настроить для него рекламную кампанию для оперативного получения звонков и заказов.

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

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

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

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

Пока дизайнер колдовал над логотипом, руководитель проекта занимался разработкой структуры сайта и его главной страницы. В этот раз работа началась нетипично, так как заказчица просила начать с создания логотипа и фирменного стиля, поскольку именно они срочно требовались для фотосессии и заказа фирменных упаковок «Grand Amore».

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

Тем временем структура сайта и главной его страницы уже была готова. Главную решили сделать в виде небольшого лендинга, где расположили:

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

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

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

Всего на сайте планировалось создать восемь категорий: «Розы», «Букеты», «Цветы в коробках», «Цветы в корзинах», «Подарки», «Свадебная флористика», «Интерьер» и «Бизнес». Каждая из них должна была состоять из 12 превью карточек товара и кнопки «Показать еще» – таким было пожелание заказчицы, которая не хотела видеть на сайте пагинацию в ее классическом исполнении, включающем несколько страниц.

Сама карточка товара состояла из нескольких фотографий и трех кнопок «Small», «Medium» и «Grand», с помощью которых посетитель мог выбрать нужный ему размер букета. Стоимость букета отображалась под кнопками, а справа - строка выбора количества букетов. Также мы планировали сделать динамический пересчет цены в зависимости от размера букетов и их количества.

Ниже шло описание букета, с расшифровкой видов «Small», «Medium» и «Grand» (они отличаются количеством цветов и стоимостью), блок с информацией о доставке и способах оплаты. Под основной информацией размещался блок с предложениями сопутствующих товаров («С этим товаром покупают»), разделенный на три небольших «карусели» с товарами из категорий «Шары», «Сладости» и «Игрушки», в которых крутились выбранные Натальей товары. Кликнув на соответствующий товар, посетитель попадал в карточку соответствующего товара.

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

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

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

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

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

Когда работы по дизайну уже близились к завершению, мы поручили веб-мастеру подготовить рабочую площадку для нового сайта grandamore.ru, подобрать и развернуть на ней движок. Остановить выбор было решено на CMS OcStore (русскоязычная версия OpenCart), так как его функционал был нам отлично известен, многократно проверен и испытан.

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

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

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

На все работы у нас ушло 2 месяца (не считая ожидания ключей для доступа к online-оплате). Заказчица довольна своим сайтом и самостоятельно занимается его рекламой в Яндекс Директ.