De WordPress a Webflow: así es como Hologram modernizó su sitio web

El internet de las cosas, o IoT, abarca la multitud de dispositivos que se conectan a redes celulares y Wi-Fi para enviar datos importantes. Las bicicletas eléctricas son un ejemplo de esta tecnología: dependen de una forma estable de cargar quién las alquila y dónde se encuentran. Otros dispositivos IoT, como los monitores cardíacos Holter, transmiten información sobre la salud de una persona a un sistema donde se recopila y analiza. Diversas empresas dependen de una forma fiable de mantenerse conectadas y transmitir datos desde dispositivos IoT.

Aquí es donde entra Hologram. Ofrecen una red celular global para diversas industrias, de modo que los dispositivos de las empresas tengan una conexión fiable sin importar dónde se encuentren.

Hace poco hablamos con Sean Nelson, diseñador de producto sénior en Hologram, sobre cómo cambiaron de WordPress a Webflow para el rediseño del sitio web de Hologram.

Webflow permitió un desarrollo web más rápido

Sean lleva diseñando el tiempo suficiente como para que crear un sitio web desde cero con HTML y estilos CSS avanzados le resulte algo natural. Incluso para diseñadores de alto nivel como Sean, Webflow es una herramienta valiosa para agilizar el proceso de diseño.

«Creo que a todos nos impresionó lo rápido que fue construir, diseñar y desplegar el sitio».

— Sean Nelson

En 90 días, Hologram pasó de un sitio de WordPress hecho a retazos a un diseño moderno, apoyándose en gran medida en la funcionalidad integrada de Webflow para lograrlo.

Dónde empezaron

Como cualquier startup, Hologram se centró inicialmente en el desarrollo de productos. Durante sus primeros días, un sitio web no era precisamente su máxima prioridad.

La versión original era una amalgama de WordPress y JavaScript al estilo de una máquina de Rube Goldberg. Funcionaba bien para aquel entonces, pero la empresa había crecido. Sus estrategias de marketing estaban cambiando. Necesitaban un nuevo diseño web que reflejara hacia dónde se dirigían.

«Nuestro sitio de marketing estaba anteriormente en un estado muy extraño. Era un front-end hecho a parches y nadie entendía muy bien por qué se había construido así».

— Sean Nelson

Hologram había avanzado mucho desde sus humildes comienzos. Necesitaban dar otro paso necesario, y ese era renovar por completo su sitio web.

Una nueva estrategia de marketing

Los primeros esfuerzos de marketing de Hologram estaban dirigidos a los creadores. Los hackers de Arduino y otros entusiastas de la electrónica DIY fueron el público inicial de sus tarjetas SIM globales.

Pero, como cualquier empresa que ha ganado impulso, llegaron al punto en que necesitaban llevar sus productos a una audiencia mayor. Esto requería una forma diferente de comunicarse y comercializarse. En lugar de cortejar a los aficionados a la electrónica, Hologram cambió su enfoque hacia empresas más grandes.

Para las empresas que operan a mayor escala, el precio es la información más importante que necesitan conocer.

«Creo que una de las cosas que aprendimos fue hacer esto lo más transparente posible, pero también lo más predecible posible».

— Sean Nelson

Al construir su nuevo sitio web, las páginas de precios fueron las primeras que abordaron. Sean y su equipo aprovecharon muchas de las funciones integradas de Webflow para agilizar su flujo de trabajo y sacaron partido de la capacidad de Webflow para integrar código personalizado.

Webflow democratizó el proceso de diseño de Hologram

“Como nuestra empresa es tan colaborativa, era importante usar una herramienta que fuera fácil de actualizar para cualquiera, ya sea un diseñador creando una nueva página de destino sobre la marcha o un gestor de éxito del cliente actualizando contenido en el CMS”.

— Amy Schwartz, directora creativa en Hologram

Con esta nueva dirección, Hologram llegó al punto en que necesitaba una organización más formal. Sean y otros tres diseñadores se unieron a la vicepresidenta de marketing Lynette Grinter, al vicepresidente de ingresos Derrick Wolbert, al vicepresidente de diseño Q Carlson y a la directora creativa Amy Schwartz para formar un equipo de marketing oficial.

Webflow facilita que cualquiera pueda entrar y realizar los cambios necesarios. Para Sean y el resto del departamento de marketing, esto ayudó a acelerar el proceso de diseño.

“Cualquiera puede iniciar sesión en el sitio y en el editor, hacer un par de ajustes en el texto o modificar los precios de la página, publicarlo y listo”.

— Sean Nelson

Las páginas de precios de Hologram se comunican con claridad

El sitio web de Hologram ofrece dos categorías de precios — una para Datos Flexibles y otra para Datos de Alto Volumen. Sean y su equipo usaron Webflow para construir este diseño y emplearon las interacciones de Webflow para crear la banda de ecualización debajo de cada plan. Esta representación gráfica simboliza el nivel de ancho de banda que cubre cada estructura de precios. Vemos al instante, sin necesidad de leer el texto, en qué se diferencian. Esto encaja a la perfección con la misión de Sean y su equipo de hacer que sus precios sean lo más transparentes posible.

Echemos un vistazo a la página de precios de Datos Flexibles de arriba. El número de dispositivos que necesita una empresa es el factor más importante en esta categoría de precios.

Sean y los miembros de su equipo crearon este práctico control deslizante de precios a la derecha completamente con código personalizado. Esta microinteracción permite a los usuarios ajustar sus necesidades según el número de dispositivos. Es un elemento brillante que simplifica la forma en que se presenta esta información. Todos los demás detalles esenciales están ahí en la página, como la activación sin costo y precios uniformes sin importar el país. No hay duda de lo que obtiene una empresa al registrarse.

Este control deslizante interactivo demuestra cómo los precios dependen del número de dispositivos que una empresa tiene conectados. Al mover el control deslizante al límite a la derecha, a más de 10,000, aparece una llamada a la acción para contactar al equipo de ventas de Hologram, junto con un poco de texto explicativo. Para este tipo de clientes de alto volumen que pueden requerir precios personalizados, es importante que hablen con alguien en Hologram. Esta llamada a la acción hace que esta información sea visible de inmediato en lugar de quedar enterrada en otra parte del diseño.

La categoría de precios de Datos de Alto Volumen, como su nombre indica, se basa en las necesidades de datos del cliente. Vemos este mismo compromiso con la transparencia, con todos los planes de precios explicados y presentados en pantalla.

Ambas páginas de precios se crearon con la funcionalidad estándar de Webflow, añadiendo código personalizado para adornos como el control deslizante de precios de datos flexibles. Estas páginas de precios son excelentes ejemplos del tipo de sitios web que puedes crear con Webflow y su adaptabilidad para añadir tu propio código.

El diseño modernizado de Hologram comunica toda la información importante

El resto del diseño ofrece una mirada profunda a cómo funciona la plataforma de conectividad global de Hologram. Un texto directo detalla la funcionalidad. Vemos capturas de pantalla de gráficos de límites de datos. A través de elementos visuales y texto, Hologram muestra todo lo que un cliente potencial en el ámbito B2B necesitaría saber.

Junto con los aspectos más prácticos del diseño, una serie de elementos visuales animados salpican el conjunto, evitando que se sienta rígido o anticuado.

Webflow funciona para cualquier nivel de diseñador

El diseño inteligente y estilizado de Hologram demuestra que Webflow no te encierra en plantillas aburridas ni te mantiene prisionero de elementos de diseño propietarios. Permite un diseño totalmente personalizado, haciendo posible cualquier idea creativa que tengas.

Cualquiera, desde principiantes hasta diseñadores expertos —como nos ha demostrado Sean—, encontrará en Webflow las herramientas necesarias para dar vida a sus diseños.