El nuevo aspecto de Webflow: Diseñando un producto para profesionales

¿Cuál fue el papel de nuestros equipos de ingeniería, producto y diseño?

Dar vida a esa audacia en nuestras experiencias de producto principales, incluida la interfaz de usuario de la base de nuestra plataforma: el Designer.

Webflow cumplió diez años el año pasado. Como si de una colcha comunitaria se tratara, diferentes equipos habían ido añadiendo elementos a la marca y al producto a lo largo de los años. El resultado era una experiencia rica y compleja, cálida y familiar por un lado, pero con una mezcla de estéticas de diseño y patrones de UX divergentes.

Queríamos que la experiencia del producto se sintiera profesional, encantadora y hecha a mano. Por eso, para construir una interfaz más coherente y pulida, nuestro equipo se puso manos a la obra y cuidó cada detalle, porque sabemos que eso es lo que ustedes —los freelancers, diseñadores, desarrolladores visuales, especialistas en marketing y emprendedores que usan Webflow— hacen también cada día.

¿Se preguntan cómo creamos una aplicación renovada que es inconfundiblemente profesional? ¿Y cómo planeamos y ejecutamos este enorme rediseño para lanzarlo al 100% de nuestros clientes al mismo tiempo? Aquí tienen un vistazo a nuestro proceso y lo que aprendimos en el camino.

Las cosas buenas surgen de la colaboración

Comenzamos a principios de 2023 reuniendo a personas de nuestros equipos de creatividad, educación, sistemas de diseño y diseño de producto para explorar el futuro de la nueva identidad de marca de Webflow desde todos los ángulos. Esto incluyó desde el análisis del logotipo y conceptos publicitarios hasta las ilustraciones y el diseño de los botones. Una exploración tan amplia resultó desafiante al principio, pero los diversos puntos de vista de los colaboradores dieron lugar a nuevas ideas.

Al empezar con una investigación abierta, creamos espacio para encontrar soluciones inesperadas. En lugar de limitarnos a un rediseño, consideramos productos y funciones totalmente nuevos. Más que crear un nuevo logotipo, exploramos todas las formas en que la marca podía expresarse mejor.

Para un proyecto como este, con muchas piezas en movimiento, mucha colaboración y una fecha límite inamovible, nos aseguramos de contar con el respaldo de nuestro equipo de liderazgo desde el primer día. Durante las etapas iniciales, nuestro equipo interdisciplinario compartía cada viernes un video con los avances del trabajo con todos los interesados clave. Tras la fase de exploración inicial, lanzamos un sprint enfocado en implementar la primera fase del proyecto. Durante este sprint, decidimos exactamente qué era posible lograr antes de la fecha límite y qué ideas tendrían mayor impacto para los clientes.

Definir claramente los valores de marca para guiar la exploración

‍

Desde el principio, desarrollamos cuatro valores de marca para guiar nuestra exploración y la dirección del diseño de producto. Los principios que definimos fueron "cinematográfico", "sofisticado", "aspiracional" y "profesional". El aspecto cinematográfico se hizo notar con más fuerza en los diseños actualizados del producto, con una iluminación dramática, ángulos de cámara atractivos y composiciones cuidadas.

Inspirándonos en la estética del neumorfismo, evitamos los visuales puramente planos y añadimos una sensación de profundidad, materialidad y sustancia. La aplicación Webflow Designer, cargada de controles de interfaz densos, necesitaba un diseño sencillo, pero con pautas muy claras para ayudar a los usuarios a entender cómo navegar de forma intuitiva y eficiente.

También buscamos inspiración fuera del software SaaS tradicional. Productos como Cinema 4D y Unity, por ejemplo, son herramientas profesionales ultra potentes que ofrecen un enorme control con diseños densos pero legibles.

Para mejorar la experiencia de usuario, aprovechen los valiosos comentarios de los clientes

Nuestros clientes desempeñaron un papel esencial en el proceso. Probamos conceptos iniciales y cambios significativos en la experiencia de usuario con miembros nuevos y experimentados de la comunidad de Webflow. Los clientes de este grupo de prueba inicial incluso utilizaron las herramientas de desarrollo de Chrome para ajustar el diseño y ofrecer sugerencias directas de mejora.

Como resultado, aprendimos que algunas de nuestras nuevas ideas necesitaban ajustes, y los iteramos hasta que quedaron bien. Por ejemplo, en respuesta a los comentarios de los primeros evaluadores, ajustamos los tamaños de fuente para mejorar la legibilidad y la jerarquía en el Designer y el Dashboard. Cuando los clientes que trabajan en entornos muy luminosos nos dijeron que el fondo casi negro tenía demasiado contraste, hicimos ajustes para mejorar la experiencia.

Más adelante en el proyecto, formamos un panel de clientes expertos que previsualizaron nuestro diseño renovado. ¿Sus comentarios? Oro puro. Nos ayudaron a refinar aún más nuestros diseños y a corregir errores que solo aparecían en escenarios del mundo real.

También hemos seguido realizando cambios basados en los comentarios de los clientes después del lanzamiento. Recientemente, lanzamos una nueva opción de Configuración de apariencia para mejorar los controles de accesibilidad y ayudar a los profesionales a trabajar cómodamente en cualquier entorno.

Cuando los equipos de ingeniería y diseño colaboran, el producto gana

Desde el principio, los ingenieros fueron una parte integral del proceso. Tomamos decisiones estructurales cruciales desde el inicio y dimos luz verde a los ingenieros para limpiar el código existente e implementar variables de estilo en todo el sistema. Esto allanó el camino para una integración fluida de los nuevos valores de los tokens de diseño más adelante. Nuestros diseñadores usaron Figma para crear diseños completos de las pantallas clave, trabajando codo a codo con los ingenieros para garantizar la coherencia y resolver rápidamente cualquier caso excepcional.

Si te interesa saber cómo los ingenieros de Webflow implementaron algunos de los elementos más complejos de la nueva interfaz, echa un vistazo a los tuits del ingeniero principal Jon Quach, donde profundiza en cómo desarrollamos el nuevo control de margen y relleno, además de otras lecciones que aprendimos durante el proyecto.

Lo que aprendimos al rediseñar uno de los productos principales de Webflow

‍Rediseñar la interfaz de usuario de nuestro Designer fue un proceso complejo. Cada lección aprendida nos ayudará a seguir perfeccionando nuestro enfoque hacia la innovación y la colaboración:

A por todas.

Cuando llega el momento de renovar, no te limites a hacer pequeños ajustes; sé valiente y apunta alto. Aprendimos que las decisiones audaces pueden conducir a mejoras emocionantes y significativas.

El trabajo en equipo hace que el sueño funcione.

Mantener una comunicación fluida con los miembros de nuestro equipo y los responsables de la toma de decisiones permitió que todos estuviéramos en sintonía, evitando que las buenas ideas se perdieran por el camino.

Acepta lo nuevo y ajusta sobre la marcha.

Adentrarse en algo nuevo puede resultar un poco extraño al principio. Considéralo una oportunidad fresca y un viaje de aprendizaje y adaptación. Mantente abierto, acepta el cambio y ajusta según los comentarios que recibas.

Comparte el entusiasmo.

Desde mostrar nuestros geniales borradores de diseño hasta celebrar cada nueva función, mantuvimos el entusiasmo y los niveles de energía por las nubes. Esto nos ayudó a mantenernos motivados y conectados con nuestra misión. También compartimos los comentarios de la comunidad para vincular nuestras contribuciones con las personas para las que estábamos diseñando.

Las lecciones aprendidas seguirán dando forma a los futuros pasos de Webflow. La audacia de nuestra nueva marca está ahora tejida en cada píxel, lo que significa mucho más que una simple actualización de diseño: es nuestro compromiso de ser indiscutiblemente profesionales.