Создание дизайна и разработка сайта для геофизической компании

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

В рамках поставленных перед нами задач совместно с командой разработчиков был создан новый современный дизайн для сайта.

В наши работы входили:

1. Сбор данных

2. SEO-оптимизация и прототипирование сайта

3. Дизайн сайта

4. Разработка ТЗ и верстка сайта

5. Программирование, наполнение и тестирование

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

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

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

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

SEO-сопровождение включает:

- анализ конкурентов;

- оценку структуры и рекомендации;

- тестирование на всех этапах;

- контроль переноса данных и создание карты редиректов;

- финальную проверку перед запуском.

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

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

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

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

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

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

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

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

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

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

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

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

Тестирование проводилось на каждом этапе, чтобы предоставить клиенту корректный результат. В процессе тестирования команда выявила около 70 недочетов, включая SEO, которые были устранены до проверки клиентом. Сайт также прошел тестирование Битрикса.

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

Плюсы

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

Мы получили:

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

- Получили корректные картинки в размер для всего сайта.

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

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

Минусы

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

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