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

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

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

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

Как было раньше

В уже существующем сайте заказчика не устраивало неудобство функционала и то, что он не приводил клиентов.

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

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

Решение

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

Сфокусироваться в разработке решили на трех разделах:

1. Страница “О компании”, которая призвана внушить доверие посетителям и убедить их в надежности нашего заказчика.

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

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

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

Проектирование

Разработку сайта вели на CMS Umbraco, которая позволит заказчику в дальнейшем самостоятельно добавлять и редактировать контент: тексты и иллюстрации.

Что мы учитывали при разработке:

• пожелание по соблюдению фирменных цветов GGC;
• особенности целевой аудитории: сдержанность и любовь к конкретике;
• задел на дальнейшее SEO-продвижение: мета-теги title, description, keywords;
• фокус сразу на двух продуктах — сертификатах и семинарах.

Прототип

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

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

На странице “Семинары” для удобства навигации создали две вкладки: “Корпоративные” и “Плановые”.

На странице “Сертификаты” отображается список всех доступных сертификатов. При нажатии на каждый из них можно прочитать подробную информацию.

Контент в этих разделах, а также в “Новостях”, шапке и подвале может быть отредактирован контент-менеджером.

Дизайн

Дизайн сайта выполнен в строгой и минималистичной стилистике, чтобы не отвлекать внимание пользователей на лишние элементы и позволить им сосредоточиться на сложной информации. Цветовая гамма соответствует фирменным цветам Global Group Companies — синему и оранжевому.

Для интерфейса и контента страниц при разработке мы задали один шрифт — Roboto.

Адаптивность

Корректная работа сайта гарантирована в браузерах:

• Chrome от версии 60 и выше.
• Яндекс от версии 16.11 и выше.
• Firefox от версии 53 и выше.
• IE от версии 11 и выше.
• Safari от версии 10.1 и выше.

У сайта отзывчивый дизайн, адаптированный под разные форматы:

1. 1440 пикселей для desktop.
2. 360 пикселей для mobile.

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

Детали

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

Кому и как поможет кейс

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