AFINA agency
webflow

WordPress в Webflow

Узнайте, почему Hologram решила перейти с WordPress на Webflow, чтобы изменить дизайн своего веб-сайта и масштабировать свои маркетинговые усилия.
перевод webflow.com/blog/wordpress-to-webflow-hologram-case-study
Шон Нельсон, старший дизайнер продуктов в Hologram, взял их старый сложный веб-сайт WordPress и перестроил его с помощью Webflow. Он рассказывает нам, почему это было необходимо и насколько это важно для их процесса проектирования.
Интернет вещей, или IoT, включает в себя множество устройств, которые подключаются к сотовым сетям и Wi-Fi и отправляют важные данные. Электронные велосипеды являются примером этой технологии - они полагаются на стабильный способ загрузки данных о том, кто их арендует, а также где они находятся. Другие устройства IoT, такие как кардиомониторы Холтера, передают информацию о чьем-либо здоровье в систему, где она собирается и анализируется. Многие компании полагаются на надежный способ оставаться на связи и передавать данные с устройств Интернета вещей.
Здесь на помощь приходит Hologram. Они обеспечивают глобальную сотовую сеть для различных отраслей, так что устройства компаний будут иметь надежную связь независимо от того, где они находятся.

Недавно мы поговорили с Шоном Нельсоном, старшим дизайнером продуктов в Hologram, о том, как они перешли с WordPress на Webflow для редизайна своего веб-сайта Hologram.

Webflow для быстрой веб-разработки

Шон занимается дизайном достаточно долго, поэтому создание веб-сайта с нуля с помощью HTML и продвинутых стилей CSS стало его второй натурой. Даже для таких высококлассных дизайнеров, как Шон, Webflow является ценным инструментом для ускорения процесса проектирования.
«Я думаю, что всех очень впечатлило то, насколько быстро было построено, спроектировано и развернуто»
Шон Нельсон
В течение 90 дней Hologram превратился из созданного сайта WordPress в современный дизайн, в значительной степени опираясь на встроенные функции Webflow.

Где они начали

Как и любой стартап, Hologram изначально был ориентирован на разработку продукта. В первые дни своего существования веб-сайт не находился на вершине списка приоритетов.

Первоначальная итерация представляла собой объединение WordPress и JavaScript. В то время это работало хорошо, но компания выросла. Их маркетинговые стратегии менялись. Им нужен был новый веб-дизайн, который отражал бы их направление.
«Наш маркетинговый сайт раньше находился в очень странном состоянии. Это был составной интерфейс, и никто не понимал, почему он был построен таким образом»
Шон Нельсон
Им нужно было сделать еще один необходимый шаг вперед - полностью пересмотреть свой веб-сайт.

Новая маркетинговая стратегия

Первые маркетинговые усилия Hologram были нацелены на производителей. Хакеры Arduino и другие энтузиасты электроники DIY.

Но, как и любая другая компания, которая набрала обороты, они подошли к тому моменту, когда им нужно было представить свои продукты более широкой аудитории. Это потребовало другого способа общения и маркетинга самих себя.
Для предприятий, работающих в таких крупных масштабах, цены - самая важная информация, которую им необходимо знать.
«Я думаю, что мы научились делать это как можно более прозрачным, но также и максимально предсказуемым»
Шон Нельсон
При создании своего нового веб-сайта в первую очередь они взялись за страницы с ценами. Шон и его команда воспользовались многими встроенными функциями Webflow, чтобы ускорить рабочий процесс, и воспользовались возможностью Webflow по интеграции пользовательского кода.

Webflow демократизировал процесс разработки

Шон и три других дизайнера объединились с вице-президентом по маркетингу Линетт Гринтер, вице-президентом по доходам Дерриком Вольбертом, вице-президентом по дизайну Q Carlson и Эми Шварц, креативным директором, чтобы сформировать маркетинговую команду.
«Поскольку наша компания поддерживает тесное сотрудничество, было важно, чтобы мы использовали инструмент, который было легко обновлять для всех - будь то дизайнер, создающий новую целевую страницу на лету, или менеджер по работе с клиентами, обновляющий контент в CMS»
Эми Шварц, креативный директор Hologram
Webflow позволяет любому легко войти и внести необходимые изменения. Для Шона и остального отдела маркетинга это помогло ускорить процесс проектирования.
«Любой может войти на сайт и в редактор и просто внести пару изменений в копию или скорректировать цены на странице, опубликовать ее, и все готово»
Шон Нельсон

Страницы с ценами четко передают информацию

Веб-сайт Hologram предлагает две категории цен: одну для гибких данных, а другую для больших объемов данных. Шон и его команда использовали Webflow для создания этого макета и использовали взаимодействия Webflow для создания полосы эквалайзера под каждым планом. Это графическое представление символизирует уровень пропускной способности каждой структуры ценообразования. Мы сразу видим, даже не читая текста, чем они отличаются. Это очень хорошо согласуется с миссией Шона и его команды - сделать их ценообразование максимально прозрачными.
Давайте посмотрим на страницу с ценами на гибкие данные выше. Количество устройств, необходимых компании, является наиболее важным фактором в этой ценовой категории.

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

Этот интерактивный слайдер демонстрирует, как цены зависят от количества устройств, имеющихся у компании в сети. Перемещение ползунка вправо до 10 000+ отображает призыв к действию для связи с отделом продаж голограммы с небольшим пояснительным текстом. Для таких крупных клиентов, которым могут потребоваться специальные цены, важно, чтобы они поговорили с кем-нибудь в Hologram. Этот призыв к действию выводит эту информацию немедленно, а не закапывает ее где-нибудь в макете.
Категория цен на большие объемы данных - как следует из названия - основана на потребностях клиента. Мы видим то же стремление к прозрачности, когда все тарифные планы объясняются и отображаются на экране.

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

Модернизированный дизайн передает всю важную информацию

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

Webflow работает для дизайнера любого уровня

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

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

Заказать no code разработку

После уточнения деталей мы можем приступить к вашему проекту
Made on
Tilda