En 2019, codirigí el proyecto para migrar el sitio web de marketing de Getaround del desarrollo tradicional a Webflow. La migración fue un gran éxito, ya que no solo desbloqueó mejores métricas web, sino también una agilidad sin precedentes para nuestro equipo.
Esta publicación se basa en la charla que di en la No Code Conf 2019. Echa un vistazo a la charla completa aquí:
Para quienes prefieran leer, sigan adelante para profundizar en cómo vender e implementar Webflow en su equipo.
El sitio de marketing de Getaround antes de Webflow: recursos limitados, demasiadas prioridades
Antes de migrar a Webflow, nuestras páginas de marketing se programaban de la forma tradicional y dependían de ingeniería. Así que, cada vez que queríamos hacer un cambio en nuestra página de inicio, nos enfrentábamos a prioridades de producto en conflicto y a la lucha por conseguir valiosos recursos de ingeniería.
A medida que Getaround crecía rápidamente, también lo hacían nuestros objetivos web, que incluían:
- Aumentar el tráfico de búsqueda orgánica
- Convertir a más usuarios que nunca
- Expandir nuestra marca en evolución hacia nuestra presencia en línea
Al mismo tiempo, el rápido crecimiento significaba que nuestro producto también necesitaba escalar y evolucionar.
Hacer que nuestro producto fuera increíble era, lógicamente, la máxima prioridad para nuestro equipo de ingeniería. Como resultado, las actualizaciones de marketing y diseño de nuestro sitio web quedaron en segundo plano. Así que, en 2018, nos encontramos con un sitio web que se veía y funcionaba... muy parecido a un sitio web de 2011.
Migramos a Webflow para cambiar eso. Veamos cómo tu equipo puede hacer lo mismo.
5 pasos para recuperar tu sitio web
Recuperar tu sitio web de marketing con Webflow requiere estrategia, y tuvimos mucho éxito con estos 5 pasos:
- Consigue el visto bueno
- Reúne a tu equipo
- Selecciona las páginas
- Diseña y desarrolla
- Promociona el lanzamiento
1. Consigue el apoyo de las partes interesadas clave "entrando poco a poco"
Si tu equipo o empresa nunca ha oído hablar de Webflow —o duda de su solidez o eficacia—, dedica algo de tiempo a la formación y a las demostraciones. Aprovecha la naturaleza visual de Webflow para mostrar lo que puede hacer, en lugar de confiar solo en las palabras.
Considera grabar tu pantalla mientras creas una página pequeña en Webflow y usa esa grabación para demostrar lo rápido y fácil que puede ser. Utiliza esa página de Webflow para impresionar a las partes interesadas con demostraciones en vivo de las funciones que más beneficiarán a tu equipo, ya sea la edición rápida de textos e imágenes con el Editor o la creación de contenido con el CMS.
Además de tu proyecto de demostración, comparte casos de éxito y anécdotas de otras empresas que se pasaron a Webflow; puntos extra si encuentras un testimonio de un equipo con un tamaño y unos objetivos similares a los tuyos. Las partes interesadas son más propensas a apostar por una herramienta que ya ha sido probada, así que realiza tu propia prueba además de obtener la validación de las experiencias de otros equipos.
Algunas historias de éxito de Webflow para inspirarte:
- Caso de estudio de MURAL (migrado desde código personalizado)
- Caso de estudio de Rakuten (migrado desde WordPress)
- Caso de estudio de Lattice (migrado desde un CMS headless)
Con suerte, esto te dará luz verde para comenzar una prueba piloto de la herramienta utilizando páginas web de menor riesgo. Piensa en qué páginas tienen (relativamente) poco impacto para tu empresa: evita la página de inicio o cualquier motor principal de conversiones u otras métricas clave.
En Getaround, empezamos a usar Webflow para páginas de destino más pequeñas, como promociones y asociaciones locales.
Esta entrada gradual sirve como prueba de concepto para Webflow, exponiendo a las partes interesadas clave a sus capacidades (y sus limitaciones) sin la presión de afectar masivamente métricas cruciales como los registros o las conversiones.
Durante tu prueba piloto, muestra las funciones relevantes a las partes interesadas adecuadas para entusiasmarlas con las capacidades de Webflow.
- Muestra a los ingenieros lo limpio y semántico que es el código exportado de Webflow
- Explora a fondo las Colecciones con los creadores y gestores de contenido para mostrarles cómo pueden crear, gestionar y ampliar sus propias estructuras de contenido personalizadas
- Muestra a los redactores lo fácil que pueden editar el contenido de una página a través del Editor
- Haz que los diseñadores jueguen con las Interacciones o creen elementos de página de forma rápida y fluida en el Diseñador
Usa esta fase de prueba para demostrar tus afirmaciones y que tu equipo pueda pasar a migrar lo más importante a Webflow. En Getaround, nuestras afirmaciones incluían lo siguiente:
- Tiempos de producción más rápidos
- Menor necesidad de personal
- Métricas de rendimiento empresarial iguales o mejores, como la tasa de conversión
- Mejor rendimiento de búsqueda
La incursión en Getaround fue un éxito. Nuestro pequeño equipo de 2 personas sin conocimientos de programación creó y lanzó páginas web totalmente funcionales en pocos días. No afectamos las conversiones y, tras el lanzamiento inicial, realizamos más iteraciones en una semana de las que habíamos hecho en años. También pudimos iterar en SEO, lo que resultó en un mejor tráfico de búsqueda orgánica.
A estas alturas, las partes interesadas ya confiaban en los beneficios de Webflow tanto para nuestro equipo como para nuestras métricas web, lo que nos despejó el camino para continuar con la migración.
2. Reúne a tu equipo
Una vez que hayas conseguido el visto bueno sobre las maravillas de Webflow, es hora de reunir a tu equipo web.
Una de las lecciones más valiosas que aprendí de la migración de Getaround a Webflow es la importancia de hacer entender a los compañeros que "sin código" no significa "sin equipo web".
Sin invertir en un equipo web adecuado, no aprovecharás al máximo las ventajas de no usar código.
Mi compañera Meg y yo nos encargamos de casi todos los aspectos de nuestra migración a Webflow. Entre los dos:
- Diseñamos y desarrollamos páginas
- Creamos directrices y sistemas
- Gestionamos contratos de desarrolladores
- Coordinamos con ingeniería las necesidades interdepartamentales
- Ideamos nuestra estrategia de migración
- Lanzamos páginas
- Redactamos textos
- ¡Y mucho más!
Pero que algo se pueda hacer no significa que se deba hacer.
Nuestro pequeño equipo, sumado a un cronograma ambicioso, hizo que a veces construyéramos cosas de forma rápida y chapucera: aceptable para cumplir con la fecha límite de lanzamiento, pero que a la larga generó deuda técnica y más trabajo para nuestro "yo" del futuro.
Para evitarlo, forma un equipo tal como lo harías para un sitio web construido de la manera tradicional.
La pregunta sobre quién debería integrar este equipo es interesante, ya que el desarrollo sin código apenas está ganando terreno en el mundo tecnológico y los roles siguen formándose y evolucionando, pero estos son los perfiles que me hubiera gustado tener en nuestro equipo de migración:
- Gerente de producto para liderar la estrategia y el trabajo interfuncional
Sería un puntazo que este PM pudiera tender puentes entre Webflow y el desarrollo tradicional, especialmente si la migración implica compartir funcionalidades con el producto, como una barra de navegación que mantenga al usuario conectado en distintos entornos. - Gerente de proyectos para mantener todas las piezas en movimiento bajo control y asegurar que los proyectos se completen
Tu gerente de producto también podría asumir este rol. - Desarrolladores visuales que sean expertos en Webflow y conozcan las mejores prácticas de desarrollo
Esto es fundamental para la escalabilidad y el mantenimiento de tu sitio en Webflow. Casi cualquiera puede montar un sitio en Webflow, pero hace falta experiencia y conocimientos técnicos para construirlo de forma que pueda escalar y evolucionar sin problemas, sin acumular deuda técnica. - Diseñadores web con conocimientos de Webflow para crear maquetas y flujos
Los diseñadores deberían, como mínimo, familiarizarse con Webflow para que sus diseños aprovechen las increíbles capacidades de la herramienta (como las interacciones) y se ajusten a sus limitaciones (que, en gran medida, son las limitaciones de la web). - Redactores y expertos en SEO para crear contenido de marca y de alto rendimiento
¡Asegúrate de trabajar codo a codo con redactores y especialistas en SEO para garantizar que la estructura de la página funcione bien tanto para el contenido como para la optimización!
Sé transparente sobre cada tarea necesaria en la migración, desde el mapeo de contenido y la selección de páginas hasta la colaboración con el producto, para justificar la necesidad de este equipo. Y recuerda a tu equipo (¡y a ti mismo!) que sigues creando un sitio web robusto. Aunque lo hagas a través de una interfaz sin código, en esencia sigues programando y construyendo funcionalidades complejas.
3. Selecciona las páginas que migrarás a no-code
Ahora que ya tienes el visto bueno para usar Webflow y has reunido a tu equipo ideal, identifica qué páginas o secciones de tu sitio web tiene sentido trasladar al entorno no-code.
Esto será distinto para cada equipo y empresa. Ten en cuenta lo siguiente:
- Dependencias
¿Tu equipo es responsable de aumentar las conversiones en una landing page, pero el equipo de ingeniería tiene que ejecutar el trabajo? Esa página sería una candidata ideal para la migración. - Cualquier funcionalidad de producto que requiera mucho código personalizado en una herramienta no-code
Una página de producto con lógica compleja o dependencias de API puede no ser una buena candidata para la migración. El uso excesivo de código personalizado anula el propósito de una herramienta como Webflow y reduce drásticamente tu capacidad para aprovechar sus ventajas. - Escalabilidad y objetivos futuros de las páginas
Cualquier página que se beneficie de las listas de colecciones y el CMS, o que pueda crecer hasta convertirse en un conjunto de páginas, debería migrarse sin duda. Los mejores candidatos son: landing pages, casos de éxito, blogs, material educativo... en realidad, cualquier tipo de contenido donde la redacción fluya más rápido de lo que el diseño puede soportar.
Para Getaround, la decisión de qué páginas migrar estaba clara. Antes de iniciar sesión, el usuario explora páginas de marketing como la de inicio, quiénes somos o cómo funciona. Una vez dentro, ya está en el producto: buscando coches, reservando, etc.
Como el equipo de marketing es responsable del rendimiento y los objetivos de las páginas previas al inicio de sesión, las migramos a Webflow. Esto también permitió que ingeniería se centrara totalmente en el producto, sin las constantes interrupciones de marketing y diseño para cambiar imágenes de cabecera o actualizar etiquetas H1.
4. Diseña y desarrolla pensando en tu entorno no-code
Cada medio tiene sus propias capacidades y limitaciones, y debes tener ambas presentes al abordar tus entregables. Estas fueron las consideraciones clave para mi equipo.
Consulta a tus desarrolladores visuales pronto y a menudo
Habla con frecuencia con tu desarrollador visual para asegurarte de que tus ideas se puedan construir de forma escalable y siguiendo las mejores prácticas de Webflow. Casi todo es posible, pero quizás debas hacer algunos ajustes en el diseño para evitar depender de código personalizado complejo o soluciones improvisadas que no escalarán bien.
Conviértete en un experto en no-code
Aprovecha los recursos no-code como Webflow University, MakerPad y Design+Code.
Si eres de los que aprende haciendo, como yo, crear sitios con la ayuda de estos recursos es una forma fantástica de sumergirte en el mundo del no-code y familiarizarte con todas sus posibilidades y mejores prácticas.
Sácale el máximo partido al CMS
El CMS de Webflow es una de sus herramientas más potentes para equipos de marketing que van a toda velocidad. Una vez más, colabora estrechamente con tu desarrollador visual para identificar qué páginas y secciones pueden crearse con Colecciones. Esto permitirá que tu equipo lance decenas de páginas con apenas un poco más de esfuerzo que si hicieran una sola.
Usa pautas de desarrollo visual
Al fin y al cabo, estás creando un sitio web de nivel profesional, así que necesitas directrices de desarrollo claras y sólidas para aspectos como:
- Convenciones de nomenclatura
- Estilos globales
- Uso de componentes
El desarrollador Verity Stothard dio una presentación increíble sobre esto en la No Code Conference de Webflow por si quieres profundizar más:
Ten cuidado con el código personalizado
Depender demasiado del código personalizado le quita la gracia a usar Webflow: verás grandes bloques vacíos en la interfaz del Diseñador en lugar de ver exactamente lo que obtendrás al publicar. Además, mantener varios fragmentos de código personalizado se vuelve un lío rápidamente.
Usa código personalizado solo para:
- Pequeños ajustes de CSS que no se pueden hacer desde el Diseñador, como cambiar las flechas de un carrusel
- Funcionalidades sencillas de JavaScript, como añadir lógica detrás de un botón de inicio de sesión
Evita usar código personalizado para:
- Crear elementos completos escribiendo HTML y CSS desde cero. Puede parecer obvio, pero es una trampa en la que es fácil caer, especialmente cuando trabajas con ingenieros que quizás no conocen bien las mejores prácticas de Webflow.
5. Lanza y presume de tu sitio no-code
Tras lanzar tu sitio no-code, comparte el proyecto, sus éxitos y todo lo que has logrado desbloquear al pasarte al no-code.
Mantén a los interesados motivados y entusiasmados con un flujo constante de formación y demostraciones:
- Envía artículos a tus ingenieros sobre el backend de Webflow o las nuevas integraciones de API para demostrarles cómo se mantiene al día con las tecnologías cambiantes
- Demuestra lo rápido que un diseñador puede actualizar tu página de inicio con un nuevo diseño y nuevos recursos
- Muestra lo fácil que es generar decenas o incluso cientos de páginas a partir de una sola página de Colección
Consejo pro: a la gente le encantan los buenos GIFs de Webflow.
Y lo más importante: documenta y comparte los objetivos que alcanzaste gracias a tu migración a no-code. Estos pueden incluir:
- Número de lanzamientos de páginas por semana
- Tiempo necesario para crear una página nueva, desde el inicio hasta el lanzamiento
- Métricas de rendimiento como SEO, conversiones y tráfico del sitio
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
El sitio de marketing de Getaround tras Webflow: mejor rendimiento web y agilidad del equipo
Esto es lo que Getaround ha logrado en los 3 meses posteriores a nuestra migración a Webflow:
- Lanzamientos semanales de páginas nuevas
- ¡Ten en cuenta que, entre 2011 y 2019, prácticamente no lanzamos ninguna página nueva!
- El total de sesiones en el sitio aumentó un 25%
- El tráfico de búsqueda orgánica aumentó un 15%
Lo más significativo es que ahora somos mucho más ágiles y capaces de seguir el ritmo de nuestro negocio. Hace unos meses, esto se puso a prueba cuando una iniciativa empresarial importante (y urgente) tuvo que lanzarse apenas una semana después de iniciarse el proyecto. ¡Diseñamos y creamos fácilmente dos páginas de destino para cubrir esto en menos de 5 días!
Migrar las páginas de marketing de Getaround a Webflow tuvo un impacto enorme en nuestro negocio, mejorando no solo nuestras métricas de rendimiento web y la calidad de nuestro contenido, sino también la velocidad y agilidad de nuestro equipo.
Reconstruir un sitio web heredado en una herramienta no-code no es tarea fácil, pero espero que estos pasos ayuden a que sea posible para tu equipo: ¡los resultados valen la pena! No dudes en enviarme cualquier pregunta en los comentarios o a través de Twitter @camilleespo.
