Сайт группы компаний Elecard

Компания Elecard является ведущим поставщиком компонентов и программных продуктов для кодирования, декодирования, анализа, обработки и передачи цифровых видео- и аудиоданных. Уже в 2000 году Elecard стал одним из основных игроков на данном рынке с кодеком MPEG-2. Сегодня компания разрабатывает программное обеспечение и технологические решения, применяемые в космических системах наблюдения, системах наземного, кабельного и спутникового телевещания, системах обеспечения безопасности, в компьютерах, смартфонах, планшетах, домашних мультимедийных центрах. Продукты Elecard известны и востребованы на мировом рынке. Компания сотрудничает со многими мировыми технологическими лидерами: Samsung, Siemens, Intel, Netflix, Huawei, Cisco, Walt Disney и другими.

История проекта

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

Поддержкой старого сайта в разное время занимались как компании, так и сотрудники заказчика, имеющие различные подходы к разработке, квалификацию, уровень знания «движка» сайта (сайт функционировал на одной из первых версий системы ModX). Многие изменения в сайт были внесены без учета требований к масштабируемости и расширяемости, в результате чего стало практически невозможным обновление ядра системы. Возникающие на старом сайте проблемы нельзя было решить «по простому» и «по быстрому», в том числе потому что сайт глубоко интегрирован с различными внутренними и внешними информационными системами — HelpDesk, CRM, различными агрегаторами, сервисами рассылок.

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

Выбор поставщика

Elecard несколько раз на протяжении нескольких лет приступал к разработке нового сайта, как самостоятельно, так и с привлечением сторонних компаний. С возможными исполнителями руководство и менеджеры Elecard встречались лично. Рассматривались кандидаты из различных городов, в т. ч. из «столиц». По разным причинам ни одна из этих попыток не увенчалась успехом.

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

В результате переговоров и проведенной аналитики, выбор разработчика нового сайта был сделан в пользу Студии 15.

Почему в итоге выбрали нас?

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

Заказчик позитивно оценил наш опыт доведения проектов до сдачи в самых сложных организационных ситуациях.

В какой-то момент мы с клиентом поняли, что имеем общий взгляд на позиционирование компании Elecard в интернете.

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

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

Главная страница

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

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

Лендинг звездного продукта

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

Визуальная идентификация продуктов

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

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

Организация кода благоприятная для масштабирования

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

Разработка проводилась в тесном сотрудничестве с техническими специалистами заказчика.

Адаптивность

Информационная архитектура и интерфейс сайта изначально строились из расчета работы на мобильных устройствах. В результате, при разработке  функциональность полноэкранной версии сайта была в полном объеме сохранена на мобильных устройствах.

Сайтом удобно пользоваться на планшете и на смартфоне. Для мобильных устройств проработаны области нажатия («тапа») и доступность контента.

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

Шаблон обычного продукта

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

Процесс покупки продукта

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

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

Процесс покупки продукта


"Прежде всего хотелось бы отметить подход к работе. Перед началом работ специалисты студии разобрались в бизнес-процессах компании, узнали о наших продуктах. И при разработке полученная от нас информация использовалась для оптимизации пользовательского опыта на страницах, а также производилась привязка бэкенда сайта к текущим бизнес-процессам компании. Гибкий подход к разработке позволил оперативно вносить изменения в концепцию нового сайта (что неизбежно при разработке такого уровня).

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

Елена Широкова, Marketing Director, Elecard company

Плюсануть
Поделиться

Корпоративный сайт со сложной линейкой продуктов и высоким порогом входа в предметную область.