Большинство предпринимателей до сих пор считают сайт неким придатком к бизнесу, который достаточно один раз сделать и забыть. Но сайт, в первую очередь – инструмент, а его эффективность – результат постоянной работы по поддержанию в актуальном состоянии. Когда бизнес, процессы или продукт меняются, должен меняться и сайт. А как это происходит, расскажем на примере компании по ремонту квартир в Москве, которая за все время работы заплатила за сайт более 5 миллионов рублей.
Работаем с тем, что есть
В 2016 году мы в UXhot начали работу над поддержкой существующего сайта тогда еще небольшой московской компании, специализирующейся на ремонте квартир в эконом-сегменте. Единственным источником трафика на тот момент была органика и, чтобы «не сломать SEO», но помочь компании в развитии, мы принялись за точечные изменения сайта, направленные на поднятие конверсии.
Прежние разработчики сайта, удивлялись, как незначительные, на первый взгляд, правки могут иметь какой-то эффект. Например, когда добавление формы обратной связи в самом низу сайта стало генерировать заявки, они не могли понять как мы заставляем посетителей туда докручивать – в их картине мира люди так не поступают. А мы не заставляли – просто сделали более эффективным взаимодействие с теми, кто все-таки докручивал.
Вот это изменение:
Версия в большом размере
Да, тут можно упрекнуть за то, что мы предложили что-то бесплатно, ведь на такое много ума не надо. Но эта акция уже была на сайте до нас и, в целом, является нормой для рынка ремонта под ключ. Мы не придумали ничего нового, не доставили бизнесу новых проблем с бесплатными подарками, а просто улучшили коммуникацию с тем, что было.
Изменяя существующий сайт шаг за шагом, мы хоть и незначительно увеличили конверсию в цифрах, но улучшили качество лидов за счет снижения количества нецелевых для бизнеса обращений. При аналогичном количестве заявок менеджеры по продажам стали заключать больше договоров и тратить меньше времени на нецелевые заявки. Сохранился и органический трафик, что позволило компании сделать первый серьезный шаг в развитии, сфокусировавшись только на ремонтах под ключ.
Уже так выглядел сайт до первого перезапуска
Первый перезапуск сайта
Существующая самописная система управления сайтом и невероятная дичь в верстке делали все более сложным дальнейшее развитие проекта, поэтому было решено полностью все переверстать и перенести сайт на новую систему управления.
Внешне новый сайт практически не отличался от прежнего, но внутри все было совершенно другим. Перезапуск также позволил нам одним из первых среди конкурентов запустить адаптивную версию.
Сбросив технические ограничения прежнего решения, мы продолжили развитие проекта: на сайте появились новые посадочные страницы, обновилось представление портфолио. Но самыми важными изменениями стали калькулятор и раздел «Сейчас в работе».
Калькулятор
Тогда позиционирование компании строилось вокруг механизированных технологий, позволяющих делать ремонт качественнее, быстрее и с меньшими издержками. Поэтому мы спроектировали калькулятор так, чтобы рассказывать о преимуществах компании прямо во время взаимодействия с ним.
Абсолютно не похожим на конкурентов был и способ получения лида. Зная о погрешности расчета плюс-минус километр, мы честно сообщали, что его точность около 60%, и тут же предлагали еще варианты получения более точной оценки:
- прислать дизайн-проект или планировку – точность расчета 80%;
- вызвать замерщика – точность 100%.
Сейчас в работе
Существовала еще одна проблема, о которой часто упоминали заказчики компании во время интервью.
Сейчас очень просто создать красивый сайт. Но куда сложнее понять, стоит ли за этим сайтом реальная компания?
– цитата одного из заказчиков во время интервью
Обычно между сайтом и реальным бизнесом огромная пропасть. Компания может прямо сейчас делать ремонт в сотне квартир руками десятков рабочих, но как передать этот масштаб через сайт, да еще и так, чтобы поверили?
В поисках решения мы убедили клиента публиковать еженедельные фотоотчеты объектов в процессе ремонта. По гипотезе это должно было решить следующие проблемы:
- показать потенциальным клиентам, что это существующая компания с реальными объектами в процессе ремонта;
- познакомить с командой: дизайнером, прорабом, руководителем проекта, рабочими;
- показать чистоту и аккуратность объектов в процессе ремонта;
- показать, что компания работает системно, по плану и выдерживает сроки. Для этого отчет по каждому объекту содержал реальный график работ и текущий статус их выполнения.
В итоге на сайте появился раздел с отчетами по большинству объектов в процессе ремонта, позволяя потенциальным клиентам онлайн видеть историю и актуальный прогресс ремонта по каждому из них отдельно: рассматривать динамику изменений в еженедельных фотоотчетах, понимать на каком этапе ремонт в конкретной квартире и когда он будет закончен. Такая детализация создавала у потенциальных заказчиков ощущение, что если обратиться в эту компанию, то ремонт и в их квартире будет происходить также системно и точно в срок.
Поддержание такого раздела в актуальном состоянии было настоящим вызовом для клиента и нам стоило больших усилий убедить его продолжать, так как ожидаемый эффект от нововведения был сильно отложенным. Но уже спустя время это стало одним из важных маркетинговых преимуществ.
Смета за 30 минут и новые технологии
Между первым и вторым полномасштабным перезапуском сайта клиент начал оптимизировать бизнес-процессы и одна из проблем, которую нужно было решить – долгий расчет сметы.
Два года назад это было так: в оговоренное время замерщик появлялся на объекте потенциального заказчика, выполнял замеры, попутно обсуждая пожелания: где будут обои, где стены под покраску, какое покрытие пола. Закончив, замерщик оставлял потенциального заказчика с обещанием прислать рассчитанную смету в течение недели.
С ростом количества замеров сотрудники перестали своевременно справляться с расчетом и все чаще, прослушивая записи телефонных звонков, мы слышали гневное «Где моя смета? Обещали еще три дня назад!»
Можно было раздуть штат замерщиков или… разработать сервис для расчета сметы прямо во время замера. Зная, что все ближайшие конкуренты точно так же считают сметы неделями, мы поняли, что быстрый расчет не только позволит улучшить качество сервиса и сэкономить на избыточном персонале, но также станет сильным конкурентным преимуществом.
Было решено разработать сервис. Чтобы сильнее понять значение замера, мы провели исследование бизнеса, чтобы детально разобраться в процессе замера – серию глубинных интервью с замерщиками, а чтобы узнать об ожиданиях и переживаниях с обратной стороны – несколько интервью с заказчиками.
В ходе исследования выяснилось, что ускоренная смета решает только часть проблем. Основная сложность заключалась в том, что при общении с замерщиками, заказчики выражались образами «тут я хочу обои, а тут плитку», но получали на руки табличку с перечнем мешков цемента, шпатлевки и прочим, что никак не укладывалось в изначально нарисованный образ. В результате сравнение смет от разных компаний чаще всего сводилось просто к сравнению финальной цифры. Этим пользовались многие нечистые на руку компании, намеренно исключая из сметы часть работ/материалов, ведь главное подписать договор и взять предоплату, а дальше будь что будет.
Решение проблемы напрашивалось само собой: общаться с заказчиком на его языке, что сделало бы смету более понятной, и усложнило простое сравнение нашего предложения с другими.
Так как расчет сметы проводится непосредственно на объекте заказчика, было ясно, что для создания удобного процесса, взаимодействие должно происходить через смартфон или планшет. При этом довольно часто на объектах замера отсутствует интернет, поэтому решение в виде сайта точно не подходит. Нужно делать дорогостоящее мобильное приложение? Не всегда. Под нашу задачу отлично подошла тогда еще совсем новая технология Progressive Web Apps (PWA).
PWA – это веб-приложение, которое обладает всеми преимуществами обычного приложения, но загружается и работает через обычный браузер. Оно доступно на любой операционной системе (iOS, Android) и в отличие от веб-сайтов не требует активного интернет-соединения. Кроме этого его разработка и поддержка стоят значительно дешевле, чем нативного приложения.
В итоге мы разработали первое и пока единственное на рынке решение, позволяющее замерщикам быстро считать смету прямо на объекте используя лишь планшет. Но главным стала смена парадигмы коммуникации – теперь замерщики общались на языке заказчика.
Вдобавок замерщик с лазерной рулеткой и iPad выглядит куда эффектней тех, с которыми потенциальные заказчики имели дело ранее.
Второй перезапуск сайта
Первый перезапуск сайта и последующее внедрение новых сервисов позволило компании значительно вырасти, переехать в новый более просторный офис и расширить штат. И теперь компания была готова к рискам полного перезапуска сайта, стремясь выйти на новый уровень клиентов.
За несколько лет с начала работы сайт сильно изменился, но наследственность от самой первой версии все еще была сильной. Двигаясь в сторону клиентов комфорт- и премиум-уровня, мы постепенно смещали коммуникацию с технических нюансов ремонта в сторону дизайна интерьера и сервиса. Настало время кардинально изменить и дизайн сайта, приведя его к соответствию с новым позиционированием и возросшей стоимостью услуг.
Новый дизайн стал более простым, современным и формирует соответствующее представление о самой компании.
Новый калькулятор
Старый калькулятор не согласовывался с новым позиционированием, поэтому мы обновили и его.
В основу нового калькулятора лег существующий скрипт менеджеров при первичном общении с клиентами по телефону. Отслушивая записи мы убедились, что зачастую потенциальные клиенты хорошо ориентируются в отделочных материалах и знают что хотят, поэтому теперь мы задавали вопросы не про технические нюансы, а про материалы отделки.
Изменилась и логика калькулятора. Теперь после ответов на вопросы клиенты сразу получали примерную стоимость и сроки ремонта. Продвигая свое «ноухау» – замер за 30 минут, мы сфокусировались на презентации быстрого расчета сметы и приглашении замерщика для ее получения. И ошиблись.
Неудачное решение
Эффективность калькулятора после редизайна упала. Анализ показал, что количество обращений к калькулятору, и статистика движения по воронке не изменились – за исключением последнего шага, где большинство клиентов закрывало калькулятор без вызова замерщика. Протестировав еще несколько версий последнего экрана, мы вернулись к концепции из прежнего калькулятора.
Удачное решение
Калькулятор, как и прежде, сразу считает примерную стоимость и сроки ремонта, но больше навязчиво не предлагает заполнить форму обратной связи. Вместо этого – мягкое приглашение задать уточняющие вопросы в чате или загрузить план/вызвать замерщика.
Эволюция сайта на примере одной страницы
Всего у сайта было три больших перезапуска, но фактически многие страницы менялись чаще. Наиболее показателен пример страницы Дизайн интерьера, которую мы полностью переделывали 5 раз, не считая множества частичных изменений.
Версия в большом размере
В компании изначально понимали важность услуги разработки дизайн-проектов, но сначала не было достойных работ, которые можно было бы показать в портфолио, потом – понимания как эффективно продавать эти услуги. И с каждой новой гипотезой частично или полностью изменялась и страница.
Аналогичные процессы происходили и с другими страницами сайта.
Адаптируем адаптивность
Спустя несколько лет доля трафика с мобильных значительно возросла, поведение пользователей менялось и они становилось более требовательными к интерфейсу. Существующая адаптивность больше их не удовлетворяла и настало время ее адаптировать.
Учитывая контекст и особенности мобильного взаимодействия, мы полностью перепроектировали ключевые интерфейсы сайта и внесли десятки точечных улучшений во второстепенные.
Теперь мобильная версия сайта не выглядит попыткой откупиться от мобильных пользователей простым сжатием сайта до ширины экрана, а предлагает удобное взаимодействие, соответствующее контексту и особенностям устройств.
Влияние на рынок
Мы никогда не ориентировались на решения конкурентов, придерживаясь собственной линии и уделяя особое внимание близкой коммуникации с бизнесом и потребностям его заказчиков. Такая близость позволяет самостоятельно генерировать новые гипотезы и задавать вектор развития проекта.
Довольно скоро сайт заметили конкуренты и стали появляться полные или частичные клоны разных итераций сайта. Причем от некоторых решений, заимствованных конкурентами, мы довольно быстро отказывались, как от неэффективных. И это отличная иллюстрация того, что активно продвигаемый многими разработчиками и маркетологами «анализ конкурентов», который зачастую заключается в слепом копировании без понимания скрытых за каждым решением процессов и аналитики, зачастую может принести бизнесу больше вреда, чем пользы.
4 года, 3 итерации, 2000 комитов
За неполных 4 года совместной работы проект вырос из небольшой компании с клиентами из эконом-сегмента в устойчивый бизнес с амбициями на премиум. Один дизайнер интерьера превратился в отдел из 10 дизайнеров, а уровень работ позволяет конкурировать с признанными лидерами рынка. Естественно это, в первую очередь, заслуга руководства компании, но не последнюю роль сыграл сайт: актуальный, соответствующий текущему уровню развития компании, но при этом всегда поднимающий планку на один шаг.
Текущая версия сайта – результат трех больших перезапусков, сотни мелких улучшений, более 2 000 коммитов в GIT-репозиторий и, суммарно, более 5 миллионов рублей, уплаченных в виде ежемесячной абонентской платы за поддержку и разовых платежей за дополнительные работы.
Могли ли мы сделать такой же сайт сразу 4 года назад и сэкономить клиенту пару-тройку миллионов? Да, и тем самым, убили бы ему бизнес. Во-первых, единственным источником привлечения клиентов на тот момент была органика и ресурсов на подстраховку в виде контекстной рекламы просто не было, а полная смена сайта могла привести к значительной потере бесплатного трафика. Во-вторых, компания сейчас и четыре года назад – это две разные компании, с разным уровнем сервиса, ценностями и возможностями. И только внешней дорогой упаковки сайта было бы недостаточно для работы с клиентами текущего уровня, а тех, с кем компания работала 4 года назад и за счет кого выросла, просто отпугнула, показавшись им не по карману.
Каждый сайт – всего лишь инструмент, который должен соответствовать существующим бизнес-процессам и потребностям клиентов. Неважно, сколько медалек на очередном эвордсе он выиграл или нравиться ли он директору компании. Важно насколько он удобен, понятен клиентам и помогает бизнесу достигать поставленных целей. И если цели меняются, то должен меняться и сайт.
Комментарии (11)
sfi0zy
28.05.2019 20:44+1За такие деньги можно было бы верстку тестировать иногда, а то только зашел и…
Хотел протабать страницу и что-то случайно сломал...hekcfy Автор
28.05.2019 21:07-2Зачем платить, когда есть такие внимательные хабражители? Вон уже сколько багов натестили. А статье и двух часов еще нет. Спасибо!
zahmTOD
28.05.2019 20:54+1Вообще как-то мимо. Такая самореклама не для Хабра. Но на безрыбье, как говорится, и портупея — бюстгальтер.
Интересно, рост размера «высоты» сайта хоть как-то оправдан, с точки зрения UX, или просто на поводу у моды пошли?
И еще — тот, кто делал картинку итераций в большом размере, хреновый специалист. Вместо псевдо «пнг» в 20,5 МБ, можно было сделать настоящий пнг, размером 6 МБ.
tangro
28.05.2019 22:31+1
А-ха-ха. Я-то думал мне не повезло, когда ремонт вышел в 3 раза дороже того, что изначально считал калькулятор на сайте ремонтной фирмы. Но вот этот калькулятор считает меньше раз в 5.
vladbarcelo
Делали на Vue, да? Почему не на Nuxt? На нём же можно запилить пререндеринг и SSR.
Если сделали PWA — почему нет сервис воркера и оффлайн-режима?
Если решили использовать Vue — зачем тогда использовать ещё и JQuery?
Проверяли ли сайт на браузерах с блокировщиками рекламы? У меня вот половина кнопок из-за него не нажимается (включая и калькулятор).
Nappsel
Поддерживаю. Выглядит отлично, всё на своих местах, бизнес-требования выполнены. Но за Bootstrap'ом – сомнительные решения и неработающий функционал с включёнными блокировщиками.
hekcfy Автор
Спасибо за отличные комментарии! Увы, я не полностью в курсе всех технических моментов, так как выступаю больше в роли UX-дизайнера. Но видимо у разработчиков были на то свои причины.
По PWA могу точно сказать, что оффлайн-режим был как раз тем ключевым критерием, почему решили использовать ее для проекта. Однако на PWA работает сметное приложение, а не сам сайт.
p.s. Передал комментарии разработчикам.