Корпоративный веб-сайт для глобальной GCT CRO
GCT – глобальная контрактно-исследовательская организация, оказывающая услуги по организации клинических исследований для фармацевтических компаний. Компания работает более 20 лет и представлена более чем в 10 странах мира.
О проекте
Основной целью проекта стало обновление корпоративного веб-сайта компании, приуроченное к 20-летнему юбилею. На старте проекта мы оценили возможные риски от простого редизайна страниц: сложности с объединением различных элементов фирменного стиля, непрозрачная логика sitemap, различия версий CMS, возможная потеря части подключенных интеграций и виджетов - поэтому предложили разработку с нуля.
В результате команда ArticMedia поэтапно разработала концепцию, структуру и логику, прототипы и дизайн будущего сайта, и затем выполнила необходимые настройки и интеграции для подключения к gctrials.com
Для этого в ходе проекта специалистами разных отделов ArticMedia были проанализированы конкуренты, переработана карта сайта, сформирована главная страница, для каждой страницы было проработано несколько версий прототипов и вариантов дизайна, в том числе для мобильной версии.
Конкурентная разведка
Компания GCT занимается очень узконаправленной деятельностью, поэтому на первом этапе мы попытались понять, на какие аспекты делают ставку конкуренты.
Для построения структуры будущего сайта мы сфокусировались на анализе и разработке схемы главной страницы, которая отражает ключевые разделы вложенных страниц. Мы подготовили отчет с различными вариантами структуры и дизайна, идеи легли в основу разработки прототипа главной страницы.
Оказалось, что ключевыми разделами, которые интересны потенциальным клиентам являются: сервисы, опыт и географическая представленность.
Главная страница
Главная страница выполнена в виде вертикального лендинга с перечислением ключевых разделов вебсайта. Мы подготовили несколько вариантов первого экрана.
Изначально планировалась классическая модель с видео, но так как основной ресурс компании – люди, а не объекты, то в финальной версии решено убрать видео, чтобы не отвлекать внимание пользователя. Вместо этого мы наполнили изображениями сотрудников компании и подняли в приоритете раздел «Блог», чтобы показать динамическое развитие компании и самые свежие новости из корпоративной жизни.
Получилось, что из-за довольного большого количества экранов и насыщенного меню в шапке сайта, пользователям было сложно ориентироваться, поэтому мы добавили дополнительное якорное меню справа - быстрые подразделы главной страницы.
На главной странице минимум текста для того, чтобы передать краткое содержание о компании и ее возможностях, далее с более подробной информацией можно ознакомиться на внутренних страницах.
Карта сайта
Структура старого сайта дополнялась по мере необходимости, поэтому была нарушена логика уровней страниц, а некоторые типовые страницы отсутствовали.
В режиме mindmap совместно с клиентом мы сгенерировали все возможные элементы для новой структуры.
Далее, для каждой ветки были собраны страницы второго и третьего уровней и описаны схемы взаимодействия и переходов.
Прототипы
Одним из самых продолжительных и насыщенных этапов в этом проекте стало прототипирование. Несколько месяцев мы последовательно готовили варианты прототипов для каждой уникальной страницы, конфигурировали элементы и обсуждали дальнейший интерактив.
Дизайн сайта
Лаконичный и корпоративный дизайн с небольшим количеством базовых цветов (белый, синий, черный) и их оттенков дополняется вставками из контрастного ярко-оранжевого цвета для фокусировки внимания и выделения отдельных элементов.
Мы добавили несколько авторских дизайнерских элементов, чтобы выделить сайт среди шаблонных решений конкурентов. Были разработаны авторские иконки для ключевых фактов о компании, макет для ключевых преимуществ.
Основной опыт компании распределяется между различными терапевтическими областями и заболеваниями. Мы разнообразили стандартный плиточный формат с текстом точечным изображением человека, чтобы подчеркнуть инновационность деятельности компании и повсеместный опыт для здоровья людей. Схемы работы и взаимодействия между участниками проектов были переработаны и унифицированы в единый дизайн.
Переработаны формы обратной связи: упрощены визуально с помощью минималистичного дизайна, ключевых полей и кнопок. Добавлена фильтрация по блокам вопросов.
Навигация
Структура в карте сайта предполагает многочисленное количество страниц, что необходимо проработать в дизайне для улучшения пользовательского опыта (UX). Для представления элементов верхнего уровня мы использовали классического многоуровневое горизонтальное меню. На некоторых внутренних страницах сайта внедрена система якорного меню.
Страницы с большим количеством однотипных элементов, например Services или Country page, сжали в размерах за счет модульного упорядочивания. На странице Coverage доступен региональный фильтр офисов через подменю.
Меню и подменю собираются автоматически на основе контента страницы, заданного через админ-панель CMS.
Для отображения событий из истории компании мы разработали и внедрили таймлайн с обратной хронологией отображения элементов. С помощью разных цветов, иконок и анимаций визуально разделены элементы с активной ссылкой и обычные карточки.
Международное присутствие
Если пользователь хочет более подробную информацию, то сначала он может ознакомиться визуально с геоохватом на карте мира, которая реализована с помощью интерактивного и кликабельного виджета карты. Сотрудники могут добавлять или убирать необходимые страны через интерфейс CMS без дополнительных навыков кодинга, а пользователь может перейти на страницу интересующей страны прямо из карты.
Далее, для каждой страны предлагается карточка в плитке с краткой информацией об офисе, его локации и изображении. Мы также продублировали этот раздел на странице контакты, чтобы пользователь не переключался между страницами.
Контент об особенностях страны сфокусирован на аспектах клинических исследований. Мы использовали различные формы для удобства чтения и акцентах на ключевых фактах: инфографика, фото и изображения, виджет Google Maps, внешние ссылки, формы обратной связи.
Программа мероприятий
На сайте реализовано динамическое отображение различных мероприятий с автоматической сортировкой в хронологическом порядке. Также можно отфильтровать по актуальным и прошедшим, чтобы скрыть лишние элементы.
Страница мероприятия содержит текст о событии, изображения, форму обратной связи с возможностью забронировать встречу с участником и его контакты.
Кроме функции поделиться, мы добавили возможность сохранять информацию о событии сразу в календарь (Outlook, Google Calendar, Apple).
Блог, новости
Блог компании содержит важные пресс-релизы и новости, а также повседневные обновления и посты.
На главной странице представлена выборка из самых последних элементов блога. Важные новости выделены крупнее, чтобы привлекать внимание пользователя.
Мы развернули платформу для управления блогом и публикациями с удобной сортировкой по важности и хронологии.
На странице новости предусмотрены размещение графики, текста, ссылок и возможность поделиться публикацией в социальных сетях и на других ресурсах.
Контакты
На странице с контактами было решено развернуть контакт- центр, который бы учитывал запросы различных категорий пользователей и давал возможность мультиканальной коммуникации с компанией.
Мы переработали структуру внутри раздела и добавили быстрые ссылки на отдельные страницы для заказчиков (фарм. компаний), исследовательских центров, соискателей (карьера).
Для связи доступны формы обратной связи, электронная почта, Linkedin, телефоны, виджет чата amoCRM.
Для общих вопросов или для тех, кто не захочет заполнять формы, мы оставили классический блок контактов с указанием ключевых сотрудников отдела развития бизнеса.
Интеграции
Кроме перечисленных выше технических решений вебсайт дополнен виджетами и сервисами сбора веб-аналитики.
Для маркетинговых целей подключена возможность подписаться на ежемесячную рассылку компании через Mailchimp.
Основной язык в индустрии – английский, но для региональных пользователей добавлена возможность полуавтоматического перевода на некоторые приоритетные языки.
Компания GCT работает в различных регионах и попадает под действие местных законов и норм. Например, для соответствия всем правилам сбора персональных данных (GDPR, HIPPA) добавлен сервис cookie policy.
Мобильная версия
Вебсайт выполнен с адаптивным дизайном под различные мобильные устройства. При прототипировании мы отдельно обсуждали и улучшали отображение сложных графических и текстовых элементов под небольшие экраны.
Следующий кейс
