Кросскультурный промосайт для клининговой компании премиум сегмента в ОАЭ с complex калькулятором

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

Начали с погружения в продукт и бизнес-процессы заказчика через data-driven подход и предиктивную аналитику. База реальной маркетинговой стратегии — 60+ вопросов о нише, продукте, целевой аудитории и конкурентах. «Душнилой» будь, и ит’с окЭй — we love you anyway. На самом деле, именно маркетинг-mind подход помог нам в продуктовом исследовании: провели 2-х часовую брифинг-сессию с заказчиком, углубились в стратегические задачи бизнеса, нащупали ключевые потребности и начали разговаривать с командой Clean Area на одном диджитал языке.

Изучили рынок и провели U&A исследования: маркетолог aka детектив Холмс заглядывал в уголки каждой формы захвата на 50+ сайтах прямых и косвенных конкурентов и выискивал «грязные» секреты.

На аналитике не остановился и даже заказал клининг своей воображаемой виллы. И знаете, что? Ему не перезвонили. Ватсон, элементарно — убийство конверсии с особой жестокостью. Расследование продолжается.

Провели ресерч ЦА: учли не только традиционные социально-демографические параметры, но и особенности менталитета будущих пользователей, чтобы органично сделать бренд частью лайфстайла и изменить «цифровое» поведение, задавая новый ритм рынку клининга и жизни самих юзеров. Глубоко погрузившись в психологию целевой аудитории, проложили путь клиента на детализированных Customer Journey Maps, параллельно продумали все возможные точки контакта пользователя с продуктом, чтобы вовлечь, удержать внимание и сформировать стабильную эмоциональную связь. Проработали закрытие болей и возражений пользователей полезностью сайта, чтобы аккуратно провести их по воронке и органично подвести к совершению целевого действия.

Дошли до того, что сгенерировали собственные бизнес-идеи по запуску клининг-сервиса и чуть не отправили нашего маркетолога в командировку в Дубайск.

«А если у меня четыре спальни, восемь ванных комнат и еще лоджия? А если убрать нужно только две из четырех спален? А еще хочу ковер почистить…»

Так родилась идея многошагового калькулятора стоимости с возможностью оплаты заказа онлайн. Чертили в Figma, на листочках A4, на доске, на асфальте под окнами офиса — прорабатывали оптимальные варианты с точки зрения UX. Уже на этом этапе подключили в тиму UI-дизайнера и бэкэндера: калькулятор должен был получиться визуально легким и при этом максимально функциональным.

Проработали логику расположения блоков и элементов в прототипе, усиливая реальные выгоды и ценность продукта нестандартным копирайтом. Сконцентрировались на качественном и релевантном контенте, по-настоящему полезном для пользователей. Наш нейрокопирайтер познал искусство «без-водизма» и «от-спама-очистизма» — теперь разговаривает формулами AIDA, PMPHS, ACCA, 4U.

Еще один челлендж — создать промо-сайт полностью на английском. Прокачали lvl до С3 так, что Уильям Шекспир пришел бы на курс от Ninen «Коренной британец с нуля до PRO». Гармонично усилили сайт маркетинговыми инструментами: виджеты, маркетинг-mind фишки и автоворонки с продающими сценариями.

На выходе: UX-friendly прототипы в соответствии со стратегией и данными, полученными в результате предпроектного аналитического исследования. Так мы заложили основу для positive зависимости от продукта.

Помним принципиальное требование заказчика: никаких ассоциаций с пылью, грязью и половыми тряпками. При этом визуальный код должен считываться любым представителем многонациональной ЦА. Что делать, если все клининги построены на «шик, блеск, бурлеск»? Подойти к вопросу с другой стороны и задавать новые тренды «чистого» премиального дизайна!

Начали с UI-исследования: дизайнер отправился серфить рынок, чтобы выработать визуальную отстройку от конкурентов. Провели анализ топов в разрезе:

• стилеобразующих элементов,
• цветовой палитры,
• текстуры,
• форм,
• определили общие закономерности для ниши.

Если конкуренты пытались скрыть место преступления плохим копирайтингом и UX-шаблонным дизайном — фейл. Швабры на первом экране — мы этого не понимаем, нам это не интересно. Все ошибки взяли «на карандаш», чтобы не слить лидов.

Подготовили мудборды, обсудили предлагаемые концепты с командой Clean Area  — определили стилистику будущего продукта. На основе выбранного мудборда прорисовали 3 концепции первого экрана, абсолютно разные не только по идее, но и по дизайн-решениям: шрифты, цвета, композиция, стилеобразующие элементы. Два образа выстроили на премиальных изображениях чистых апартов, третий — на эмоции и ассоциативном мышлении. Что у вас ассоциируется с чистотой? Конечно, пена! Невесомая и объемная, она создает ощущение свежести и чистоты.

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

В процессе UI упаковки соблюдали законы консистентности шрифтов, расстояний, стилистики и визуальных решений. Пена обволакивает стильные шрифтовые композиции, скругленные углы добавляют легкости и воздушности, а верстальщик получает ТЗ на анимацию эффекта параллакса для футуристичности образа. Минимализм — «чистый» канон.

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

На блоке до/после дизайнер Ninen отвел душу. Бессовестно и безнаказанно ляпал зеркала и стекла ладошками, разбрасывал полотенца, ел пиццу прямо в кровати — и все это в люксовых апартаментах. Хорошо, что это всего лишь фотошоп… А дальше — мэджик: достаточно потянуть разделитель и вуаля, снова идеальная чистота.

Сохраняя визуальную целостность продукта, прорисовали второстепенные элементы:

• скрытые блоки,
• меню,
• инпуты,
• тултипы,
• модальные окна,
• формы,
• виджеты.

Подготовили UI-kit — систематизировали все кликабельные элементы и их поведение при взаимодействии с пользователем, чтобы воронка работала надежно (*****) как швейцарские часы даже в мельчайших деталях.

По принципу Pixel Perfect, выполнили валидную верстку. Верстальщик забустил производительность веб-страницы и минимизировал скорость загрузки ресурсов. Наш КМС по CSS сделал настолько реалистичный параллакс-эффект на пене, что на тестах дизайнеры пытались стереть ее салфетками с монитора. Адаптировали структуру под CMS, провели комплексное кроссбраузерное QA QC тестирование.

Помните про многошаговый калькулятор стоимости с подвязкой системы онлайн-оплаты? Так вот, все это на чистом коде без плагинов и костылей!

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