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