
Примечание: проект под НДА, поэтому кейс не содержит никаких графических материалов.
К нам обратилась компания, которая занимается лизингом автомобилей, техники и оборудования — от легковых машин до сельхозтехники и спецоборудования. Бизнес активно развивается, и клиенту потребовался надёжный цифровой инструмент для презентации услуг и работы с заявками.
Перед нами стояла задача разработать корпоративный сайт с нуля. Клиент обозначил несколько ключевых целей проекта:
Разработка и запуск шли поэтапно — небольшими итерациями. Ещё на старте договорились с клиентом: функциональность будем расширять постепенно, чтобы каждый релиз давал ощутимую ценность пользователям и бизнесу. Заранее спланировали архитектуру на несколько шагов вперёд, что позволило работать последовательно и без лишней спешки. Ниже — подробнее о каждом этапе.
Перед стартом работ клиент прислал объёмный документ с подробными требованиями к функционалу сайта. Изучив техническое задание, взяли в работу страницы для первого релиза и провели по ним конкурентный анализ. Исследование помогло понять, как другие компании подходят к организации контента: какие блоки используют, какой функционал размещают, на чём делают акцент.
Прототипы разрабатывали поэтапно, продолжая погружаться во внутренние процессы компании. На совместных созвонах с командой клиента узнавали детали, которые важно транслировать на сайте, чтобы повысить информативность страниц и обеспечить интуитивно понятное взаимодействие пользователя с ресурсом.
Например, один из важных с точки зрения бизнеса разделов — «Спецпредложения» — содержит акции от производителей и дилеров, государственные программы субсидирования лизинга и внутренние продукты компании. Для удобного изучения предложений разработали фильтр по предметам лизинга и маркам техники.
После согласования прототипов сразу отдавали их в дизайн, чтобы ускорить процесс разработки. Дизайн собирали на основе дизайн-системы, предоставленной клиентом. Для отдельных макетов и блоков самостоятельно готовили 3D-графику.
За восемь недель с момента старта сотрудничества наша команда:
Этап включал в себя:
Начали с серии бизнес-интервью с представителями компании из разных отделов. Общались со стейкхолдерами, топ-менеджером по стратегическому развитию, с сотрудниками из отдела продаж и клиентского сопровождения. Интервью помогли погрузиться в бизнес-процессы компании, определить ответственных за ключевые этапы и выявить потребности, которые можно решить с помощью сайта. Ответы разложили на схемах в Figma.
Выделили две ключевые роли: клиенты и агенты (лизинговые брокеры). Подготовили методологию исследования, в которой прописали цели и задачи, критерии отбора респондентов, вопросы для интервью.
Отдельно составили анкету для скоринга респондентов, по которой внешнее агентство подобрало для нас необходимых людей. Целевая аудитория была достаточно узкой. Нужно было найти ИП или представителей юрлиц, которые недавно брали лизинг и проходили весь процесс от выбора лизинговой компании до получения техники самостоятельно. В крупных компаниях за разные этапы работ отвечают разные люди: один за поиск лизинговой компании, другой за документы, третий за получение и ввод в эксплуатацию.
Для проведения исследования агентов необходимо было найти действующих специалистов, открытых к диалогу, при этом не сотрудничающих с нашим клиентом или хотя бы не имеющих его в качестве основного партнёра в брокерском портфеле.
С каждым респондентом провели глубинное интервью и по результатам ответов составили для каждой роли детальную карту пользовательского пути (CJM). Помимо основных показателей карты, дополнительно включали в каждый шаг цитаты с интервью, чтобы на презентации подсвечивать важные моменты словами респондентов.
Далее из каждой карты составили для клиента и агента модель информационных ожиданий (МИО). Зафиксировали для каждой роли:
Метод помогает составить список необходимой функциональности на сайте для достижения большинством пользователей их целей.
CJM-ки и модели информационных ожиданий стали основой для создания информационной архитектуры проекта. Помимо основных разделов и подразделов она содержала названия контентных блоков, перечень функционала на страницах и кнопки действия.
Начали работу с элементов навигации, затем перешли на внутренние страницы. В основном разделы состояли из табличных интерфейсов, в каждом из которых фокус на своей ключевой информации.
Учитывали максимальное и минимальное наполнение информации, пустые состояния. Кроме того, добавляли в местах, где это уместно, маркетинговые блоки: на калькулятор, заявки, дополнительные услуги.
В отличие от публичной части, калькулятор в личном кабинете был гораздо насыщеннее по информации и возможностям. Весь процесс мы разбили на отдельные шаги:
Завершающим этапом была подготовка стартовой страницы — дашборда. Она содержит наиболее важные блоки для клиента:
По структуре и информации кабинет агента схож с кабинетом клиента, но есть и различия.
Например, все агенты перед тем, как получить доступ к кабинету, проходят процесс аккредитации. Без него работать в кабинете не получится. При этом для ИП, ООО и физических лиц спроектированы разные сценарии, которые основываются на юридических аспектах работы каждой организационно-правовой формы.
Также у агентов появляется дополнительный раздел — «Клиенты». Он хранит информацию о покупателях, для которых делаются расчёты. Агент может самостоятельно заводить новых клиентов, делать для них расчёты, оставлять важные заметки в процессе работы.
И, конечно, фокус в личном кабинете агента на значимой для него финансовой информации — комиссии, выплаты, лимиты. Это всё прозрачно и наглядно можно посмотреть на стартовой странице кабинета.
На базе проведённых исследований и бизнес-целей компании доработали существующие страницы и создали новые.
Спроектировали и встроили в сайт функционал, который предлагает пользователям рассчитать предварительную стоимость лизинга онлайн. В процессе разработки калькулятор претерпел немало изменений. Вместе с клиентом обсуждали, какие предустановленные параметры показывать и какие критерии выводить в итоговом расчёте.
Основные требования, которые предъявлялись, — простота в использовании, вариативность расчётов и наглядность для пользователей.
Разводящая страница, которая содержит перечень техники по категориям:
Также на страницу добавились блоки про программы лизинга и процесс оформления заявки, чтобы предоставить пользователям достаточное количество информации для принятия решения.
На этапе проектирования совместно с клиентом продумывали логику и порядок контента. Так, страница содержит блок с акциями и программами господдержки, чтобы сразу обратить внимание пользователей на выгодные предложения.
Есть несколько форм захвата, под разные потребности целевой аудитории:
На данной странице представлены условия лизинга для крупных компаний.
Страница содержит информацию о преимуществах, решениях для крупного бизнеса, видах лизинга, графиках платежей, программах субсидирования и порядке оформления транспорта в лизинг. При клике на карточки предметов финансирования появляется дополнительная информация о льготных программах для продукта и позициях банка в соответствующих рейтингах.
Страница содержит информацию о дополнительных услугах для клиентов компании, цифровых сервисах, правилах лизинга.
На данной странице представлен перечень программ господдержки с функцией фильтрации по предмету лизинга. Для каждой программы были разработаны графические материалы, соответствующие дизайн-системе компании.
После завершения работ по внутренним страницам, добавили на главную новые блоки: предметы лизинга и калькулятор стоимости.
Для блока с предметами лизинга в процессе работы делали несколько вариантов отображения. От бизнес-группы было требование — показать на главной все категории техники. В финальном варианте остановились на компактном слайдере.
В каждой плашке с техникой зашита мини-анимация, для которой мы раскладывали композицию на отдельные элементы, чтобы верстальщикам было удобно настраивать взаимодействие.
В рамках первого релиза запустили в сжатые сроки новый сайт, который позволил заказчику продвигать услуги финансовой аренды на собственной площадке. Пользователи стали быстрее находить компанию в поисковых системах, а на самом ресурсе собрана информация о деятельности компании, её услугах и спецпредложениях.
***
Второй релиз начался с исследования целевой аудитории. На основе глубинных интервью разработали CJM клиента и агента, составили информационную архитектуру с перечнем ключевой информации и функционала. В рамках него же у сайта появилось два личных кабинета: для клиента и агента. В них можно проводить расчёты, управлять заявками, подключать услуги, получать необходимую информацию в разрезе договоров.
***
Третий релиз дополнил сайт новыми разделами (предметы лизинга, корпоративным клиентам, субсидии, дополнительные услуги). Появился лизинговый калькулятор, который позволяет получать предварительные расчёты.