Разработка калькулятора кровли для сайта «Ондулин» с возможностью «примерки»

С фирмой Onduline мы - SVK.Digital - работаем больше 15 лет. За это время разработали для клиента несколько решений, включая корпоративный сайт, интернет-магазин и конструктор дилерских сайтов.

За эти годы мы не только детально разобрались в рынке кровельных материалов, но и стали воспринимать бизнес-задачи клиента как свои собственные (и покупателей клиента — как своих собственных). Когда мы видим, что можем сделать лучше, чем «прописано в ТЗ», и это будет полезно бизнесу клиента, мы делимся своим мнением. В таком партнерстве реализовано множество веб-решений, успешность которых доказана бизнес-показателями Onduline.

Так мы воплотили ещё одну задумку клиента — Примерочную для крыши. Пользователи интернет-магазина оценили опцию и уже проголосовали за неё новыми заказами.

Задача № 1 — Создать примерочную для «каждой» крыши

Onduline провел собственное исследование рынка и сформулировал гипотезу: для успешного роста продаж необходимо позволить онлайн-покупателю «примерить» кровлю на свой дом.

«Ондулину» хотелось показать покупателю, как может выглядеть дом с выбранной кровлей, дать возможность рассмотреть строение со всех сторон и прямо в Примерочной рассчитать объем (по материалам) и стоимость заказа.

С этой идеей клиент пришел к нам.

В ходе конкретизации задачи выяснили, что нужно не только создать крыше «примерочную», но и изменить путь пользователя по сайту. Примерочная должна стать ключевым разделом сайта, определяющим этот путь.

Задача № 2 — Вести покупателя от его потребности

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

Так выглядело верхнее меню интернет-магазина:

Onduline предположил, что более правильный путь — от потребности покупателя, то есть от способа применения кровли. Для этого в верхнее меню нужно вынести не тип материала, а тип строения. Увидев подходящее своей задаче строение (дом, коттедж или дача), пользователь будет кликать на него и попадать в Примерочную.

Реализация и эволюция задач

Оптимизация задачи

На сайте «Ондулина» уже работал Калькулятор, который брал на себя функцию расчета заказа. Мы предложили клиенту оптимизировать задачу — не дублируя функцию расчета объема и стоимости заказа в отдельный раздел сайта, расширить функционал готового Калькулятора и превратить его в Примерочную.

Как выглядел и работал ранее созданный нами Калькулятор:

Обновление стратегии

Заказчик предложил привязать к каждому типу строения один определенный тип материала. Если покупатель кликнет в меню на кнопку «Коттедж», то к нему сразу привяжется материал «Ондувилла» (самый дорогой). При выборе «Дома» — черепица «Ондулин» (средний ценовой сегмент). Выбирая «Дачу», покупатель получает связку с бюджетным вариантом «Ондулин Smart».

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

По нашей новой логике, выбрав «дачу», покупатель попадает в Примерочную, видит предложение использовать приоритетный материал «Ондулин Smart» и визуальный образ. Однако он всегда может выбрать внутри «дачи» другой тип кровли — и рассмотреть его со всех сторон.

Заказчик поддержал наше предложение. Мы соединили Примерочную с кнопками «Дача», «Дом» и «Коттедж» в верхнем меню интернет-магазина.

Например, выбрав «Дом», покупатель попадает на Примерочную (улучшенный, реструктурированный и расширенный по функционалу Калькулятор), где может и поменять тип строения, и примерить на него материал каждого типа и разного цвета:

Создание анимации

Мы создали анимацию на рендерах, 3D-изображениях. На каждой такой картинке показывается определенная сцена — вид дома с «выложенной» на его крышу кровлей определенного цвета и с определенного ракурса.

Заказчик подготовил множество рендеров и предложил зациклить анимацию.

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

Дополнительные задачи

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

• Отображение минимальных цен на каждый тип материала в выбранном покупателем регионе;
• Дополнить схему дополнительных элементов крыши (конёк, трубы, рёбра, карнизы и так далее), создав отдельные изображения под каждый тип и цвет кровли;
• Добавить окрашивание крыши на схеме доп. элементов в выбранный покупателем в Примерочной цвет;
• Отображение на цветной схеме дополнительных элементов крыши (конек, труба, рёбра, карниз и так далее);
• Возможность сразу же после расчета выводить результаты на печать или отправлять на электронную почту.

Всё нужно очень срочно

Мы оценили разработку в 2 месяца.

При этом клиенту было необходимо реализовать задумку для важной внутренней презентации строго за месяц. Но подготовить все рендеры «Ондулин» точно не успевал.

Мы оказались в непростой ситуации, но вместе с заказчиком нашли вариант.

Декомпозировали задачу и уложились в срок

Задачу разделили на три этапа:

1 — MVP (сама примерочная, анимация, верхнее меню и его связка с каждой вариацией примерочной) — строго за 1 месяц.

Основной функционал был опубликован на локальной версии сайта в срок. Внутренняя презентация у клиента прошла успешно.

2 — Наполнение Примерочной рендерами и публикация изменения на открытой версии сайта — как только получаем рендеры от клиента.

Через 2 недели Примерочная была наполнена и открыта для покупателей интернет-магазина.

3 — Расширение функционала — еще 2 недели:

• Отображение минимальных цен для каждого региона;
• Добавление дополнительных элементов на схему и в расчет;
• Синхронное изменение цвета схемы доп. элементов при выборе покупателем другого цвета крыши;
• Распечатка и отправка расчета на электронную почту.

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

Одним кликом можно активировать работу с дополнительными элементами, выбрать нужные, увидеть на схеме и добавить в расчет:

Как и просил заказчик, цвет крыши на схеме меняется в зависимости от выбранного покупателем цвета материала:

Покупатель может отправить расчет заказа на e-mail, принтер или сохранить как pdf-файл:

Результаты — рост заказов в интернет-магазине

Через месяц после запуска Примерочной и изменения пути пользователя по сайту выросла конверсия посетителей интернет-магазина «Ондулина».

Изменение признано успешным, гипотеза клиента о том, что покупателя простимулирует возможность «примерить» кровлю на крышу, оказалась верной, наши предложения по стратегии тоже сыграли в плюс.