АО «РОТЕК» — известная и очень крупная компания. Работа с таким заказчиком — интересный опыт для любого подрядчика, а еще это почетно.
В этом кейсе мы расскажем, как разработав логотип для продукта «Ротек», мы получили контракт на разработку мультиязычного сайта.
ПРАНА: начало
Даже самые грандиозные проекты начинаются с маленького шага. В работе с «РОТЕК» им стал конкурс этой компании и технопарка «Сколково» по разработке логотипа для системы прогнозирования состояния промышленного оборудования «ПРАНА» в конце 2017 года.
«ПРАНА» — IIoT-решение для диагностики и прогноза состояния промышленного оборудования, которое помогает повысить эффективность его работы и снизить эксплуатационные затраты. Название образовано от словосочетания «прогностическая аналитика» и не имеет ничего общего с аювердой. Хотя, конечно, можно провести много аналогий.
Система анализирует данные о работе оборудования в исправном состоянии и строит его «цифровой портрет», выявляет нормальные уровни для различных показаний, находит между ними взаимосвязи, определяет тенденции и прочее. «ПРАНА» очень чувствительна и способна предсказывать неполадки за 2-3 месяца до их проявления. Такая прогностика способна предотвращать огромные убытки от поломок и простоя оборудования.
Несмотря на то, что в «Сколково» собрались преимущественно предприниматели в сфере ИТ, а не дизайнеры, организаторы конкурса все равно решили обратиться именно к ним. По их мнению, команды внутри экосистемы технопарка глубже понимают суть современных технологий, среди которых predictive analytics, Big Data, Machine Learning, и смогут лучше других смогут визуализировать идею проекта «ПРАНА».
WebCanape — аккредитованный провайдер маркетинговых услуг в «Сколково». Мы приняли участие в конкурсе и победили со своей визуальной концепцией.
Поработав с нами в рамках разработки логотипа, в «РОТЕК» поняли, что нам можно доверить и более комплексные вещи, потому заказали у нас и сайт для продукта.
Визуальная концепция «ПРАНА»
Логотип «ПРАНА»
Зачем было переделывать сайт?
У «ПРАНЫ» уже был сайт, красивый и эффектный. Этот сайт даже стал победителем в номинации «Лучший одностраничный сайт/лэндинг» премии «Золотой сайт» в 2017 году. Только он не работал. То есть работал, конечно, но не приносил того эффекта, ради которого его создавали. Единственная проблема была в том, что он не показывал клиентам сам продукт. Нужна была площадка, которая во всех подробностях расскажет о возможностях и принципах работы решения.
Старый сайт системы «ПРАНА»
Старый сайт системы «ПРАНА»
Одна из целевых аудиторий продукта — эксперты, им недостаточно показать выгоды от применения системы. Чтобы убедить их внедрить «ПРАНУ» на предприятии, нужно детально рассказать, как все работает, на основе чего строятся модели, как достигается такая высокая точность прогнозов и для чего конкретно эти данные можно применять.
Задачи нового сайта:
- Привлекать новых клиентов.
- Просвещать и обучать потенциальных клиентов — формировать рынок прогностики.
- Повышать лояльность текущих клиентов.
- Получать обратную связь о системе.
- Осваивать дополнительные сегменты рынка.
- Вывести на рынок новые продукты и услуги.
- Поддерживать конкурентоспособность.
- Развивать бренд «ПРАНА»
- Информировать СМИ и профессиональное сообщество о достижениях и успехах компании.
- Закрывать вакансии — привлекать профессиональные перспективные кадры.
А что там у конкурентов?
Перед формированием ТЗ на разработку сайта мы проанализировали четырех самых сильных конкурентов продукта:
Говорят, что если хочешь быть лучшим, нужно учиться у лучших. Потому мы отметили для себя самые сильные элементы на сайтах конкурентов: крупные промоблоки, развернутая структура разделов, примеры внедрения/кейсы, аргументированные ценности продукта, современный адаптивный дизайн.
Также отметили и точки роста на этих сайтах (то есть те места, по которым мы можем их обойти): часто очень запутанная навигация, неочевидная схема сотрудничества, отсутствие точек коммуникации с посетителем (форм обратной связи, форм заявки, обратного звонка), редкое обновление информации, из-за чего вся информация на сайте кажется устаревшей.
На основе всего этого мы сформулировали 7 главных требований к будущему сайту «ПРАНА»:
- Полная информация о системе и компании, рассчитанная на разные категории посетителей.
- Полная техническая документация на русском языке.
- Простая и понятная навигация.
- Четко обозначенные преимущества и ценности продукта для конечного потребителя.
- Единый графический образ всего сайта.
- Максимальное количество точек коммуникации посетитель-компания.
- Современный адаптивный дизайн.
Концепция дизайна
После анализа конкурентов, составления профиля целевого пользователя, формирования структуры и коммуникационной концепции мы нарисовали дизайн-концепт.
Предложили варианты в красном и синем.
Утвердили более сдержанный макет главной. Еще мы подготовили несколько внутренних страниц. Многие рисовали в зависимости от контента, который был у клиента и потребностей целевой аудитории конкретной страницы.
Страница решений для энергетической отрасли
Разработка сайта на студийном движке
Когда макеты главной и нескольких внутренних страниц утвердили, сайт запустили в производство. Большая часть наших проектов собирается на CMS нашей разработки — Canape CMS. Это решение отработано на 2000 сайтов, по нему есть развернутая документация, и создано оно было с прицелом на удобство поискового продвижения. Кроме этого, в течение года после сдачи проекта мы даем гарантию на сайт и обслуживаем запросы клиента в техподдержку в приоритетном.
Сначала клиент возражал против использования студийного движка, потому что «обжигался» с прежними подрядчиками: одни пропадали, другие закрывались, третьи сделали сайт на самописном движке, а потом сторонние разработчики не смогли разобраться в коде. Но выслушав наши аргументы, клиент согласился на студийный движок.
Особенности реализации: двухэтапный запуск сайта и асинхронная мультиязычность
Запуск проекта выполнялся в 2 этапа
На старте проекта, в октябре 2018 года, мы озвучили сроки запуска — конец марта 2019 года. Однако клиенту нужен был сайт к концу года, потому мы решили разбить разработку на две части:
- до Нового года — MVP;
- в марте — финальная версия.
Несмотря на то, что в финальную часть вошло больше страниц и больше доработок. первая версия, выложенная в конце декабря 2018 года, уже была полноценным сайтом. В ней мы просто охватили меньше сфер применения — отчасти потому что клиент не успевал предоставить контент, отчасти потому что из-за большого количества уникальных страниц мы не успевали сверстать все. Обычно делается уникальная главная страница и 1-3 шаблона для внутренних, здесь же число уникальных страниц приближалось к 15.
Например, для страницы «Архитектура системы» мы разработали три варианта визуализации. Утвердили второй.
Полностью сайт со всеми доработками и страницами был сдан в мае 2019 года.
Параллельная работа итерациями
Сроки были сжатые, а объем работы большой, делалось много доработок «на ходу». Чтобы сильно не затягивать проект, мы постарались сделать процессы максимально параллельными. Обычно мы сначала рисуем дизайн, потом верстаем, потом программируем. Но в случае с «ПРАНОЙ» все происходило одновременно:
- Дизайнер нарисовал первые макеты, консультируясь с верстальщиком по реализации. После утверждения мы отдавали их на верстку и программирование, а дизайнер сразу приступал к следующему набору макетов.
- Чтобы ускорить процесс верстки мы разделили объем работы и зоны ответственности между двумя верстальщиками: один верстал дизайн базовых модулей, а другой — функциональные доработки и внутренние страницы.
- Параллельно с этим программист писал новые модули. Не мешать друг другу, верстальщики и программисты создавали отдельные ветки на площадке — по одной на каждый программный модуль. Суммарно их было около 15. Разработчики писали код в своих ветках, отдавали на тестирование и утверждение менеджеру проекта, а потом сливали их в одну. На финальном этапе тестировали сайт целиком.
- Все члены команды, начиная с менеджера и заканчивая верстальщиком, были в курсе всех доработок и изменений на проекте. В ходе работы над проектом мы собирались несколько раз, менеджер проекта презентовал, что требуется реализовать, члены команды выбирали оптимальное решение и все отправлялись работать.
Мультиязычность
Клиент настаивал, что на сайте нужна полноценная английская ветка, полностью дублирующая информацию из русской версии сайта. Мы понимали, что синхронная мультиязычность не подходит для данного проекта, потому что контент на русском все равно появляется быстрее и его часто бывает больше.
Потому мы предложили иное решение — продублировать функциональные модули на обоих языках, но предусмотреть возможность заведения контента в языковых ветках независимо друг от друга, не склеивая ветки на разных языках. С такой асинхронной мультиязычностью на сайте можно создать в русской версии новость, статью, страницу для сферы применения, страницу для объекта внедрения оборудования, пока не добавляя перевод на английский, и все будет работать.
Когда мы сдали вторую версию сайта, контент на русском был заполнен на 100 %, а на английском — на 40 %, потому что клиент ждал материалы от переводчиков.
Большие ожидания
С самого начала было понятно, что в этом проекте качество клиентского сервиса играет очень важную роль. Менеджер проекта и директор WebCanape встречались с заказчиком в его офисе, лично обсуждали решения по проекту. Первые макеты страниц были сделаны бесплатно.
Клиент требовал от нас проактивности, советов и рекомендаций относительно того, каким должен быть сайт, и ожидал, что любые исправления, которые не требуют технического вмешательства, должны быть внесены на сайт в течение часа. С этими задачами мы справились.
Что получилось
В результате был разработан удобный и информативный сайт prana-system.com, на котором логично размещен весь клиентский контент.
Срок разработки сайта: 8 месяцев (октябрь 2018 — май 2019).
Размер команды: 11 человек.
Мы продолжаем вести сайт в рамках технической поддержки. Качество нашей работы клиенту понравилось, потому он перевел в WebCanape еще 2 своих проекта: для одного мы оказываем техническую поддержку, а для другого разрабатываем сайт.
Источник: https://vc.ru/
