Сайт по европейским стандартам для Navis Engineering
Сайт по европейским стандартам для Navis Engineering
Сделали крепкий корпоративный сайт международного уровня. И заодно узнали, почему яхтами так легко рулить.
Предисловие
Этот кейс пылился на полке с 2016 года. Всё было отрисовано, сверстано, запрограммировано. Не хватало одной малости: реального контента. Друзья, мы еще раз настойчиво говорим, пишем и орём во все орала: контент — всему башка. Начинайте его иметь как можно раньше.
Этот кейс пылился на полке с 2016 года. Всё было отрисовано, сверстано, запрограммировано. Не хватало одной малости: реального контента. Друзья, мы еще раз настойчиво говорим, пишем и орём во все орала: контент — всему башка. Начинайте его иметь как можно раньше.
24 года назад в Санкт-Петербурге четыре учёных основали компанию Navis Engineering. В 1993 году они сделали навигационный тренажёр (лучший по сей день, кстати) — и понеслось. Сегодня в компании разрабатывают системы для управления движением судна, которые позволяют рулить им, грубо говоря, как машиной. Без подобных систем крутые яхты и круизные лайнеры могут только грустно и бесполезно дрейфовать к бережку. Такими разработками в мире занимаются всего 8-10 компаний.
Задачи
Navis Engineering вышли на международный рынок в 1999 году и прекрасно себя чувствуют там. Головной офис компании находится в Финляндии, клиенты живут на всех континентах. Поэтому основная часть пользователей сайта — англоговорящая аудитория, привыкшая к западным стандартам веба. И заказчик обратился к нам для редизайна устаревшего сайта, чтобы в итоге получить работу мирового уровня.
Перед нами стояли задачи:
Перед нами стояли задачи:
- сделать чистый и приятный корпоративный сайт, ориентированный на западного пользователя;
- просто и красиво рассказать о компании и продукции;
- увеличить количество заявок, поданных онлайн.
Аналитика
Navis Engineering — заказчик с нестандартным предложением. Как его подать и, главное, кому — без аналитики не разобраться.
Для меня как аналитика проект оказался очень интересный. Сначала подумала, что компания просто специализируется на оборудовании для яхт и прочих судов, но оказалось, все сложнее. Navis Engineering — одни из немногих в мире, кто производит системы динамического позиционирования. Более того, они обучают работе с ними. Чтобы понять боли и проблемы операторов систем динамического позиционирования (а это одна из ключевых групп пользователей), мне пришлось изучить около 50 страниц форумов, где пользователи обсуждали курсы, делились мнением и своими опасениями.
Дарья
QA-менеджер
Мы выяснили стейкхолдеров, нашли их боли, определились с целями сайта, сделали прототипы основных страниц и только потом приступили к дизайну.
Дизайн
У Navis Engineering толковый брендбук, и заказчик хорошо работал с мудбордом — поэтому процесс дизайна прошёл гладко. Главная страница была принята с минимальными правками.
На визуальном брифе стало понятно, что заказчику нравится современный, ориентированный на контент дизайн: большие качественные фотки и минимум текста. После первой демонстрации макета мы только немного поменяли логотип и показали продукцию более няшно — в остальном дизайн зашёл сразу.
На сайте теперь строгость, чёткость и морская дисциплина.
На сайте теперь строгость, чёткость и морская дисциплина.
Евгений
Арт-директор
Шоурил, собранный для первого демо. Сейчас на сайте проигрывается видео заказчика.
Сайтам, которые на 90% делает контент, грозит тлен и загибание, если заказчик откладывает его поиск на «когда-нибудь потом». С Navis Engineering нам очень повезло — фотографии, которые были на старом сайте, сразу вписались в нашу концепцию. И для сбора нового контента заказчик нашёл время и силы: собрал с клиентов недостающие снимки и даже видео для главной страницы.
Но хватит хвалебных од заказчику, вернёмся к фичам сайта. Следующий яркий блок на главной — таймлайн с историей компании. Ключевые события на нём отмечены кораблями, которые мягко качаются на волнах и уплывают, если вы переключаете слайд.
Но хватит хвалебных од заказчику, вернёмся к фичам сайта. Следующий яркий блок на главной — таймлайн с историей компании. Ключевые события на нём отмечены кораблями, которые мягко качаются на волнах и уплывают, если вы переключаете слайд.
Яхты, лайнеры и рабочие лодки лейтмотивом проплывают по сайту. Они в таймлайне, футере, на стыке блоков — делают приятнее базовые элементы.
И, несмотря на прохладную серьёзность всего сайта, нам разрешили пошалить на одной странице — конечно, на 404-ой.
На 404 хотелось сделать что-то забавное и немножко залипательное. Так появились мини-игра с якорем, падающим в самые глубины океана, и нетерпеливая черепаха.
Вообще все внутренние страницы было приятно делать — заказчик одобрял хорошие красивые решения, что очень радовало.
Вообще все внутренние страницы было приятно делать — заказчик одобрял хорошие красивые решения, что очень радовало.
Юлия
Дизайнер
Черепашка вежливо интересуется, есть ли сиги почему тормозим
Разработка
Чтобы удобно структурировать продукцию, пришлось коллективно помедитировать. Уже на этапе аналитики стало понятно, что здесь есть над чем подумать.
Одной из ключевых проблем при разработке структуры был разный метод поиска пользователем информации. Одни ищут сначала оборудование, а затем выбирают тип судна. Другие же, наоборот, сначала тип судна, а уже потом оборудование.
Дарья
QA-менеджер
Сначала планировалось создать два раздела: в одном сделать выбор по продукту, а в другом — по судну. Но вариант показался сомнительным, потому что тогда информация в разделах дублировалась бы. Поэтому мы предложили заказчику уместить все в одном разделе, решив проблему за счет переключателя.
В итоге попасть на детальную страницу продукта можно двумя способами:
1) Выбрать тип судна, а затем продукт.
2) Выбрать продукт, а затем тип судна.
1) Выбрать тип судна, а затем продукт.
2) Выбрать продукт, а затем тип судна.
Дмитрий
Разработчик
А ещё текстовые страницы на сайте — не то, чем кажутся. На самом деле они — детальные карточки товаров.
Карточки товаров на сайте большие, имеют подразделы и все выглядят по-разному.
Чтобы не мучить контент-менеджера свойствами типа «Текст до слайдера»/ «Текст после слайдера»/ «Текст после большого блока», мы придумали конструктор детальной страницы товара. Реализован он на штатных средствах Битрикса с помощью свойства типа text/html (в нем визуальный редактор) и набора заранее подготовленных сниппетов.
Сниппеты имеют вид типа #SLIDER#, #LIST#, #ADVANTAGES# и при генерации страницы меняются на заранее подготовленный html блок, куда подставляются данные из свойств товара. Тем самым мы решили 3 проблемы:
1) Избавили контент-менеджера от миллиона непонятных блоков для текста.
2) Обеспечили гибкую настройку карточки товара, возможность сделать её уникальной среди всего каталога.
3) Позволили контент-менеджеру вставлять сложный html блок без опасения, что верстка страницы развалится.
Чтобы не мучить контент-менеджера свойствами типа «Текст до слайдера»/ «Текст после слайдера»/ «Текст после большого блока», мы придумали конструктор детальной страницы товара. Реализован он на штатных средствах Битрикса с помощью свойства типа text/html (в нем визуальный редактор) и набора заранее подготовленных сниппетов.
Сниппеты имеют вид типа #SLIDER#, #LIST#, #ADVANTAGES# и при генерации страницы меняются на заранее подготовленный html блок, куда подставляются данные из свойств товара. Тем самым мы решили 3 проблемы:
1) Избавили контент-менеджера от миллиона непонятных блоков для текста.
2) Обеспечили гибкую настройку карточки товара, возможность сделать её уникальной среди всего каталога.
3) Позволили контент-менеджеру вставлять сложный html блок без опасения, что верстка страницы развалится.
Евгений
Разработчик
В итоге у нас получился приятный корпоративный сайт в западном стиле, который заказчик может продолжать самостоятельно в текстовых страницах. Появился яркий и залипательный таймлайн — теперь о достижениях компании узнают все, а не только редкие залётные посетители странички «О нас». И стала чёткой и удобной для всех пользователей структура поиска продукции — поиск и отправка заявок стали легче.
Готовый сайт