Как мы разработали cross-cultural сайт для премиум клининга с мульти-level калькулятором и забрали серебро на WDA 2024

— Куда по помытому?!

— Забирать серебро на международной премии Workspace Digital Awards ‘24 в номинации «Лучший сайт на иностранном языке» за кросскультурный сайт премиум клининга с многоуровневым калькулятором и кросскультурной адаптацией.

Итак, задача: Разработать сайт для премиального клининга в Дубае с уникальной айдентикой, учитывая особенности культурного контекста и менталитета, избежать ассоциаций с грязью и гармонично автоматизировать процесс от расчета стоимости до онлайн-оплаты для буста клиентопотока.

Челлендж не из простых! Мы применили наш practice-based опыт в дизайн-инжиниринге, чтобы создать продукт уровня укоренившегося стабильного чувства привязанности и надежности. Именно так Clean Area органично станет частью лайфстайла миллионов юзеров и изменит «цифровое» поведение, задавая новый ритм рынку клининга и жизни самих пользователей.

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

Маркетолог aka детектив Холмс заглядывал в уголки форм захвата на 50+ сайтах прямых и косвенных конкурентов и выискивал «грязные» секреты. Даже заказал клининг своей воображаемой виллы. И знаете, что? Ему не перезвонили. Ватсон, элементарно — совершено жестокое убийство конверсии. Расследование продолжается.

Провели ресерч ЦА: учли не только традиционные социально-демографические параметры, но и особенности менталитета. Нашим лид магнитом могло бы быть величайшее произведение «1000 и 1 отзыв о клинингах». Ватсон, снова элементарно — болей и возражений «как грязи». В составе чистящих средств аллергены, оформить заказ онлайн невозможно, у ЦА предвзятое отношение к клинерам некоторых национальностей. Мы за дайверсити, но этот инсайт передали нашему UI-pro: он точно знает, что делать.

Разобрались в психологии целевой аудитории и проложили путь клиента на детализированных Customer Journey Maps, попутно продумываю все возможные точки контакта пользователя с продуктом, чтобы вовлечь, удержать внимание и сформировать стабильную эмоциональную связь. Закрыли боли и возражения пользователей полезностью продукта, чтобы аккуратно провести их по воронке. Дошли до того, что сгенерировали собственные бизнес-идеи по запуску клининг-сервиса и чуть не отправили нашего маркетолога в командировку в Дубайск.

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

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

Ключевое возражение — сколько платить.

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

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

В начале было исследование… Дизайнер aka «это не голубой, это цвет яиц странствующего дрозда» вычислял закономерности для ниши, чтобы грамотно отстроить заказчика от конкурентов на уровне концепции и визуальной составляющей.

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

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

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

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

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

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

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

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

Итак, мы совершили революцию в разработке сайтов / 2024 и удовлетворили ключевое требование заказчика «премиальный клининг без грязи» — создали высокоуровневый продукт на английском языке, учитывающий особенности гео Дубай: кросскультурность и менталитет местного населения.

Отстроили от 50+ конкурентов на рынке персонализированным контентом на английском языке и «чистым» дизайном с интуитивно понятным интерфейсом.

В функционал интегрировали крутые фичи без единого плагина и автоматизировали воронку продаж: заказать клининг онлайн с тонкой настройкой дополнительных сервисов, выбрать удобное время и оплатить онлайн еще и со скидкой по промокоду — конечно, можно! Идеально натянутая CMS, скорость загрузки менее 2 секунд, элементы геймификации и полный разрыв шаблонов индустрии премиального клининга — настолько вычищенный сайт, что даже мама не найдет ни одной пылинки!

Наш подход к дизайн-инжинирингу установил новые стандарты разработки цифровых продуктов в нише премиум клининга. Серебро на международном конкурсе Workspace Digital Awards 2024 в номинации «Лучший сайт на иностранном языке» и признание коммьюнити сферы разработки масштабных продуктов доказали, что мы двигаем рынок в правильном направлении.