Con el plan de construir un sitio web atractivo, con múltiples colecciones de CMS y la capacidad de escalar a un gran número de usuarios, y con la urgencia de tenerlo listo para ayer, recurrimos a Webflow. Así es como lo hicimos.
Aunque construimos nuestro sitio web (con 5 CMS independientes) en Webflow cuando lanzamos Hugo, nuestra empresa de notas para reuniones de crecimiento, no nos dimos cuenta de lo que realmente permitía la tecnología de Webflow... hasta hace unas semanas.
Llega una pandemia
Principios de marzo de 2020. El mundo cambiaba ante nuestros ojos hora tras hora. Se cancelaban eventos, las reuniones pasaban de ser presenciales a realizarse por vídeo, y las calles de San Francisco se volvían más silenciosas a cada momento mientras mirábamos por la ventana.
Y entonces empezaron a llegar correos electrónicos, tickets y chats en directo: "¿Cuál es la mejor forma de usar Hugo con mi equipo remoto?", "¿Cómo puedo hacer un seguimiento de las tareas ahora que estamos en casa?", "¿Tenemos más reuniones internas, cómo las gestionamos mejor?". Como empresa tecnológica con sede en San Francisco, no terminábamos de entender la curva de aprendizaje a la que se enfrentaban la mayoría de las empresas del mundo al verse obligadas a convertirse, literalmente de la noche a la mañana, en empresas remotas.
Recuerdo el mensaje de Slack que envié al equipo directivo de Hugo: "Tenemos que hablar. El trabajo desde casa es algo MUY serio y tenemos que hacer algo". Como empresa que ya operaba con un equipo parcialmente distribuido y con un producto que impulsa a miles de equipos remotos, el manual del teletrabajo y las mejores herramientas para el puesto eran algo natural para nosotros. Rápidamente nos dimos cuenta de que el trabajo remoto no era algo natural para la mayoría de las empresas.
"Escribamos otro libro. 10X Culture fue un gran éxito". "¿Podríamos organizar un montón de seminarios web?". "¿Qué tal un evento online con socios?". El problema es que teníamos horas, no semanas, para crear un valor real para nuestros clientes y nuestra comunidad, que no conocían la diferencia entre Slack y Skype pero necesitaban que su equipo, ahora remoto, funcionara a la perfección.
¿Y si creáramos un sitio web con un directorio de las mejores herramientas utilizadas por equipos remotos de éxito? Mejor aún, podríamos mostrar qué productos ofrecían ofertas para el trabajo remoto para ayudar a los nuevos clientes. Luego, con la gran cantidad de contenido útil sobre cómo hacer la transición al trabajo remoto, cómo usar diversos programas y cómo cuidar de uno mismo y del equipo, tendríamos un recurso realmente valioso para los equipos remotos.
Literalmente 2 horas después, lanzamos The Remote Team Toolkit.
Webflow al rescate
Con el plan de construir un sitio web atractivo, con múltiples colecciones de CMS y la capacidad de escalar a un gran número de usuarios, y con la urgencia de tenerlo listo para ayer, recurrimos a Webflow.
Aunque somos usuarios experimentados de Webflow, no teníamos capacidad para crear una nueva marca, desviar recursos de diseño e ingeniería de nuestro producto ni apartar a alguien del equipo de marketing para gestionar directorios de productos y contenidos. Necesitábamos un éxito rápido que pareciera fruto de meses de trabajo.
Así es como lo hicimos.
00:01
Las plantillas son tus mejores aliadas. Webflow ofrece ahora más de 100 plantillas de sitios que puedes copiar y modificar para adaptarlas a tu proyecto, así no tienes que empezar desde cero. Muchas de ellas vienen con un nivel de acabado que normalmente solo se añade mucho más tarde; por ejemplo, animaciones de carga de página, efectos al pasar el ratón y un diseño adaptable listo para usar en cualquier resolución.
Elegimos la plantilla Journey, que tenía el aspecto limpio, contemporáneo y fácil de leer que buscábamos para The Remote Team Toolkit.
00:09
Con el nuevo sitio de Webflow creado, estábamos listos para personalizar la plantilla. La que elegimos tenía más páginas de las que necesitábamos y el CMS tenía más campos de los necesarios, así que eliminamos páginas, quitamos campos superfluos y jugamos con las distintas secciones. Tuvimos que diseñar 2 secciones desde cero, pero todas las demás encajaban casi a la perfección con la plantilla, salvo por algunos cambios de color y fuente para darle nuestro toque personal.
Consejo: Incluso cuando diseñas directamente en Webflow, ayuda tener un wireframe rápido (aunque sea un boceto) del diseño. Cogí un papel y garabateé las partes de la página y cómo queríamos estructurar las cosas para asegurarme de que la página tuviera todo lo necesario antes de empezar con el contenido.
Cada 10 minutos, publicábamos en el sitio de pruebas de Webflow y lo enviábamos al equipo para recibir comentarios.
En una hora, prácticamente habíamos terminado.
00:30
Mientras trabajábamos en el diseño de la página, necesitábamos definir la marca. Uno de los miembros del equipo grabó un video rápido en Loom describiendo cómo imaginábamos el logotipo de The Remote Team Toolkit. Lo publicamos en algunos sitios de concursos de diseño para revisarlo más tarde.
01:09
Con la página luciendo genial, era hora de preparar el contenido. Tuvimos una breve sincronización de equipo, añadimos a algunos editores de contenido al sitio y todos se pusieron manos a la obra para agregar las mejores herramientas de colaboración y comunicación, además de recursos sobre trabajo remoto, a los 2 CMS que impulsan el sitio.
Consejo profesional: Webflow permite importar elementos de colección desde archivos CSV. Cuando añades contenido de forma masiva, como hicimos nosotros al crear el sitio, puede ser más rápido organizar todo en una hoja de cálculo e importarla a Webflow con solo unos clics.
01:51
¡Se acaba el tiempo! Mientras un compañero realizaba una revisión rápida de control de calidad del sitio (asegurándose de que todo fuera legible, se viera bien en cualquier pantalla y verificando enlaces rotos, imágenes faltantes o errores tipográficos), yo conecté un dominio que habíamos comprado antes y configuré Google Analytics para monitorear el rendimiento del sitio.
01:58
¡Vaya, ya teníamos 30 diseños de logotipo para elegir! Nos quedamos con uno con el que todos nos identificamos al trabajar desde casa y lo subimos al sitio.
¡Ta-dán! Era hora de publicar en el dominio remoteteams.org y compartir la noticia con todos nuestros socios y clientes.
02:20
No pudimos resistirnos. La nueva integración nativa de Lottie para añadir animaciones directamente en Webflow era demasiado tentadora, así que le pedimos a un amigo que le diera un toque mágico a nuestro logo, el cual se convirtió en nuestra nueva imagen principal.
Nuestro nuevo enfoque para la iteración rápida
Antes veíamos a Webflow como una forma de diseñar y construir nuestro sitio de marketing más rápido, involucrando a todos en el proceso. No nos dábamos cuenta del potencial de Webflow para ampliar el alcance y la velocidad con la que podemos realizar experimentos importantes. Un proyecto así habría sido antes una gran decisión estratégica con una enorme necesidad de recursos. Ahora, fue un experimento rápido implementado durante el almuerzo: un precio bastante pequeño por la ayuda que hemos brindado a tantos equipos remotos.
Hacer del "no-code" una parte estratégica de nuestra operación ha democratizado quién puede tener un impacto significativo y contribuir a nuestra presencia web. Diseñar, construir y producir contenido para algo como The Remote Team Toolkit ya no requiere un equipo de diseño, desarrollo y contenido, lo cual es una perspectiva emocionante para equipos ágiles como el nuestro.
Puedes ver más detalles de lo que hemos hecho con Webflow y cómo estamos ayudando a equipos remotos en The Remote Team Toolkit y en Hugo.
Por qué tu equipo de diseño debería usar Webflow
Descubre cómo los equipos de diseño están optimizando sus flujos de trabajo —y creando mejores experiencias— con Webflow.
