Какие элементы интерфейса помогут увеличить органический трафик в несколько раз и сделать сайт ориентированным на клиента? Как сделать cross-sale и upsell инструменты действительно полезными и предугадать потребности пользователей в чекауте? Команда «Турум-бурум» поделилась с MMR.ua историей создания нового сайта для столичного ателье цветов Dicentra.ua.
История началась в конце 2019 года, когда в юзабилити-студию «Турум-бурум» обратились проджект менеджер Роман и директор цветочного ателье Артем. На тот момент компания Dicentra.ua была известна на рынке 10 лет. Каждый день ее сотрудники принимали 30 000 бутонов из разных уголков планеты и доставляли их киевлянам. Бизнес развивался очень быстро, поэтому сайт уже не соответствовал запросам пользователей, а его технологии сдерживали воплощение новых идей ателье.
Задачи и планы «Квітів великого міста»
Компания поставила перед собой глобальные цели: изменить позиционирование и сделать качественный рывок в бизнесе.
Основная идея нового позиционирования: в спешке большого города помочь его деловым жителям, потратив всего пару минут на сайте, выразить чувства с помощью стильных букетов цветов.
Нам предоставили презентацию компании с описанием образа бренда и его характеристик, а также готовые прототипы сайта. Было озвучено огромное количество идей и планов и стало понятно, что у таких ребят хватит сил покорить всю Украину. Поэтому решили мыслить масштабно.
Задача: нам предстояло разработать интернет-магазин с запоминающейся и современной стилистикой, который впоследствии можно легко масштабировать и реализовывать даже самые амбициозные планы.
От UX до разработки сайта — новая веб-упаковка для цветочного ателье
Мы детально изучили бизнес от целевой аудитории в онлайн до офлайн продаж и перешли к стадии UI, немного доработав прототипы заказчика.
Ниша была нам неизвестна, поэтому использовали не только данные аналитики, но и посетили шоурум в Киеве. Эта поездка помогла прочувствовать эмоциональную составляющую бизнеса. В интерфейсе хотелось подчеркнуть скорость обслуживания, заботу и внимание в сервисе, которые мы ощутили.
В такой нише, эстетическое восприятие бизнеса имеет высокий приоритет, поэтому мы не только создали новый внешний вид сайта, но и перенесли многие элементы и образы в офлайн. Это позволило упаковать бизнес комплексно от брендирования машин до открытки к букету.
Теперь клиент ателье проводит ассоциацию удовольствия и качества не только с онлайн-магазином, но и брендом в целом.
Почему была выбрана технология MODX
Ранее сайт заказчика был на Opencart и существовал довольно давно, но эта CMS не подходила для реализации новых идей бизнеса. Сайт по функциональности нельзя было доработать.
Выбирая между framework-ом и CMS, мы остановились на втором варианте, потому что реализация на CMS гораздо быстрее по срокам. У бизнеса начинался сезон активных продаж, поэтому скорость разработки была немаловажным критерием выбора.
Наш выбор пал на MODX, потому что это одна из самых удобных и гибких CMS на рынке. Она позволяет реализовать даже самые сложные пожелания клиента, например, сложную систему ценообразования, запутанные маркетинговые механики, формирование комплектов, мультиязычность и мультивалютность сайта. Для бизнеса, который все время развивается, а сайт требует постоянного усложнения функционала, — этот вариант мы посчитали наиболее подходящим.
Must-have элементы интерфейса для удобства пользователей и неординарные идеи собственников
3 языка и 4 валюты
Казалось бы, зачем киевскому ателье такие сложности?
Но это не пустые амбиции, среди целевой аудитории онлайн-магазина есть иностранцы, которым удобно заказывать цветы и видеть при этом цену не только в гривне, но и в евро, долларе, рублях.
В интерфейсе мы учли эту особенность бизнеса, поэтому даже такие нюансы, как маска телефона подразумевает выбор страны.
Функционал SEO фильтров
Одной из веских причин создания нового сайта были серьезные требования по SEO, которые было сложно реализовать в реалиях предыдущей CMS.
Ранее под определенные категории ключевых запросов существовали разделы. Например, при переходе из поисковика в раздел «Красная роза», пользователь мог увидеть информацию о красных розах, но не мог воспользоваться фильтрами. Если бы он хотел посмотреть еще и белые розы, то ему пришлось бы возвращаться в меню, это было неудобно и неверно реализовано с точки зрения SEO.
Для новой версии сайта мы проработали функционал SEO фильтра, и теперь при запросе «Купить красные розы Киев» пользователь из поисковой выдачи может сразу перейти не на страницу раздела, а на страницу с подходящей выдачей.
На такой странице доступны все фильтры, можно легко выбрать другой цветок или розу другого цвета, определиться с выбором и завершить покупку.
Все потому, что вся метаинформация подстраивается под поисковый запрос. MODX позволяет реализовать этот функционал, который уже давно является необходимым с точки зрения SEO при разработке интернет-магазина. В результате изменение органического трафика после релиза нового сайта выглядит так:
В результате комплексных изменений сайта, органический трафик существенно вырос.
Доставка под любые запросы пользователя и бизнеса
Одна из приоритетных задач была сделать максимально быстрый и удобный для пользователя процесс оформления заказа. Поэтому чекаут с точки зрения разработки получился непростым и оправдал выбор технологии MODX в полной мере.
Логика работы чекаута предусматривала изменение стоимости заказа в зависимости от таких критериев выбора пользователя:
- ночная доставка, с 22:00 до 8:00;
- возможность указать точное время доставки курьером вплоть до минут;
- возможность выбрать доставку за пределами Киева.
Кроме этого, для пользователя предусмотрели удобные фичи:
- указать контактные данные получателя или самому получить заказ;
- забрать заказ в магазине в точно указанное время;
- попросить уточнить адрес у получателя;
- сделать сюрприз получателю, т.е. доставить заказ без предварительного звонка.
При этом со стороны бизнеса также появились дополнительные возможности по функционалу. Например, в дни особого ажиотажа можно отключить определенные интервалы времени. Так, в период празднования Международного женского дня, магазину приходилось отключать некоторые интервалы доставки из-за того, что заканчивался товар.
Cross-sale и upsell инструменты
Такие инструменты мы предусмотрели в трех категориях страниц:
- главная;
- карточка товара;
- оформление заказа.
На главной странице кросселлинг реализован в виде продажи акционных бандлов: букета и подарка к нему.
Такие предложения рассчитаны в основном на постоянную аудиторию, которая начинает свой путь с главной страницы сайта.
В карточке товара мы предусмотрели различные варианты cross-sale и upsell инструментов от конфет и тортов, до похожих и просмотренных товаров.
При оформлении заказа мы также предусмотрели для пользователей возможность покупки подарка к букету или открытки.
Подобный cross-sale в чекауте — это в первую очередь забота о клиенте, который может приобрести все в одном месте. Как следствие такие предложения в чекауте повышают лояльность клиентов и средний чек бизнеса.
Заказ букета по фото
Одна из интересных идей, реализованных на сайте, — заказ букета по фотографии.
Достаточно ввести имя, телефон, и загрузить фото, как вам перезвонят и расскажут о стоимости букета.
Создание собственного букета
На момент написания статьи этот функционал еще недоступен на сайте, но вскоре все посетители сайта Dicentra.ua смогут самостоятельно собирать любые букеты из представленных на сайте цветов.
Можно будет выбрать не только цветы, но и варианты их оформления: расцветку упаковочной бумаги и даже ленту.
Такой букет будет единственным в своем роде, и компания сможет угодить любому клиенту.
Другие особенности проекта:
- очень гибкое масштабируемое меню;
В подобном меню можно располагать неограниченное количество подпунктов и ссылок. Мы специально выбрали такое интерфейсное решение под перспективу роста магазина, расширения ассортимента, оптовых продаж и воплощения других идей.
- рубрикатор «Красивый букет» на главной странице сайта, который помогает быстро подобрать букет;
- продуманные алгоритмы поиска по сайту;
- фотографии букетов на 360 градусов;
- личный кабинет с возможностью добавлять постоянные адреса и контакты получателей;
- интеграция с Zoho CRM — кастомная настройка обмена данных;
- три способа оплаты: оплата картой, LiqPay и Portmone и возможность воспользоваться промокодом.
Самое интересное в работе над проектом
За 6 месяцев мы создали полноценный интернет-магазин на MODX со стильным, строгим и в тоже время ярким дизайном. Он смог гармонично связать в себе самые неординарные идеи бизнеса и простоту использования интерфейса.
За время нашей работы над проектом интернет-магазин сталкивался как с негативными, так и позитивными событиями:
- в период роста продаж к 8 марта сайт подвергся DOS-атакам и вымогательству денег. Мы улучшили защиту сайта в экстренном режиме;
- далее в преддверии 14 февраля и 8 марта спрос превышал предложение настолько, что на сайте приходилось отключать возможность оформления заказов на определенные периоды времени;
- в период карантина наступил кризисный период в бизнесе и нужно было быстро искать решение. Найденное решение, а именно трехдневные распродажи и благотворительные акции, настолько увеличили спрос, что опередили по продажам период 8 марта.
Но сайт был готов к этому, бизнес смог быстро скорректировать условия доставки и оплаты, а потом переключиться снова в обычный режим.
Во время карантина компания всего за пару дней смогла вдохновить на покупку цветов около 500 человек и собрать для больницы имени Л.В. Громашевского более 118 000 грн.
Ателье, как и его сайт, прошли испытания многими событиями, выдержали нагрузку в период ажиотажа и новых маркетинговых активностей. Мы поддерживаем и реализовываем идеи компании Dicentra, которые вдохновляют не только мегаполис на подвиги, но и нас на новые решения.
Кавер: MMR