+7 (3452) 692 329

16 Май 2018

Корпоративный сайт Тюменской сервисной геофизической компании

Компания предоставляет услуги по выполнению сейсморазведочных работ на рынке ХМАО для нужд недропользователей. Штаб-квартира в Тюмени, 4 полевых сейсморазведочных партии, за 10 лет работы проведено: 5640 + кв. км 3D работ, 6530 пог. км 2D работ

Аннотация

О чем этот кейс.

В кейсе описано, как мы создали корпоративный сайт для компании «ТСГК», с какими трудностями столкнулись и как их решили.

Работа была начата в августе 2017 года и по состоянию на май 2018 еще продолжается.

Почему полезно прочитать этот кейс:

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

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

Содержание

Кейс состоит из следующих разделов:

  1. О компании «ТСГК»
  2. Цели и задачи проекта
  3. Что мы сделали, с какими трудностями столкнулись и как их решили
  4. Результаты
  5. Команда проекта

О компании «ТСГК»

Компания «ТСГК» занимается проведением полевых сейсморазведочных работ по методике 2D/3D с 2008 года. Компания выполнила 5640 кв.км полевых сейсморазведочных работ по методике 3D, 6530 погонных км полевых сейсморазведочных работ по методике 2D, 500 000 физических наблюдений по методикам 2D и 3D. Общая численность компании - 377 человек. Клиенты компании - нефте- и газодобывающие компании Тюменской области, ХМАО, ЯНАО.

Цели и задачи проекта

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

По итогам первой встречи мы определили цели работы и получили внутреннее исследование компании (SWOT-анализ).

Перед нами поставили цель - создание корпоративного сайта. Компания хотела:

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

Особенностями проекта стали:

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

Что мы сделали, с какими трудностями столкнулись и как их решили

Работу над проектом мы начали с интервью представителей компании.

С руководством обсуждали 3 вопроса:

  • услуги компании;
  • клиентов;
  • конкурентов.

По окончанию интервью у нас появилось понимание того, почему покупают текущий продукт, по каким критериям. Кто покупает и как выбирают. Кто присутствует на рынке геофизических услуг и чем компания «ТСГК» отличается от них. Мы получили от ТСГК материалы по стратегическому развитию компании для последующего изучения.

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

  1. Изучили целевую аудиторию и ее потребности.
  2. Затем изучили продукт компании.
  3. После этого изучили прямых конкурентов.

После подготовки мы приступили к веб-разработке:

  1. Разработали структуру сайта.
  2. Разработали прототип и концепцию.
  3. Разработали дизайн.
  4. Разработали front-end и back-end.

1. Выполнили маркетинговый анализ

Изучили целевую аудиторию

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

Целевая аудитория сайта - недропользователи (Газпром, Лукойл, Роснефть и т.д.). В первую очередь они оценивают сайт в сравнении со своими. Поэтому разрабатываемый сайт должен быть привычным и удобным для них.

Выбор подрядчика происходит на основе тендера. При выборе особое внимание уделяется опыту проведения работ на похожих участках, качеству получаемого материала, цене и оснащенности сейсмопартии. Эти критерии выбора необходимо выделить на сайте.

Изучили продукт

В ходе интервью с представителями компании и при последующем анализе мы выделили преимущества компании:

  1. Высокое качество материала за счет применения бескабельного оборудования, нескольких этапов предобработки в полевых условиях и контроле качества каждого этапа работ.
  2. Оперативность принятия решений - штат компании небольшой (общая численность 377 человек, из них всего 11 человек в управляющей подсистеме), поэтому стратегические решения принимаются очень быстро. В сейсморазведке каждый день простоя партии приводит к невыполнению плана, поэтому данный фактор очень важен.
  3. 21 наименование оборудования (14 - сейсмооборудование, 6 - геодезическое оборудование).
  4. 9 видов транспорта и спецтехники.

Изучили конкурентов

Сайты конкурентов на одно лицо - «привет из 90-х». Везде однотипная структура и минимум полезной информации. Анализировали сайты как российских, так и зарубежных компаний. Изучив сайты конкурентов, мы не узнали ничего полезного.

2. Создали корпоративный сайт

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

Старая версия сайта ТСГК.png Старая версия сайта ТСГК

Мы решили:

  • оптимизировать структуру сайта;
  • создать новые гайдлайны для формирования контента (рекомендации по размещению контента);
  • обновить визуальную концепцию - новый дизайн сайта.

Разработали структуру сайта

Структура сайта ТСГК.jpg Структура сайт Тюменской сервисной геофизической компании

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

В навигации выделены первостепенные разделы, которые рассказывают пользователю о деятельности компании, и дополнительные.

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

Разделы: новости, фото и видео сформированы в единый раздел «Пресс-центр», позволяющий получить всю медиа и прессрелизную информацию о компании.

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

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

Разработали прототип и концепцию

Разрабатывая концепт и прототипы, мы опирались на современные тренды:

  • сторителлинг;
  • микровзаимодейтвия;
  • типографика.




Сторителлинг
Сторителлинг на примере промо-сайта iPhone 7.jpg Сторителлинг на примере промо-сайта iPhone 7

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

Сайт-история сильнее вступает в общение с пользователем, нежели «просто сайт», где сухо перечисляют преимущества продукта - это позволяет увеличить вовлеченность пользователя и добиться 100% досмотра страницы. Данную концепцию мы применили на странице «О компании», одной из ключевых страниц на сайте.




Микровзаимодействия
Микровзаимодействия на примере сайта компании «Металлоинвест».jpg Микровзаимодействия на примере сайта компании «Металлоинвест»

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




Типографика
Пример типографики.jpg Пример типографики

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




Концепция и прототипы

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

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

Основные концептуальные элементы на сайте:

  1. Навигация сайта
  2. Навигация на всех страницах сайта состоит из трех основных инструментов:

    • Общая навигация.
    • Основные пункты меню в шапке видны сразу, второстепенные открываются по клику на кнопку «еще».

    • Дополнительная навигация.
    • Если в разделе есть подразделы, то страницы подразделов выводятся в дополнительной навигации. Активный пункт подсвечивается, поэтому на любой странице легко сориентироваться.

    • Якорная навигация.
    • Якорная навигация служит для быстрого перемещения и поиска нужной информации на длинных страницах. Например страница с оборудованием или «О компании».

      Навигация на сайте ТСГК.png Навигация на сайте ТСГК

  3. Фул-пейдж
  4. Левая часть страницы, содержащая навигацию, фиксируется при скроле и занимает всю ширину экрана.

    Фул-пейдж на примере страницы «О компании».png Фул-пейдж на примере страницы «О компании»
  5. Pop-up окна
  6. Все детальные описания появляются в виде всплывающего окна с правой стороны, которое занимает половину пространства на большом экране, на планшетах и мобильных устройствах - всю ширину экрана. Это позволяет быстро получать нужную подробную информацию, не переходя на отдельную страницу с детальным описанием. Пример с pop-up окнами можно посмотреть на странице «Оборудование».

    Pop-up окна на примере страницы «Оборудование».png Pop-up окна на примере страницы «Оборудование»
  7. Адаптивность
  8. Все страницы легко адаптируются под ключевые размеры экранов, без потери целевой информации и сохраняют простоту навигации.

    Прототип планшетной и мобильной версии сайта ТСГК.png Прототип планшетной и мобильной версии сайта ТСГК

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

Чтобы понять уже на этапе прототипов, как пользователь будет взаимодействовать с сайтом «вживую», мы записали видео презентации работы некоторых страниц сайта:

Главная

Переход между страницами

Скролл внутри страницы / Поп-ап окна

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

После согласования прототипов мы внесли некоторые правки в дизайн-макеты. Подобрали цветовую гамму: фоновые и акцентные цвета.

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

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

Дизайн-макеты сайта ТСГК.png Дизайн-макеты сайта ТСГК
Мобильная версия ТСГК 1.png
Мобильная версия сайта ТСГК.png Мобильная версия сайта ТСГК

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

Смотрите, что получилось.

Прототипы и дизайн разрабатывали в Sketch. Интерактивные дизайн макеты создавали в Invision, а анимацию и видео записывали в Principle.

Разработали front-end и back-end

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

Мобильная версия сайта ТСГК.png Страница «Проекты»

Для верстки мы использовали: сетку Gridlex, методологию именования классов БЭМ, Flexbox, GRID Layout, SCSS, Webpack, таск-менеджер GULP.

В качестве «движка» была использована CMS 1С-Битрикс. Большинство контента на сайте меняется через визуальный редактор Битрикс - очень удобно, не нужно заходить даже в «админку»!

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

Калькулятор стоимости услуг.png Калькулятор стоимости услуг

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

Англоязычная версия сайта ТСГК.png Англоязычная версия сайта ТСГК

Результаты

Обещали:

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

  • Калькулятор расчета стоимости услуг;
  • Обновленный дизайн и пользовательские сценарии;
  • Мобильная версия;
  • Интерактивная карта реализованных проектов;
  • Разделы для проведения тендеров и поиска сотрудников.

Сделали:

Создали корпоративный сайт, внедрили калькулятор расчета стоимости услуг компании. Дизайн сайта реализовали в соответствии с современными трендами. Запустили мобильную версию сайта. Разработали интерактивную карту реализованных проектов компании. Учли обязательные требования сферы по проведению тендеров и поиска сотрудников на сайте. Провели обучение специалистов использованию сайта.

Проверка оптимизации для мобильных сайта ТСГК.png Проверка оптимизации для мобильных сайта ТСГК

Команда проекта

Команда Legacy:

  1. Руководитель проекта;
  2. Веб-аналитик;
  3. UX-проектировщик;
  4. Веб-дизайнер;
  5. Технический директор;
  6. Front-end разработчик.
  7. Back-end разработчик.

Команда ТСГК:

  1. Генеральный директор;
  2. Главный инженер;
  3. Главный геофизик;
  4. Заместитель главного инженера по материально-техническому обеспечению;
  5. Руководитель IT-отдела;
  6. Системный администратор.

Хотите так же?

Чтобы начать разговор, звоните по телефону +7 (3452) 692 329 или пишите на e-mail sales@legacystudio.ru или оставьте заявку здесь: https://legacystudio.ru/order/ Мы отвечаем по будним дням с 09:00 до 18:00.

Приходите в гости по адресу г. Тюмень, ул. Республики, 143 к1, офис 808 : расскажем, как мы делаем проекты, покажем примеры работ.

Забронируем для вас бесплатную гостевую парковку за шлагбаумом, для этого сообщите нам госномер и марку автомобиля. Или подберите бесплатную парковку в 5-7 минутах ходьбы на этой карте.

Построить маршрут в объезд пробок можно на Яндекс.Картах.



Заявка на подготовку предложения