CustDev: корпоративный сайт, который «построил» клиент

Как тестирование идеи или прототипа на ЦА помогло нам сделать клиентоориентированный корпоративный сайт.

Привет! Мы, Umbrella IT, уже 10 лет занимаемся разработкой приложений и ИТ-консалтингом. Мы работаем на рынке информационных технологий с 2009 года, и всё это время компания активно развивалась.

К 2018 году у нас стало больше сотрудников, открылись офисы в других городах, мы выбрали основные фокусные отрасли. Спектр услуг расширился: помимо мобильной и веб-разработки, мы начали заниматься ИТ-консалтингом и аудитом, выпускаем собственные продукты.

Позиционирование компании изменилось, и фирменный стиль нуждался в обновлении. С этой задачей мы обратились в «Студию Артемия Лебедева», и его команда разработала для нас новую айдентику:

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

Мы проанализировали сайт и выделили те аспекты, которые требовали доработки в связи с новым статусом компании:

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

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

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

Мы точно определили свою целевую аудиторию (ЦА) и разделили ее на лиц, принимающих решение (ЛПР), и лиц, влияющих на решение (ЛВР). При переходе на сайт представители каждой группы руководствуются разными целями и ищут ответы на разные вопросы.

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

После того как мы сегментировали ЦА, последовало составление усредненных профилей клиента. На этом этапе было важно не свести всё к обезличенному набору характеристик, а создать как можно более реалистичный портрет, в котором можно увидеть реальных людей и их потребности.

Когда были готовы аватары, мы проанализировали каналы коммуникаций, через которые впервые устанавливается контакт с клиентами. На первый взгляд, возможных точек соприкосновения довольно много (мы насчитали более 30). Например:

Так, один из путей знакомства с компанией для PM может начинаться с конференции и развиваться так:

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

Все пути были протестированы экспертами по работе с клиентами Umbrella IT: они оценили, насколько описанные нами шаги соответствуют реальности.

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

К началу мая все аватары и клиентские пути были утверждены, и мы перешли к следующему этапу.

Разработка вайрфрейма велась поэтапно. Мы тестировали прототипы на представителях ЦА, собирали обратную связь, по итогам которой вносили в прототип изменения. Затем снова проводили UX-тестирование.

UX-тестирование планировалось проводить на внешней аудитории, но пока шли согласования с подрядчиком, мы решили протестировать вайрфрейм на специалистах Umbrella IT. В качестве респондентов были выбраны наши руководители проектов.

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

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

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

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

Мы вели видеозапись действий, происходящих на экране, а также фиксировали возникающие вопросы.

Схематично процесс тестирования можно описать так:

Исследование проводилось итерациями: после того как мы получали и обрабатывали результаты двух-трех тестов, нужно было отделить объективно необходимые изменения от субъективных и внести правки в прототип.

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

В июне к работе подключился наш партнер — Высшая школа экономики, которая представляет собой крупнейший в Восточной Европе научно-образовательный комплекс.

Сотрудники UX-лаборатории ВШЭ специализируются на когнитивной психологии пользователя цифровых интерфейсов и технических устройств. По заданным нами критериям эксперты теоретико-экспериментальных исследований подобрали целевую аудиторию для внешнего тестирования прототипа сайта.

На этом этапе в нем приняли участие CTO, PM и менеджеры по продукту из таких компаний, как Mail.ru, Deloitte, «Яндекс.Деньги», Gloria Jeans, Leroy Merlin, СТС, Setters (привет, коллеги!). Принцип тестирования не изменился, но теперь респонденты не примеряли на себя чужую роль, а находились в собственном аватаре и контексте.

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

Мы давали участникам ознакомиться с нашими услугами и задавали простые вопросы:

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

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

Мы задумались, как это можно реализовать. Вскоре поступило еще одно пожелание:

Решение нашлось: мы добавили ссылки на профили руководителей в LinkedIn. Последующие респонденты это заметили и оценили.

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

Хотя была получена обратная связь о том, что это просто дизайн, не особенно влияющий на восприятие компании:

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

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

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

Представление услуг и кейсов на сайте было изменено по результатам полученной от респондентов обратной связи в ходе серий тестирования. Подход CustDev позволил нам охватить многие узкие места во время предевелопмента, что позволило сэкономить значительное время на стадии разработки.

После того как мы утвердили прототип сайта, к работе приступили разработчики. В июне началась бэкенд-разработка, которая велась на базе WordPress 5+. WP отличается простым и экономичным кодом, что позволяет новым членам команды быстро вливаться в работу.

Для панели администратора был использован новый редактор Gutenberg, который дает возможность редактировать сетку, использовать набор удобных блоков для работы с мультимедийным контентом, а также вставлять виджеты в контент страниц.

Создание сайта на базе WP позволило решить следующие задачи:

В сентябре к работе приступили дизайнеры и фронтендеры. В первую очередь дизайн сайта должен был соответствовать новой айдентике. Разработкой айдентики Umbrella IT занималась «Студия Артемия Лебедева», при работе над сайтом UIT мы решили продолжить сотрудничество со «Студией», которая подключилась в том же месяце.

Новый дизайн должен был учитывать следующие требования:

Как только заканчивали одну страницу, ее сразу верстали, а отдел дизайна брал в работу следующую. Это помогло ускорить рабочий процесс.

20 октября 2019 года состоялся релиз нового сайта Umbrella IT. Мы начали получать первые отзывы. Особенно важна для нас была обратная связь от англоязычной аудитории, так как 80% наших клиентов составляют компании из США и Канады.

Мы предложили своим текущим клиентам поучаствовать в небольшом тестировании. В основном вопросы касались общего впечатления о сайте.

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

Например, мы выяснили, что не все посетители понимают, что скрывается за заголовком «Наши бренды», и скорректировали формулировку:

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

Соответствующий текущему позиционированию компании и протестированный на респондентах из нашей ЦА. Услуги и кейсы написаны на языке клиента.

Разделы и блоки сайта сформированы с оглядкой на пути клиентов. Вовлеченность пользователей возросла за счет релевантного кросс-контента. Ни один раздел сайта не остается без внимания, что подтверждается тепловыми картами «Яндекса».

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

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

Если вам было интересно, заходите на наш сайт и посмотрите своими глазами, как выглядит всё, о чем мы рассказывали.

#сайт #wordpress #custdev