О проекте
С фирмой Onduline мы работаем больше 15 лет. За это время разработали для клиента несколько решений, включая корпоративный сайт, интернет-магазин и конструктор дилерских сайтов.
За эти годы мы не только детально разобрались в рынке кровельных материалов, но и стали воспринимать бизнес-задачи клиента как свои собственные (и покупателей клиента — как своих собственных). Когда мы видим, что можем сделать лучше, чем «прописано в ТЗ», и это будет полезно бизнесу клиента, мы делимся своим мнением. В таком партнерстве реализовано множество веб-решений, успешность которых доказана бизнес-показателями Onduline.
Весной мы воплотили ещё одну задумку клиента — Примерочную для крыши. Пользователи интернет-магазина оценили опцию и уже проголосовали за неё новыми заказами.
Задача № 1 — Создать примерочную для «каждой» крыши
Onduline провел собственное исследование рынка и сформулировал гипотезу: для успешного роста продаж необходимо позволить онлайн-покупателю «примерить» кровлю на свой дом.
«Ондулину» хотелось показать покупателю, как может выглядеть дом с выбранной кровлей, дать возможность рассмотреть строение со всех сторон и прямо в Примерочной рассчитать объем (по материалам) и стоимость заказа.
С этой идеей клиент пришел к нам.
В ходе конкретизации задачи выяснили, что нужно не только создать крыше «примерочную», но и изменить путь пользователя по сайту. Примерочная должна стать ключевым разделом сайта, определяющим этот путь.
Задача № 2 — Вести покупателя от его потребности
Приходя на сайт, покупатель видел в главном меню каталог очень разных по внешнему виду материалов — Ондулин Smart, Ондувилла и Ондутис. Чтобы понять, какая кровля ему подходит, пользователь изучал информацию, переходя по каждой ссылке. Затем обращался к Калькулятору, чтобы оценить нужный объем и сумму заказа.
Так выглядело верхнее меню интернет-магазина:
Onduline предположил, что более правильный путь — от потребности покупателя, то есть от способа применения кровли. Для этого в верхнее меню нужно вынести не тип материала, а тип строения. Увидев подходящее своей задаче строение (дом, коттедж или дача), пользователь будет кликать на него и попадать в Примерочную.
Реализация и эволюция задач
Оптимизация задачи
На сайте «Ондулина» уже работал Калькулятор, который брал на себя функцию расчета заказа. Мы предложили клиенту оптимизировать задачу — не дублируя функцию расчета объема и стоимости заказа в отдельный раздел сайта, расширить функционал готового Калькулятора и превратить его в Примерочную.
Как выглядел и работал ранее созданный нами Калькулятор:
Обновление стратегии
Заказчик предложил привязать к каждому типу строения один определенный тип материала. Если покупатель кликнет в меню на кнопку «Коттедж», то к нему сразу привяжется материал «Ондувилла» (самый дорогой). При выборе «Дома» — черепица «Ондулин» (средний ценовой сегмент). Выбирая «Дачу», покупатель получает связку с бюджетным вариантом «Ондулин Smart».
Мы предложили заказчику поменять стратегию и дать покупателю возможность «примерить» все возможные варианты. Вполне реальна ситуация, когда человек хочет выложить и крышу дома, и крышу рядом стоящего сооружения (в терминологии сайта это тип «дача») одной черепицей — так будет аккуратнее и красивее.
По нашей новой логике, выбрав «дачу», покупатель попадает в Примерочную, видит предложение использовать приоритетный материал «Ондулин Smart» и визуальный образ. Однако он всегда может выбрать внутри «дачи» другой тип кровли — и рассмотреть его со всех сторон.
Заказчик поддержал наше предложение. Мы соединили Примерочную с кнопками «Дача», «Дом» и «Коттедж» в верхнем меню интернет-магазина.
Например, выбрав «Дом», покупатель попадает на Примерочную (улучшенный, реструктурированный и расширенный по функционалу Калькулятор), где может и поменять тип строения, и примерить на него материал каждого типа и разного цвета:
Создание анимации
Мы создали анимацию на рендерах, 3D-изображениях. На каждой такой картинке показывается определенная сцена — вид дома с «выложенной» на его крышу кровлей определенного цвета и с определенного ракурса.
Заказчик подготовил множество рендеров и предложил зациклить анимацию.
В ходе тестирования клиент принял решение оставить частичную анимацию: выбран тип строения, тип и цвет материала — сцена на видео делает полный оборот и останавливается. После чего пользователь может самостоятельно вращать изображение вправо-влево, чтобы в спокойном режиме увидеть строение с разных ракурсов.
Дополнительные задачи
Погрузившись в стратегию максимального удобства для покупателя, Onduline решил добавить в Примерочную ряд новых возможностей:
- Отображение минимальных цен на каждый тип материала в выбранном покупателем регионе;
- Дополнить схему дополнительных элементов крыши (конёк, трубы, рёбра, карнизы и так далее), создав отдельные изображения под каждый тип и цвет кровли;
- Добавить окрашивание крыши на схеме доп. элементов в выбранный покупателем в Примерочной цвет;
- Отображение на цветной схеме дополнительных элементов крыши (конек, труба, рёбра, карниз и так далее);
- Возможность сразу же после расчета выводить результаты на печать или отправлять на электронную почту.
Всё нужно очень срочно
Мы оценили разработку в 2 месяца.
При этом клиенту было необходимо реализовать задумку для важной внутренней презентации строго за месяц. Но подготовить все рендеры «Ондулин» точно не успевал.
Мы оказались в непростой ситуации, но вместе с заказчиком нашли вариант.
Декомпозировали задачу и уложились в срок
Задачу разделили на три этапа:
1 — MVP (сама примерочная, анимация, верхнее меню и его связка с каждой вариацией примерочной) — строго за 1 месяц.
Основной функционал был опубликован на локальной версии сайта в срок. Внутренняя презентация у клиента прошла успешно.
2 — Наполнение Примерочной рендерами и публикация изменения на открытой версии сайта — как только получаем рендеры от клиента.
Через 2 недели Примерочная была наполнена и открыта для покупателей интернет-магазина.
3 — Расширение функционала — еще 2 недели:
- Отображение минимальных цен для каждого региона;
- Добавление дополнительных элементов на схему и в расчет;
- Синхронное изменение цвета схемы доп. элементов при выборе покупателем другого цвета крыши;
- Распечатка и отправка расчета на электронную почту.
Мы доработали функционал, постепенно расширяя возможности уже работающей в интернет-магазине клиента Примерочной.
Одним кликом можно активировать работу с дополнительными элементами, выбрать нужные, увидеть на схеме и добавить в расчет:
Как и просил заказчик, цвет крыши на схеме меняется в зависимости от выбранного покупателем цвета материала:
Покупатель может отправить расчет заказа на e-mail, принтер или сохранить как pdf-файл:
Результаты — рост заказов в интернет-магазине
Через месяц после запуска Примерочной и изменения пути пользователя по сайту выросла конверсия посетителей интернет-магазина «Ондулина».
Изменение признано успешным, гипотеза клиента о том, что покупателя простимулирует возможность «примерить» кровлю на крышу, оказалась верной, наши предложения по стратегии тоже сыграли в плюс.
— В результате изменений на сайте хорошо выросла конверсия в заказ и Avg. Session Duration. Наша гипотеза продавать не товар, а решение, оказалась верна! Хочу отметить высокий уровень ответственности и профессионализма всех сотрудников компании и одну из самых важных характеристик — желание и умение предложить свое видение реализации каждой мелочи, каждой доработки на сайте, отстоять свою позицию и прийти к самому положительному результату!
Александр Кузнецов
Digital Lead компании «Ондулин»
Сотрудничество продолжается
Мы продолжаем анализировать результаты работы Примерочной в интернет-магазине «Ондулина» и поддерживать все созданные ранее для клиента проекты. Вполне вероятно, что в каком-то из них в партнерстве с клиентом мы снова придумаем что-то интересное на пользу и покупателю, и бизнесу. Любим такую работу.
Команда проекта
- Руководитель проекта: Евгений Лазарев
- Графический дизайн: Александр Воронин, Ирина Тюрина
- Backend: Сергей Никитченко
- Frontend: Сергей Семенов, Дмитрий Тарасенко
- Тестирование: Анна Шорина