Анастасия Коновалова, руководитель коммерческого отдела интернет-агентства Медиасфера, рассказывает о работе с клиентами и разработке современных корпоративных сайтов.
Привет друзья!
Разработка сайта – сложный и длительный процесс, требующий много времени и усилий. Но результат того стоит: сайт становится лицом компании и инструментом общения с клиентами и партнерами. Оно должно быть удобным, функциональным и привлекательным. В этом примере я расскажу, как разрабатывался корпоративный сайт компании ОАО «Когалымнефтегеофизика», какие идеи были у клиента по дизайну и как мы получили имиджевый сайт.
Компания ОАО «Когалымнефтегеофизика» является одним из лидеров в сфере оказания геофизических услуг при строительстве и эксплуатации нефтяных и газовых скважин. К нам пришли с целью изменить текущий дизайн сайта компании на более современный дизайн и провести его редизайн для получения в конечном итоге имиджевого корпоративного сайта.
Главная страница сайта ОАО «Когалымнефтегеофизика» имеет новый дизайн
Старт проекта
Чтобы проект был успешным, необходимо иметь глубокое понимание того, что делает клиент и что ожидается от проекта. Для этого мы сформировали две команды: 4 человека со стороны заказчика, активно участвующие во всех согласованиях и согласованиях. Наша сторона: команда разработчиков, состоящая из менеджеров проектов, менеджеров по развитию, команды SEO, аналитиков веб-сайтов, дизайнеров, верстальщиков, программистов, тестировщиков и других членов команды.
Вначале мы организовали несколько длительных встреч, на которых наметили план и подробно объяснили, чего ожидать на каждом этапе простым языком. Для повышения эффективности мы создали эффективный чат в Telegram с ключевыми членами команды.
Исходя из технического задания клиента, основной упор должен быть сделан на визуализацию и обширную видеоанимацию на сайте. Это не совсем соответствует основной цели корпоративного веб-сайта, ориентированного на целевую аудиторию компаний этой отрасли.
Основная аудитория этого сайта — инженеры, поставщики, отделы закупок и тендеров. Поэтому самое главное – сделать сайт хорошо структурированным, логически правильным, удобным для поиска технической информации и конечно же имиджевым.
SEO-оптимизация и прототипирование сайта
Сегодня любой современный сайт неотделим от SEO-оптимизации. SEO-дизайн веб-сайта закладывает основу для правильно структурированных ресурсов как с точки зрения пользователя, так и с точки зрения поисковых систем. Последнее может обеспечить вам лидерство в поиске и целевой трафик за короткий период времени без необходимости серьезных модификаций.
SEO-поддержка на всех этапах проекта включает в себя:
- Анализ конкурентов;
- Анализ структуры готового продукта и предложения;
- этап разработки теста;
- Рекомендации и элементы управления местами передачи и сохранения данных, этапы карты перенаправления;
- Пусковой этап, финальная проверка.
Далее мы разработали интерактивный прототип сайта, в котором четко сформулировали структуру и распределение блоков на каждой странице с учетом функциональности и визуальной нагрузки конкретных элементов.
на встрече мы защитили каждый этап разработки, объяснив логику структуры и блоков. В первой версии списка ошибок мы получили около 50 комментариев, большинство из которых были связаны с контентом. Клиент изначально хотел, чтобы сайт был ярким и впечатляющим, и потребовал немедленной замены контента, до конца не осознавая, что это всего лишь скелет сайта.
Поскольку нам важно понимание наших клиентов, мы объяснили каждый пункт и перешли ко второй итерации списка ошибок. Только потом мы узнали, что в согласовании были невидимые участники: сотрудники разных отделов компании, например, тендерного отдела. Это усложняет работу, потому что между нашими командами существует эффект «глухого звонка», и нам приходится неоднократно говорить, на каком этапе нужно внести конкретные правки.
Вторая итерация принесла свои плоды: всего лишь с помощью нескольких замечаний мы успешно согласовали первый этап разработки сайта. Вот что мы получаем.
Прототип главной страницы
Прототип страницы «Наши услуги
У клиента нет четкой структуры и понимания блоков каждой страницы. Для нас также невозможно предоставить единую структуру для всех страниц сервиса. [1] Например, где разместить картинки или таблицы, или как называется блок, содержащий эти таблицы. В некоторых местах клиентам требуется множество функций и длинные страницы, в то время как в других местах по одному обслуживаются три блока на странице.
Мы разместили самую важную информацию – описание – оно есть во всех категориях вверху, а ниже есть индивидуально связанные блоки для каждой услуги; Доступные сейчас, вы сможете переименовывать и заполнять их в админ-панели в будущем.
Конечно, можно и не использовать этот метод, а сделать огромное текстовое поле, чтобы клиент мог ввести в него заголовок и вставить картинку прямо в текст, аналогично Word. Тогда веб-сайту будет сложно поддерживать все стили страниц, отступы, чтобы заголовки были одинаковыми на всех страницах, а изображения увеличивались/отображались. Такой подход нам не подходил, поэтому мы сделали так: по-прежнему сохраняя единство, на выходе получается прототип страницы «Категории».
Прототип страницы категории
Дизайн сайта
На мой взгляд, дизайн – это самый сложный этап во всей разработке сайта. У каждого члена обеих команд есть свое видение, чувство красоты и понимание того, как должен выглядеть дизайн. Вот тут-то и начинается кропотливая работа: найти решение, которое соответствует корпоративному стилю, нравится вашей целевой аудитории и клиентам, сохраняя при этом логику сайта.
После утверждения прототипа сайта мы приступили к разработке главной страницы. У нас есть референсы понравившихся нам сайтов, корпоративный имидж компании и общие пожелания клиента.
Мы разработали графический дизайн сайта, проработали различные состояния выпадающих меню, поведение кнопок, всплывающих окон и… Первая версия дизайна главной страницы не была принята нашей внутренней командой и была отклонена даже не показали клиенту. В этом преимущество наличия внутренних утверждений и проверок перед отправкой клиенту, поскольку мы хотим добиться наилучших результатов.
Мы начали с нуля и полностью переработали концепцию. Они пошли с ним на защиту.
Первая итерация дизайна главной страницы
Комментарии были минимальными; мы отрегулировали цветовые градиенты и расположение важных цифровых элементов. Мы столкнулись с теми же замечаниями, что и на этапе прототипирования — это последствия. Мы снова получили много комментариев по поводу содержания, но согласились заполнить весь сайт правильными материалами на более позднем этапе.
Клиент принял нашу версию практически без участия дизайнера, что стало идеальным завершением этапа утверждения дизайна домашней страницы. Продолжаем развивать дизайн внутренних страниц.
Дизайн главной страницы сайта
Для ускорения согласований мы разработали дизайн внутренних страниц по частям.
|
Часть 1 |
Часть 2 |
часть третья |
|
— Служить — Страница категории — О компании — Контактные данные — Центр новостей — информация |
— Профессия — Истории успеха — Успешные проекты — Подробные новости — 404 |
— Комментарий — Подробный обзор — оставить отзыв — Результаты поиска — Результаты поиска — Ничего не найдено — Заказать каталог — Взаимодействие с отделом закупок — Форма заявки — Прикрепленный заголовок — выпадающее меню |
Для каждой части внутренней разработки страницы мы делали 2 итерации редактирования. Комментариев было немного: лишь несколько по поводу визуальных эффектов, а те, что касались контента, были оставлены на более поздний срок по обоюдному согласию.
Дизайн страницы «Наши услуги
Дизайн страницы категории
Визуализированная иконка истории развития
В большинстве проектов внутреннее утверждение дизайна страницы проходит гладко, поскольку дизайн создается на основе согласованной домашней страницы. Вот что произошло с этим проектом: мы прошли этот этап довольно гладко и пошли дальше.
Разработка ТЗ и верстка сайта
Перед этапом планировки объекта подготавливаются технические спецификации для дальнейших этапов разработки. В этом документе описываются общая структура, графический дизайн и функциональные требования проекта. Клиенту важно, чтобы все было описано максимально подробно и простым языком, поскольку согласование проходит через множество отделов. Для удобства и взаимопонимания мы провели несколько встреч, чтобы утвердить документ и после достижения соглашения перейти непосредственно к макетированию.
Мы также частично разложили проект, чтобы быстрее получить одобрение: начали с главной страницы и прошлись по отдельным страницам.
Хотя технические характеристики были согласованы, разногласия с заказчиком возникли практически сразу на этапе компоновки. Он ожидал большего количества эффектов и анимации. Наша команда же стремится к минимализму.
Некоторые люди беспокоятся, что, когда сайт покинет корпоративный имиджевый сайт, он станет развлекательным сайтом. Поэтому мы ищем компромиссные решения: в ходе обсуждения какие-то идеи заказчика рассматриваются, какие-то адаптируются, какие-то отвергаются. В конце концов, наша философия – работать вместе как партнеры, а не просто как исполнители «двумя руками.
Следующим камнем преткновения стала карта. Лишь в процессе разметки становится очевидным, что над ней следует обозначить другие области. Мне пришлось сделать шаг назад, спроектировать и внести коррективы.
визуализировать карту
Кроме того, клиенты не хотят масштабировать изображения независимо для разных устройств. Решением стал слайдер, в который можно было загружать изображения 8 размеров для разных типов устройств. Таким образом достигается согласованность на всех устройствах.
Вот так, шаг за шагом мы согласовали макет сайта, приступили к программированию и наполнению.
Программирование, наполнение и тестирование
Программирование продвигалось довольно быстро, поскольку мы подробно описали и согласовали все предыдущие этапы и технические характеристики. Ошибка была обнаружена на этапе тестирования.
Клиенту также необходима английская версия сайта. Поскольку в прототипе кнопка была скрыта и английская версия не была в приоритете, было решено выделить ее в отдельный этап. Изначально не планировалось его запускать. Так как объем информации довольно большой, мы сделали ее отдельной версией сайта, чтобы снизить нагрузку на основной сайт.
Проект тестируется на каждом этапе, чтобы клиент получил на утверждение наиболее правильный этап работы. Конечно, есть и финальная проверка работоспособности всей разработки.
На этапе тестирования команда обнаружила около 70 недостатков, включая SEO. Ошибки были исправлены до того, как клиенты протестировали сайт. Дополнительно сайт прошел тестирование Битрикс.
Я остановлюсь исключительно на этапах наполнения сайта. Думаю, как многие из вас знают, правильно заполнить каждый раздел всех страниц вашего сайта – непростая задача.
Даже на ранних этапах клиенты начали отправлять контент в рабочие чаты небольшими порциями. Все материалы неструктурированы и противоречивы. Чтобы избавиться от этой путаницы, мы придумали таблицу, в которой указана постраничная структура сайта, и впоследствии на основе этой таблицы подготовили контент. Клиенту предоставляются все требования: размер и вес изображений, количество и назначение текстовой информации.
Пока мы разрабатывали техническое задание, верстку и программирование сайта, клиент подготовил все материалы для каждого раздела каждой страницы, включая заголовки для каждого изображения. Итак, к моменту заполнения мы имеем полный список страниц, ссылки на архивы с подписанными изображениями и видео. В результате мы заполнили около 150 страниц сайта.
Заполните документы сайта
Кроме того, заказчик также подготовил фотографии всего руководства. Они изготавливаются в едином фирменном стиле по нашему техническому заданию.
Иметь готовые к заполнению фотографии
Результат проекта
Плюсы
внимательная и отзывчивая команда заказчика: в этом проекте мы по-настоящему работали как партнеры. Общение было хорошим, и клиент выслушал наши предложения и возражения. Он коллективно решал все вопросы, связанные с согласованием, начиная от этапа подготовки, технического задания, детализации всего вроде видео, гифок, анимации, всплывающих окон и т д., и заканчивая передачей проекта и утверждением контента. Со стороны заказчика в каждом отделе есть ответственные сотрудники, которые координируют отдельные этапы.
Мы получили:
- Работа была четко организована по списку ошибок в Google Doc, и обе команды все заполнили правильно.
- Мы получили изображения правильного размера для всего сайта.
- Мы организовали работу по подготовке контента индивидуально под наши требования, что в конечном итоге облегчило наполнение сайта.
- Даже учитывая длительные сроки согласования со стороны клиента, проект был выполнен в срок благодаря параллельной работе на этапе проектирования.
Минусы
Утверждения клиентов часто задерживаются, поскольку в утверждениях участвуют несколько отделов компании. Однако нам удалось решить эту проблему за счет руководителей клиентских проектов.
В нашем случае мы столкнулись с ошибкой в админке: не все поля сразу подобрались корректно. Оказывается контент-менеджер заполнен, но поля не отображаются. Это оказалось в нашем внутреннем списке ошибок, что немного замедлило проект с нашей стороны, но ничего серьезного. Мы принимаем решение путем тестирования нашей внутренней команды.
Фишки
- В ходе проекта были придуманы и согласованы на многих страницах сайта анимационные строки.
анимированные линии
- Разделен на три раздела отзывов: «Отзывы о компании», «Отзывы об услугах» и «Отзывы гостей». Пользователи могут оставлять комментарии и ставить любые оценки; комментарии публикуются посредством модерации.
- Справа мы сделали графический опрос для расчета NPS после рассмотрения и рассмотрения. Формула NPS = (количество рекомендателей (9-10 баллов) / количество респондентов — количество недовольных (1-6 баллов) / количество респонденты)) * 100 %.
Комментарий
- Мы сделали ротацию цифр в разделе о компании (часто такая история). Клиент просил добавить анимацию по номеру ниже, но это приводит к перегрузке страницы. Нам удалось донести до клиента нашу позицию о том, что такое большое количество анимации будет отвлекать от основного контента, и клиент с этим согласился.
Поворот чисел
- Значок истории компании может менять цвет в системе управления. Изначально при загрузке в админку иконка не имеет цвета, а на сайте становится синей или серой.
Значок истории компании
После всех работ сайт стал свежим, имиджевым, современным, отвечает всем требованиям SEO и, самое главное, удобен для целевой аудитории.
Особая благодарность команде клиента, которая всегда была на связи, открыта к диалогу и глубоко вовлечена во весь процесс.
