Как создать портал программы лояльности: наш опыт с Viessmann

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

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

Программа лояльности может стать эффективной стратегией, когда речь идет о том, чтобы партнеры компании оставались довольны и продавали больше оборудования. Но успех такой программы зависит от нескольких критических факторов — ее удобства и пользы для партнеров. Именно на это мы опирались, разрабатывая программу лояльности для Viessmann.

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

Также создали конкурс на лучшую котельную. Цель конкурса заключалась в том, чтобы стимулировать пользователей зарегистрировать как можно больше оборудования, получить за это ключи к открытию виртуальных замков и, собрав необходимое количество ключей, получить призы. Для большей мотивации мы внедрили систему ачивки на аватаре в виде гаечного ключа, которую пользователи получали за победу в конкурсе. Такого мы не видели у других производителей. Это позволило увеличить продажи и количество партнеров, что положительно сказалось на бизнесе нашего клиента.

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

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

Кроме того, создали уведомления для менеджера, который отслеживал победителей и отправлял призы.

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

Одной из самых больших проблем, с которыми мы столкнулись во время разработки интерфейса, была работа с таблицами. Изначально у нас был один пул данных, где таблица имела ограниченную ширину, что оказалось недостаточным по мере развития портала и добавления дополнительной информации. Чтобы решить эту проблему, мы создали дополнительную страницу, на которой пользователи могли просматривать все данные, а в адаптивной версии добавили функцию просмотра всего, что не поместилось в таблицу, в окне. Это позволило упростить и облегчить работу пользователей.

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

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

История портала программы лояльности компании Viessmann — отличный пример эффективного управления проектами. Мы начали с MVP и разделили функциональность, что позволило нам быстро запустить проект с такими функциями, как регистрация пользователей, авторизация, система баллов и регистрация оборудования. Следуя этому подходу, мы уложились в срок и перешли к работе над панелью администратора.

Мы создали приложение с чистым, понятным кодом, который прост в понимании любому разработчику. Также учли все современные подходы к программированию, в том числе паттерны проектирования, SOLID, оптимизированные запросы к базам данных и кэширование в нужных местах. В результате получили приложение, которое работает быстро и без ошибок, что значительно повышает юзабилити.

Для реализации сложного интерактива и бесперебойной работы страниц мы использовали Vue JS. Такие игры, как «Колесо Фортуны» и «Собери котельную», а также множество других элементов на сайте — все это мы сделали с помощью этого фреймворка. Благодаря этому сайт соответствует всем последним требованиям современного кода и удобства пользования.

Использовали MySQL, любимую всеми базу данных, которая рассчитана на большие нагрузки и объемы данных. Это позволило нам хранить огромное количество информации, включая данные о производителе оборудования Viessmann и информацию о пользователях.

Уделили особое внимание безопасности: реализовали надежный SSL, использовали антивирус для файловой системы и корректно обрабатывали файлы, которые предоставляли пользователи.

Также разработали систему email-рассылки с минимальной вероятностью попадания в спам. Администраторы и менеджеры портала получали уведомления о действиях пользователей, когда это было необходимо.

Создали систему переписки между администраторами и пользователями портала, что позволяет легко объяснить клиентам, почему заявки были отклонены и что необходимо сделать, чтобы их подтвердить. А клиенты могут задавать интересующие их вопросы и получать ответы на них.

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

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

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