Разработка сайта для системы мониторинга промышленного оборудования

Главное о кейсе

• Сроки разработки: 8 месяцев (октябрь 2018 - май 2019)
• Размер команды: 11 человек

Целью было сделать удобный и информативный сайт, на котором будет логично размещен весь клиентский контент. Что и получилось. Мы продолжаем вести сайт в рамках технической поддержки. Качество нашей работы клиенту понравилось, потому он перевел в WebCanape еще 2 своих проекта: для одного мы оказываем техническую поддержку, а для другого разрабатываем сайт.
___________________________________________

Goals and KPIs achieved

• Website development time: 8 months (October 2018 — May 2019)
• Team size: 11 people

The goal was to make a convenient and informative website, where all the client's content would be placed logically. That is what we did exactly. We continue to maintain the website as part of technical support. The client was content with the quality of our work. That is why he assigned us another 2 projects: technical support of his other website and development of a new website.

Бизнес-задача и ее решение

Даже самые грандиозные проекты начинаются с маленького шага. В работе над проектом «ПРАНА» таким маленьким шагом стал конкурс технопарка «Сколково» и компании «РОТЕК» по разработке логотипа для системы прогнозирования состояния промышленного оборудования «ПРАНА» в конце 2017 года. Несмотря на то, что в «Сколково» собрались преимущественно предприниматели в сфере ИТ, а не дизайна, организаторы конкурса все равно решили обратиться именно к ним. По их мнению, команды внутри экосистемы технопарка понимают суть современных технологий, среди которых predictive analytics, Big Data, Machine Learning, и смогут лучше других смогут визуализировать идею проекта «ПРАНА».

WebCanape — аккредитованный провайдер маркетинговых услуг в «Сколково». Мы приняли участие в конкурсе и победили со своей визуальной концепцией.

Успешное сотрудничество в рамках разработки логотипа показало, что нам можно доверить и более комплексные вещи. Потому компания «РОТЕК» также заказала у нас разработку сайта.

Разработка сайта

У «ПРАНЫ» уже был сайт, красивый и эффектный. Он даже стал победителем в номинации «Лучший одностраничный сайт/лэндинг» премии «Золотой сайт» в 2017 году. Единственная проблема была в том, что он не показывал клиентам сам продукт. Нужна была площадка, которая во всех подробностях расскажет о возможностях и принципах работы решения.

Целевая аудитория продукта — эксперты, им недостаточно показать выгоды от применения системы. Чтобы убедить их внедрить «ПРАНУ» на предприятии, нужно детально рассказать, как все работает, на основе чего строятся прогнозы, как достигается такая высокая точность прогнозов и для чего конкретно эти данные можно применять.

Цели и задачи нового сайта:
• Привлечение новых клиентов.
• Просвещение и обучение потенциальных клиентов — формирование рынка прогностики.
• Повышение лояльности текущих клиентов.
• Получение обратной связи о системе.
• Освоение дополнительных сегментов рынка.
• Вывод на рынок новых продуктов и услуг.
• Поддержание конкурентоспособности.
• Развитие бренда «ПРАНА».
• Информирование СМИ и профессионального сообщества о достижениях и успехах компании.
• Закрытие вакансий — привлечение профессиональных перспективных кадров.

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

Перед формированием ТЗ на разработку сайта мы проанализировали четырех самых сильных конкурентов продукта:
• GE Digital
https://www.ge.com/digital/
• Ansaldo Energia
https://www.ansaldoenergia.com/
• Siemens Plant Monitor https://www.energy.siemens.com/mx/en/automation/power-generation/
• Avantis PRiSM Schneider
https://www.schneider-electric.ru/ru/work/solutions/for-business/s4/electric-utilities-asset-management-and-predictive-analytics/

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

Слабые стороны: часто очень запутанная навигация, неочевидная схема сотрудничества, отсутствие точек коммуникации с посетителем (форм обратной связи, форм заявки, обратного звонка), редкое обновление информации, из-за чего вся информация на сайте кажется устаревшей.
На сайте «ПРАНА» необходимо было отразить удачные решения конкурентов и учесть их ошибки. Потому основные требования к оформлению и наполнению ресурса мы выдвинули следующие:
• Полная информация о системе и компании, рассчитанная на разные категории посетителей.
• Полная техническая документация на русском языке.
• Простая и понятная навигация.
• Четко обозначенные преимущества и ценности продукта для конечного потребителя.
• Единый графический образ всего сайта.
• Максимальное количество точек коммуникации посетитель-компания.
• Современный адаптивный дизайн.
• Разработка дизайна сайта
• После анализа конкурентов, составления профиля целевого пользователя, формирования структуры и коммуникационной концепции мы нарисовали дизайн-концепт.
• Предложили варианты в красном и синем.

Был утвержден более сдержанный макет главной. Также мы подготовили несколько внутренних страниц. Многие мы рисовали в зависимости от контента, который был у клиента и потребностей целевой аудитории конкретной страницы.

Разработка сайта на студийной CMS

Когда макеты главной и нескольких внутренних страниц утвердили, сайт запустили в производство. Большая часть наших проектов собирается на CMS нашей разработки — Canape CMS. Это решение отработано на 2000 сайтов, по нему есть развернутая документация, и создано оно было с прицелом на удобство поискового продвижения. Сначала клиент возражал против использования студийного движка, потому что “обжигался” с прежними подрядчиками: одни пропадали, другие закрывались, третьи сделали сайт на самописном движке, а сторонние разработчики не смогли разобраться в коде.

Боязнь клиента привязываться к одной студии, а именно так он воспринимал разработку сайта на студийной CMS, мы преодолели с помощью следующих аргументов:
• мы работаем более 10 лет и доказали свою жизнеспособность;
• на нашей CMS уже создано более 2000 сайтов — это обкатанный продукт, созданный с прицелом на удобство поискового продвижения;
• в течение года после сдачи проекта мы даем гарантию на сайт и обслуживаем запросы клиента в техподдержку в приоритетном порядке;
• у Canape CMS есть развернутая техническая документация, которая позволит работать с сайтом даже сторонним разработчикам.

Особенности реализации проекта

Запуск проекта в 2 этапа

На старте проекта, в октябре 2018 года, мы озвучили сроки запуска — конец марта 2019 года. Однако клиенту нужен был сайт к концу года, потому мы решили разбить разработку на две части:
• до Нового года — MVP;
• в марте — финальная версия.

Несмотря на то, что в финальную часть вошло больше страниц и больше доработок. первая версия, выложенная в конце декабря 2018 года, уже была полноценным сайтом. В ней мы просто охватили меньше сфер применения — отчасти потому что клиент не успевал предоставить контент, отчасти потому что из-за большого количества уникальных страниц мы не успевали сверстать все. Обычно делается уникальная главная страница и 1-3 шаблона для внутренних, здесь же число уникальных страниц приближалось к 15.

Например, для страницы “Архитектура системы” мы разработали три варианта визуализации.
Утвердили второй.
Полностью сайт со всеми доработками и страницами был сдан в мае 2019 года.

Параллельная работа итерациями

Сроки были сжатые, а объем работы большой, делалось много доработок “на ходу”. Чтобы сильно не затягивать проект, мы постарались сделать процессы максимально параллельными. Обычно мы сначала рисуем дизайн, потом верстаем, потом программируем. Но в случае с “ПРАНОЙ” все происходило одновременно.

Дизайнер нарисовал первые макеты, консультируясь с верстальщиком по реализации. После утверждения мы отдавали их на верстку и программирование, а дизайнер сразу приступал к следующему набору макетов.
Чтобы ускорить процесс верстки мы разделили объем работы и зоны ответственности между двумя верстальщиками: один верстал дизайн базовых модулей, а другой — функциональные доработки и внутренние страницы.
Параллельно с этим программист писал новые модули. Не мешать друг другу, верстальщики и программисты создавали отдельные ветки на площадке — по одной на каждый программный модуль. Суммарно их было около 15. Разработчики писали код в своих ветках, отдавали на тестирование и утверждение менеджеру проекта, а потом сливали их в одну. На финальном этапе тестировали сайт целиком.

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

Мультиязычность

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

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

Когда мы сдали вторую версию сайта, контент на русском был заполнен на 100 %, а на английском — на 40 %, потому что клиент ждал материалы от переводчиков.

Большие ожидания

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

Even the grandest projects begin with a single step. In our work on the PRANA project, this step was a competition to develop a logo for the PRANA industrial equipment diagnostics and predictive analytics system, arranged by the Skolkovo technopark and the ROTEC company at the end of 2017. Despite the fact that there are mainly IT entrepreneurs, rather than designers in Skolkovo, the competition organizers decided to address them for a reason. They believed that the teams within the technopark's ecosystem have a better understanding of the essence of modern technologies, including predictive analytics, big data, machine learning, and they will be able to render the idea of PRANA in a logo better than others.

WebCanape is an accredited marketing services provider at Skolkovo. We took part in the competition and our visual concept was announced the winner.

Successful cooperation during the development of the logo proved to the client that we can be trusted with more complex tasks. As a result, ROTEC ordered a website development at our company.

Website development

PRANA already had a website, which was beautiful and eye-catching. It even received the "Best one-page website/ landing page" award at the Golden Website 2017 contest. The only problem was that the website was poor at showcasing the product for the customers. We needed a platform that would display all the capabilities and operation principles of the solution in every detail.
One of the target audiences of the product is experts. Benefits of using the system are just a tiny part of information they need to make a decision. In order to convince them to implement PRANA to their enterprises, the website should describe in detail how everything works, which data the models are based on, by what means such high accuracy of forecasts is achieved and what these particular data should be applied for.

The goals and objectives of the new website:
1. Attract new customers.
2. Educate and teach potential customers — form a market for equipment prognosis.
3. Increase customer loyalty.
4. Get feedback about the system.
5. Tap additional market segments.
6. Launch new products and services to the market.
7. Maintain competitiveness.
8. Develop the brand PRANA.
9. Inform the media and the professional community about the achievements and advances of the company.
10. Close vacancies — attract professional promising human resources.

Competitors Analysis

Before preparing a technical assignment for website development, we studied the four strongest competitors of the product:
1. GE Digital
https://www.ge.com/digital/
2. Ansaldo Energia
https://www.ansaldoenergia.com/
3. Siemens Plant Monitor https://www.energy.siemens.com/mx/en/automation/power-generation/
4. Avantis PRiSM Schneider
https://www.schneider-electric.ru/ru/work/solutions/for-business/s4/electric-utilities-asset-management-and-predictive-analytics/

Among the main strengths that we identified in their websites there were large promo blocks, a complex structure, implementation examples/ case studies, well substantiated product value, modern responsive design.
There were also a number of weaknesses, including a very complicated navigation, a counter-intuitive cooperation scheme, a lack of user communication points (feedback forms, order forms, call back form), rare to no information updates, which make all information on the website look outdated.
All the above-mentioned competitors' strengths and mistakes were accounted for during the development of the website for PRANA.

We determined the following main requirements for the design and content of the website:
1. Complete information about the system and the company, aimed at different categories of visitors.
2. Complete technical documentation in Russian.
3. Simple and user-friendly navigation.
4. Clearly defined product benefits and value to the end user.
5. A single visual image throughout the entire website.
6. Maximum number of 'user-company' communication points.
7. Modern responsive design.

Website design development

After we studied the competition, compiled the target user's profile and developed the website's structure and communication concept, we got to develop a design concept.
We suggested two design options — the red one and the blue one.

The blue main page layout (a more restrained one) was approved. We also developed several design layouts for internal pages. The layouts of the most pages depended on the content the client wanted to publish and the needs of the target audience of a particular page.

Website development on our proprietary CMS

When the design layouts of the main and several internal pages were approved, the developers joined in. Most of our projects are made on our proprietary CMS — Canape CMS. This content management system has been proven on 2000 websites, there is a lot of documentation on it, and it was created with an eye to making it convenient for search engine optimization. At first, the client was opposed to us building the website on our proprietary CMS, because he had had a negative experience with the previous contractors: some disappeared, others ceased to exist, a couple created websites on an "ad-hoc" CMS and third-party developers could not figure out how to work with the code.
The client's fear of becoming dependent on one web-studio (this is exactly how he perceived the development of the website on a proprietary CMS) was dispelled by the following arguments:
• we have been in business for over 10 years and have proven our viability as a reliable digital-agency;
• over 2000 websites have already been built on our CMS, which means that this is a battle-tested product created with an eye to making search engine promotion easier;
• we provide a one-year guarantee on the website and prioritize the client's support requests during a year from the project delivery date;
• we provide extensive technical documentation for Canape CMS which makes it easier for third-party developers to work with a website built on Canape CMS.

Features of the project

Two-stage launch of the project

At the very start of the project, in October 2018, we told the client that we could launch the project at the end of March 2019. However, the client needed a website to be launched by the end of the year, so we decided to split the development process into two stages:
1. By the New Year — MVP launch
2. In March — launch of the final website version.

Despite the fact that the final stage consisted of more pages and more improvements, the MVP we published at the end of December 2018 was already a full-scale website. It just covers less areas of application of the product — in part because the client did not have the time to provide content and because we did not have the time to code all the unique web-pages. Usually we develop one unique main page and 1-3 templates for internal web-pages. However, the number of unique web-pages in this project was close to 15.

For example, we came up with three visualization options for the “System Architecture” page. The client approved the second one.

The entire website with all the modifications and web-pages was delivered in May 2019.

Parallel work by iterations

The deadlines were tight, and the scope of work was large, many improvements were made “on the go”. In order to avoid the project delays, we tried to run all processes as parallel as possible. Usually, we start with drawing a design, then code it, then program a website. But with PRANA we ran those processes simultaneously:
• Designer drew the first page layouts in close contact with our front-end developer. Upon approval the layouts were sent to front-end and back-end developers for further coding, while the designer immediately proceeded to the next set of pages.
• In order to speed up the front-end coding process, we divided the scope of work and the areas of responsibility between two front-end developers: one was in charge of the basic modules, and the other was accountable for the functional improvements and internal pages.
• At the same time the back-end developer wrote new modules. Front-end and back-end developers created separate branches on the test site — one for each program module — not to interfere with each other. In total, there were about 15 branches. The developers wrote the code in their branches, submitted the results for testing and approval to the project manager, and then merged everything together. At the final stage we tested the entire website.
• All team members, from the manager to the front-end developer, were aware of all the improvements and changes taking place in the project. In the course of project execution, we arranged several meetings, during which the project manager explained what needed to be done, team members selected the best solution and everyone proceeded to work.

Multilanguage interface

The client insisted that the website should have a full-fledged English version, containing all the information from the Russian version. It was clear to us that synchronous multilanguage interface would not work for this project, because the content in Russian is generated faster and often in larger amounts.
Therefore, we suggested that functional modules be duplicated in both languages with the possibility to publish content in different language versions of the website independently. With such an asynchronous multilanguage interface you can publish news, articles, web-pages dedicated to certain areas of application, certain equipment implementation projects without adding the same in the English version, and everything would work just fine.
The second version of the website was delivered with 100% of the Russian content published. There was only 40% of the English content though, because the client was still waiting for materials from translators.

High expectations

From the very beginning it was clear that the client pays a great deal of attention to the quality of customer service. The project manager and the director of WebCanape visited the client's office to discuss the solutions for the projects with the decision makers in person. The first page layouts were developed for free.
The client demanded that we proactively advise on what the site should look like, and expected that any non-technical corrections to be made within an hour. We coped with that well.

Прочая информация о кейсе

Компания «РОТЕК» — инжиниринговый и сервисный холдинг, среди сфер деятельности которого в том числе мониторинг состояния оборудования.
Компания разработала систему «ПРАНА» — IIoT-решение для диагностики и прогноза состояния промышленного оборудования, которое помогает повысить эффективность его работы и снизить эксплуатационные затраты.
Система анализирует данные о работе оборудования в исправном состоянии и строит его «цифровой портрет», выявляет нормальные уровни для различных показаний, находит между ними взаимосвязи, определяет тенденции и прочее. «ПРАНА» очень чувствительна и способна предсказывать неполадки за 2-3 месяца до их проявления. Такая прогностика способна предотвращать огромные убытки от поломок и простоя оборудования.
____________________________________________

JSC "ROTEC" (zaorotec.com) is a company specializing in the health prognosis and monitoring of industrial equipment (PRANA System), design, engineering and general contracting in the sphere of construction of energy and infrastructure facilities, development and production of high-quality honeycomb seals for the aviation industry and power engineering industry, highly efficient energy storage and accumulation systems based on supercapacitors, manufacturing, modernization and maintenance of basic energy equipment.
The company has developed and put into commercial operation the PRANA system, an industrial IoT solution for diagnosis and prognosis of the condition of industrial equipment to increase its efficiency and reduce operational costs.
The system analyses data on operation of equipment in good condition and creates its “digital portrait”, identifies normal values for various indicators, finds correlations between them, determines trends and more. PRANA is very sensitive and capable of predicting problems 2-3 months before they occur. This can help reduce costs of repairing equipment and idle time losses.

Текущая доступность работы

tagline.ru/cases/razrabotka-sayta-dlya-sistemy-monitoringa-promyshlennogo-oborudovaniya/

Скриншоты