Разработка интернет-магазина цветов и авторских букетов

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

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

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

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

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

Цветы не всегда дарят лично, иногда заказывают в подарок, и курьер сразу везёт их получателю, поэтому мы предусмотрели возможность оставить при покупке несколько важных слов для получателя букета, и предоставить 2 телефона для связи: покупателя и получателя.

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

Заказчик хотел современный, стильный сайт, не похожий на большинство шаблонных цветочных интернет-магазинов. У него был фирменный стиль и лёгкий логотип в стиле лайн-арт, с векторными элементами, которые хорошо вписались в дизайн, как дополнительный визуальный элемент.

В этой же стилистике мы подобрали дополнительные иллюстрации:

Фирменные цвета подобрали для проекта: основной — эвкалиптовый зелёный, и дополнительные 4 цвета. Такая большая палитра, с одной стороны, удобство для дизайнера, с другой — требует огромного профессионализма, чтобы не превратить сайт в аляпистое месиво. Мы придумали концепцию, при которой разным направлениям на сайте отдали свой цвет, чтобы визуально выделить каждое, но, при этом, сохранить основным цветом сайта зелёный.

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

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

Сайт разрабатывался для цветочного салона — компании, в которой нет целого штата программистов и айтишников. Добавлять новые букеты на сайт, менять цены и спецпредложения будут обычные сотрудники, которые ничего не понимают в программном коде. Мы учли это при выборе платформы для сайта, сверстав интернет-магазин на Tilda Publishing — CMS, позволяющей самостоятельно управлять сайтом, без особых знаний и помощи программистов. Но это не стандартный конструктор: так как сайт имеет уникальный сложный дизайн его просто невозможно посадить на стандартные блоки. Мы верстали его с использованием зеро-блоков, а также с помощью самописных кодовых решений. 

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

Для каталога разработаны двухсторонние карточки с 3D-эффектом  переворачивания:

Ещё одно кодовое решение —  слайдер с кастомными стрелками управления в карточках товаров:

Помимо нестандартных кодовых решений, была создана и интегрирована в сайт  интерактивная карта с зонами доставки:

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