Diseñando e implementando el sitio de marketing de nuestra compañía: Mi viaje desde el contenido hasta la implementación

Si eres usuario de Logto, puede que hayas notado que el sitio web de nuestra compañía se ha actualizado recientemente. Si no lo eres, échale un vistazo al sitio web, logto.io, y adivina cuántos recursos hemos dedicado para hacer que esto suceda.

Podrías pensar, ¿van a autopromocionarse ustedes diciendo que se necesita una gran cantidad de trabajo, esfuerzo y diseño cuidadoso solo para mostrar su excelencia en la ejecución?

¡No!

Por el contrario, queremos mostrar cómo aprovechamos de manera inteligente las herramientas y métodos para mejorar la calidad de nuestro producto y ofrecer los mejores productos y servicios a nuestros usuarios.

Recibimos comentarios positivos de nuestra comunidad y nos preguntamos cómo lo logramos. Esta ronda de actualizaciones es diferente porque reinventamos completamente un nuevo flujo de trabajo en un entorno de rápido movimiento. Nos gustaría presentar nuestras mejores prácticas y también echar un vistazo más de cerca a nuestra cultura de trabajo en equipo y colaboración.

El trasfondo#

Somos un equipo técnico enfocado en proporcionar una amplia gama de servicios de desarrollo relacionados con la identidad del cliente y trabajo de infraestructura. La presión por ofrecer resultados es significativa. Al mismo tiempo, necesitamos apoyar diversas tareas operativas y de narración de historias, como construir sitios web de marketing de marca, escribir blogs, promocionar nuestros proyectos e interactuar con nuestros usuarios.

Un sitio web de aterrizaje convincente es crucial, ya que a menudo forma la primera impresión que tu audiencia tiene de tu producto, ayudándoles a entender los problemas que tu producto pretende resolver, incluyendo precios y cualquier cliente destacado como prueba social.

Además, puede cumplir con múltiples objetivos comerciales:

• Mostrar la marca y la propuesta de valor de tu producto.
• Generar leads.
• Actuar como un centro de contenido, especialmente importante para una empresa enfocada en el crecimiento liderado por productos o por desarrolladores.
• Proporcionar un lugar para optimizar SEO, adquirir usuarios y rastrear el tráfico regular.

En mi trabajo anterior, estuve involucrado en un proyecto de sitio web. Veamos en qué consiste un flujo de trabajo típico:

1. Primero, los gerentes de marketing de producto y los gerentes de producto definen el contenido y los requisitos.
2. Los diseñadores de productos y un escritor de UX refinan el contenido.
3. Transferimos el trabajo en progreso, generalmente una versión de baja fidelidad, a los diseñadores de visuales y de marca para los retoques finales antes de la producción.
4. Luego, los ingenieros y gerentes de producto comienzan la implementación, enfocándose en la animación y el diseño web responsivo.

Este proceso es tedioso e involucra a muchas personas y partes interesadas, lo que lo hace inadecuado para un entorno de rápido movimiento.

Incluso si al principio solo tenemos a dos personas manteniendo esto—un diseñador de producto y un ingeniero—las tareas de gestionar el rendimiento web, cargar imágenes, asegurar el diseño responsivo, manejar formatos de imagen y actualizar el contenido aún requieren mucha comunicación de ida y vuelta.

Este flujo de trabajo es ineficiente. Constantemente pienso en cómo liberar recursos de ingeniería para que se concentren en el trabajo principal del producto mientras yo manejo el resto.

Usar herramientas para mejorar la productividad es una filosofía clave de nuestro equipo. Por lo tanto, he comenzado a investigar herramientas que puedan ayudar a optimizar estos procesos.

Desglosando las necesidades#

Para desarrollar un sitio web de marketing SaaS exitoso, desglosamos los elementos esenciales necesarios:

1. Contenido: La base de cualquier sitio de marketing es saber exactamente qué mostrar. Esto requiere una comprensión profunda de tus clientes objetivo, sus casos de uso típicos y la propuesta de valor de tu producto. Ninguna herramienta puede sustituir esta comprensión. Afortunadamente, mi participación en el diseño del producto y las estrategias de salida al mercado significa que estoy bien preparado para crear contenido que cumpla con las necesidades de los usuarios.
2. Diseño: El sitio debe tener un atractivo visual pulido y elegante. Mi experiencia en diseño UX/producto, aunque no tan amplia como la de un diseñador creativo dedicado, me capacita para manejar este aspecto de manera competente.
3. Ingeniería: Las consideraciones técnicas clave incluyen alojar el sitio, asegurar el diseño responsivo y permitir micro-interacciones suaves. También es crucial integrar el sitio de manera fluida con otros componentes, como redirecciones de enlaces y la página de autenticación del producto.

Después de realizar algunas investigaciones, aquí está el conjunto de herramientas que planeo utilizar para los aspectos de diseño:

Contenido del producto y marketing#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper, o aplicaciones similares de IA como copiloto.

Esto es para afinar y optimizar mi contenido y mensajes de marketing. Es importante ser claro sobre el objetivo y la intención detrás de ellos. La IA es solo un copiloto, no un tomador de decisiones. Antes de escribir cualquier mensaje de marketing, me pregunto algunas preguntas:

1. ¿Quién leerá el mensaje?
2. ¿Necesitan algún contexto adicional?
3. ¿Cuál es el punto clave que quieres abordar en el mensaje?
4. ¿Qué esperas que el usuario haga como siguiente paso?
5. ¿Este mensaje tiene la intención de educar o de impulsar una acción específica?
6. ¿Esto tiene el potencial de ser engañoso o exagerado?

Luego escribiré un primer borrador de los puntos que quiero comunicar.

A veces, la IA puede introducir palabras que parecen anticuadas o distorsionar tu intención original para que parezca lógicamente correcta. Sin embargo, debes re-enfatizar tu intención y mantenerte fiel a tus objetivos. Debes establecer estándares para asegurarte de que las palabras entregadas a la audiencia sean claras, directas, concisas y transparentes. Esto es especialmente importante en nuestro dominio del producto, que sirve a muchas empresas y desarrolladores.

Diseño#

Figma, Framer para diseño de interacción y visual, así como animación y prototipos

Tengo experiencia en diseño, principalmente enfocado en el diseño de productos, que implica la creación de UI y UX. Mientras que diseñar una UI pulida no es un desafío para mí, mi trabajo no es tan elegante como el de un profesional. Sin embargo, con algunas habilidades básicas de diseño visual y de ilustración, y eligiendo las herramientas adecuadas, puedes mejorar la calidad de tu trabajo. Uso Framer y Figma en este proceso creativo.

Este es nuestro diseño antiguo, que está completamente diseñado en Figma

Nuestro diseño original fue creado en Figma. Usé el complemento oficial de Framer, "Framer to HTML", para copiar y pegar el diseño básico en Framer, lo que proporcionó un buen punto de partida.

El siguiente paso es diseñar. Si has utilizado previamente Figma, la transición a Framer es un proceso fluido, ya que la experiencia general del usuario es bastante similar. Voy a destacar algunas interacciones interesantes que mejoran significativamente la productividad.

Disposición#

Los usuarios de Figma aprecian la disposición automática porque ahorra mucho tiempo al colocar y organizar elementos. Sin embargo, las funciones de disposición en Framer son aún más inteligentes, alineándose más estrechamente con una mentalidad de front-end. En Framer, puedes elegir si utilizar una disposición de cuadrícula o pila, definir las columnas, establecer un ancho máximo, y se ajustará automáticamente a otra fila si es necesario. Esta funcionalidad mejora el proceso de diseño al reflejar cómo se comportarán los elementos en un entorno web en vivo.

Puntos de quiebre para diseño responsivo#

Al confiar de manera inteligente en la configuración de puntos de quiebre y configuraciones de ancho (como llenar, fijo, relativo y ajustar al contenido) y definir diferentes lienzos, puedes lograr fácilmente y de manera precisa diversos diseños responsivos. Este enfoque te permite adaptar el diseño a diferentes tamaños de pantalla y dispositivos de manera eficiente.

Animación#

Framer ofrece una variedad de animaciones preconstuidas, incluyendo una animación de ticker que usamos ampliamente en nuestro sitio web para mostrar nuestro trabajo. Puedes configurar el componente e incrustarlo dentro de este widget. Te permite definir varias configuraciones como velocidad, dirección, relleno, y más, dándote flexibilidad y control sobre cómo se comporta la animación en tu sitio.

Otra característica útil en Framer es la capacidad de personalizar animaciones de desplazamiento. Por ejemplo, puedes especificar cómo aparecen los elementos a medida que se desplazan al aparecer en pantalla. Configurar tu animación de desplazamiento te permite controlar el tiempo y estilo de cómo se muestran los elementos, mejorando la experiencia del usuario y el compromiso con tu contenido.

Publicar Rápidamente#

Una de mis principales necesidades es la capacidad de:

1. Diseñar rápidamente múltiples páginas de aterrizaje para la optimización SEO y campañas de marketing. La velocidad es un requisito.
2. Actualizar contenido con frecuencia por mi cuenta. Tu página de aterrizaje del producto refleja los desarrollos más recientes y la posición actual de tu producto en el mercado. Contenido desactualizado significa perder oportunidades de mercado y no mantenerse al día con las necesidades de tus clientes.

En mi flujo de trabajo anterior, cada vez que necesitaba actualizar contenido, tenía que pedirle a un ingeniero que lo hiciera o enviar yo mismo una solicitud de incorporación de cambios. Nuestro equipo de ingeniería sigue un proceso riguroso para garantizar la calidad del código, lo cual puede llevar mucho tiempo y limita mi capacidad para hacer cambios rápidos.

Framer ha resuelto este problema para mí. Ahora, cada vez que hago un cambio y hago clic en publicar, se refleja inmediatamente en producción en vivo. Esta capacidad ha facilitado enormemente el proceso, permitiendo actualizaciones rápidas y mayor autonomía en la gestión de contenido.

Ingeniería#

Dado que está alojado por Framer, no hay necesidad de ningún trabajo de implementación o técnico de nuestra parte. A nuestros ingenieros les tomó solo 10 minutos integrarlo con el resto de nuestro sitio web.

Nuestro sitio web actual consta de 20-30 páginas; algunas se desarrollan utilizando Framer, mientras que otras se crean a través de métodos tradicionales de desarrollo de software. Estamos en el proceso de seleccionar las mejores herramientas para mantener nuestras páginas. Por ejemplo, para la documentación del desarrollador, que es difícil de gestionar con Framer, utilizar un marco de documentación amigable para desarrolladores para alojar tu contenido es la opción óptima. En el futuro, evaluaremos nuestras necesidades y decidiremos si continuamos con nuestro propio alojamiento o si hacemos una transición completa a Framer.

Cómo cambió nuestro flujo de trabajo#

Completamente transformamos nuestro flujo de trabajo, haciendo que la producción de sitios de marketing sea completamente sin esfuerzo. Es confiable, mantenible y altamente eficiente.

Escribí este blog para compartir mejores prácticas. Si tienes experiencia con Framer y diseñando hermosos sitios web, me encantaría escuchar sobre ellas. Hablemos y aprendamos unos de otros.

Ahora, ¡es hora de echar un vistazo a nuestro producto! Visítanos en logto.io.