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

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

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

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

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

Слева — элементы старой айдентики, справа — обновленной​

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

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

  • Неактуальный контент. Не все услуги, которые мы предоставляли к тому времени, были отражены на сайте. Необходимо было привести к одному виду и опубликовать новые кейсы и проекты, чтобы их видела наша целевая аудитория.
  • Неоптимальная структура. Тепловые карты «Яндекса» показали, что одни страницы посещались активнее, другие оставались без внимания пользователей.
  • Медленная загрузка страниц. Сайт был перегружен анимациями, из-за которых страницы долго грузились.
  • Отсутствие гибкости. Чтобы добавлять на сайт новый контент или вносить изменения, требовались большие трудозатраты со стороны разработчиков.

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

Аватары и пути клиентов

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

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

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

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

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

PM (Project Manager)

Я не могу принять решение о выборе вендора, заходя на сайт впервые. Буду выбирать из десяти компаний. А тут первое впечатление — потратил бы 5 минут. Не вычеркнул бы из первого прескрининга.

CTO (Chief Technical Officer)

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

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

  • Личная встреча на конференции.
  • Упоминание компании в СМИ.
  • Участие в профильных рейтингах.
  • Представительство в социальных сетях.
  • Рекомендация знакомых или партнеров.

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

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

​Карта клиентских путей

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

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

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

Вайрфрейм и тестирование сайта

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

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

Внутренний этап тестирования

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

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

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

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

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

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

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

  1. Участник знакомится с сайтом, в вольной форме комментирует свои действия и впечатления, мы задаем вопросы.
  2. Если мы замечаем необычное поведение (например, быстрый возврат после перехода в другой раздел или попытку нажать на некликабельную надпись), уточняем, чем вызвано действие.
  3. После этого тестируемый переходит в другой раздел.
  4. Таким образом, он движется по сайту до тех пор, пока, по его мнению, он не достигнет своей цели.
  5. По окончании тестирования мы задаем участнику подготовленные вопросы.

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

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

Внешний этап тестирования

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

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

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

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

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

  • «Как вы поняли, что подрядчик делает в рамках услуги?»
  • «Что получает на выходе клиент?»
  • «Что отличает эту услугу от подобных на рынке, если таковые имеются?»
  • «Вызывает ли компания у вас доверие?»

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

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

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

PM

Покажите людей. Выгрузите их аватарки из соцсетей. Это всегда человечней и интересней.

Руководитель управления цифровых сервисов и электронных продаж

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

Посмотрел бы LinkedIn руководителей.

PM

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

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

Складывается единая картина о компании: таймлайн + кейсы + клиенты + награды.

CQO (Chief Quality Officer)

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

PM

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

Для меня это чисто дизайнерская вещь. Информация внутри — не определяющая.

PM

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

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

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

CTO

Не понравились крупные изображения на карточках кейсов.

PM

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

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

Разработка и дизайн

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

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

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

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

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

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

  • Должны строго соблюдаться предписания гайдлайна.
  • Сайт должен представлять собой конструктор: блоки на сайте необходимо привести к единому виду и структуре, чтобы было легко и удобно наполнять контентом готовые модули.
  • Логика вайрфрейма не должна меняться: блоки жестко зафиксированы согласно результатам тестирования, их нельзя добавлять или удалять в интересах дизайна.
  • Порядок восприятия контента на странице не должен нарушаться (например, нельзя перегружать сайт визуальными эффектами и анимациям, которые будут отвлекать внимание пользователя от основной информации).

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

​Сайт адаптирован под разные устройства, что позволяет удобно просматривать все блоки

Релиз

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

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

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

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

Итоги

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

Представлен релевантный контент

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

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

Руководитель онлайн-платформ

Оптимизирована структура

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

Увеличена скорость загрузки страниц

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

Сайт стал гибким

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

Возросший трафик отразил изменения 

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

0
17 комментариев
Написать комментарий...
Stanislav Meshkov

Еще хочу добавить:

Минус CustDev - теперь мне хочется тестировать все что выпускаем, но я понимаю что не всегда это надо, и часто скорость дороже. 

Ответить
Развернуть ветку
Владислав Писарев

Мне захотелось сразу закрыть сайт после того, как увидел это.

PM

Ответить
Развернуть ветку
Stanislav Meshkov

 Можете рассказать подробнее почему? 

P.S. На фото логотипы наших клиентов. 

Ответить
Развернуть ветку
Владислав Писарев

А вы молодцы 👍

Ответить
Развернуть ветку
Владислав Писарев

Очень просто: нечитаемый текст.

Ответить
Развернуть ветку
Александр Львов

Расскажите про архитектуру подробнее

 Сайт стал гибким: архитектура позволяет контент-менеджеру управлять им без привлечения разработчиков. 

Как это всё выглядит для менеджера, который отвечает за наполнение сайта контентом? Какие решения использовали, как к ним пришли? 

Ответить
Развернуть ветку
Станислав Мешков
Автор

Контент на предыдущем сайте Umbrella IT был на 90% захардкожен: состоял из кастомных неповторяющихся блоков. Даже для небольших текстовых изменений было необходимо подключать разработчика и проводить весь цикл разработки: внесение изменений, тестирование, релиз. Это увеличивало время доставки, стоимость поддержки сайта. Сейчас же сайт представляет собой конструктор: практически всё, что видят пользователи (мета-информация, вёрстка блоков под 5 типов разрешений/брейкпоинтов, разметка кейсов, услуг и других страниц) может настраиваться контент-менеджерами через систему администрирования WordPress. Для этого мы использовали новый редактор WP Gutenberg (написан на React’е, что позволяет достаточно быстро и удобно редактировать это в админке), расширив его функционал в соответствии с нашими требованиями.

Ответить
Развернуть ветку
Anatoly

Старый фирстиль был лучше...

Ответить
Развернуть ветку
Станислав Мешков
Автор

Вот даже интересно стало :) А можно немного подробнее - чем именно он был лучше, по вашему мнению?

Ответить
Развернуть ветку
Anatoly

В нем был зонтик. А новый буквенный, без души, без маскота

Ответить
Развернуть ветку
Станислав Мешков
Автор

На самом деле, концепция зонта сохранилась, только стала минималистичней

Ответить
Развернуть ветку
Anatoly

Хехехе забавно

Ответить
Развернуть ветку
Фабрика деда Мороза

По мне старый фирменный стиль напоминает цвета обложки Corel7 и тематику групповых йога туров с Индийским оттенком). Новый логотип более «чист», хотя и прост.

Ответить
Развернуть ветку
Станислав Мешков
Автор

Все верно) Стремились именно к простоте, лаконичности. И при этом хотелось добавить динамики. В этом смысле полоса дает очень широкий простор для визуального представления

Ответить
Развернуть ветку
Алексей из LOADING.express

Сам кейс расписан хорошо... Но сам сайт можно и нужно доделать по показателям performance. Вот что можно улучшить:

1. Отложить загрузку изображений, которых нет на первом экране. 

2. Сервер должен отвечать до 400 ms. Сейчас время ответа прыгает по 25 замерам от 521 до 837 ms.

3. Картинки сжать в WebP версии и отдавать их для браузеров которые их поддерживают. Можно сделать при помощи того же CloudFlare на тарифе за 20 долларов в месяц. Можно вручную, но конечно дольше сжимать и менять верстку. 

4. Настроить HTTP/2 Push и прелоад для следующих ресурсов.
CSS, JS и шрифтов. 

5. Всю статику кэшировать на полгода минимум. Лучше навсегда. 

6. Сторонние коды пикселей ретаргета можно отложить на 3-5 секунд, аналитики можно отложить на 1-2 секунды.

Надеюсь, что мы нашли правильный сайт ваш — https://umbrellait.com/ru/.
Сейчас показатель 3/10 по loading.express. 

Ответить
Развернуть ветку
Станислав Мешков
Автор

Спасибо за комментарии и информацию от сервиса loading.express. Мы используем для тестов результаты PageSpeed Insights.

1. Отложенная загрузка изображений реализована (кроме изображений в слайдере на главной странице, так как будет заметна их прогрузка при пролистывании).

2. Спасибо, что обратили внимание на server response times (TTFB), эти показатели отслеживаем, планируем перейти к решению после подключения WebP версии для изображений.

3. Подключение Cloudflare сейчас не в приоритете (в компании мы используем большое количество внутренних доменов для тестовых окружений), видим сложности изменения большого количества dns-записей. Для сжатия картинок в WebP планируем использовать Jetpack.

4. Спасибо за рекомендацию по подключению HTTP/2 Push.

5. Статика кэшируется: js/css - 1 год, изображения - 1 месяц.

6. Планируем сторонние коды вынести в GTM.

Ответить
Развернуть ветку
Victor

Обожаю компании, которые предлагают, что то сделать другим, а себе не могут

Ответить
Развернуть ветку
14 комментариев
Раскрывать всегда