Rocket Lawyer ha utilizado Webflow como herramienta de diseño de producto desde su lanzamiento en 2013, y desempeñó un papel fundamental en su transición al diseño responsivo. Por eso, nos encantó sentarnos a charlar con Liana Lawrance, directora de UX y diseño de Rocket Lawyer.
¿Cómo era su flujo de trabajo de diseño antes de Webflow?
Antes de Webflow, nuestro proceso consistía en:
- Crear maquetas en Photoshop
- Compilarlas en un PDF
- Hacer clic para navegar
Algunos de nosotros también usábamos Keynote para comunicar esas interacciones. Pero tenemos la suerte de haber empezado a usar Webflow tan pronto que ahora es una parte integral de nuestro proceso.
¿Cuáles han sido los beneficios de dejar ese flujo de trabajo y pasarse a Webflow?
Creo que Webflow le da vida a tu producto. Poder inyectar movimiento y microinteracciones hace que tu solución de diseño sea mucho más atractiva y agradable.
Y como diseñador, poder comunicar esos deseos a un desarrollador de una manera tan clara y expresiva, a su vez, empodera al diseñador para seguir desarrollando sus propias habilidades. Porque antes de ganar esta capacidad con Webflow, tenías que "fingir" la interactividad o simplemente no expandías tu diseño a ese terreno. Toda la experiencia tenía que ser descrita, lo cual anula un poco el propósito del diseño.
Y ahora tenemos una comprensión mucho más rica del código y sabemos cómo manipularlo de la misma manera que puede hacerlo un desarrollador.
¿Cómo ha beneficiado a Rocket Lawyer la adopción de Webflow?
En última instancia, lo que Webflow ha hecho por nosotros como organización es optimizar nuestro proceso.
Nos permite pasar de los wireframes al diseño final muy rápidamente, porque no tenemos que diseñar imágenes estáticas para escritorio, tableta y móvil. En su lugar, construimos toda la experiencia en Webflow, desde el escritorio hacia abajo, y le entregamos la URL a nuestros desarrolladores, que es lo que ellos toman como referencia.
Sin documentos de especificaciones, sin archivos PDF o PSD, solo el sitio de Webflow.
Lo genial es que tienen una sola URL y, cuando se realizan cambios, el diseñador puede implementarlos rápidamente y decirle al desarrollador: "Oye, actualiza tu pantalla. Los cambios ya están ahí".
Así que optimizar el proceso de diseño ha sido fantástico. Como diseñadora, Webflow me ha ayudado a empatizar más con nuestros desarrolladores y a pensar en mis diseños desde un punto de vista de desarrollo. Una mejor comunicación entre diseñadores y desarrolladores es una lucha constante. Me encanta intentar mejorar eso.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
¿Dónde encaja Webflow en su flujo de trabajo de diseño ahora?
Webflow es básicamente nuestro resultado final: el entregable definitivo de nuestro proceso de diseño.
Solemos hacer gran parte de nuestro trabajo de conceptualización en wireframes, Sketch y prototipos de InVision, pero cuando estamos listos para pasar a la alta fidelidad, tanto visual como interactiva, es cuando nos pasamos a Webflow.
De hecho, hemos creado nuestra guía de estilo en Webflow y la hemos convertido en una plantilla. Así, cuando un diseñador pasa del wireframe al diseño final, simplemente trabaja a partir de esa plantilla, donde ya están todos nuestros estilos. Solo tienen que aplicar nuestra capa visual sobre su wireframe.
Pero lo más importante es que se trata de un prototipo funcional de la experiencia que hemos diseñado, y usar las herramientas de interacción de Webflow ha sido fantástico para nuestro equipo, porque antes de Webflow usábamos herramientas de prototipado como Framer o Principle.
Y por muy geniales que sean esas herramientas, no producen el producto tal y como lo va a construir un desarrollador, ¿verdad? Expresan el producto de forma visual. Pero con Webflow, puedes entregar algo que es código, y contiene toda la información que necesitan para replicarlo.
En realidad no usan el código que genera Webflow porque tienen sus propias guías de estilo de código que seguir. Los sitios que construimos en Webflow sirven más como referencia de diseño y maqueta para ayudar a los desarrolladores a entender la experiencia prevista.
Webflow también nos ha permitido, como equipo de diseño, crear y mantener una guía de estilo viva. Así que, en lugar de un PDF estático que tenemos que actualizar constantemente y volver a compartir, es un sitio web. Eso es realmente increíble y nos da mucha autonomía.
¿Entonces, tanto los equipos de diseño de producto como los de marketing usan Webflow?
Sí, pero los diseñadores de producto más que los de marketing. Principalmente porque nuestros diseñadores de marketing trabajan en flujos completos y sus páginas son mayormente estáticas. Definitivamente nos interesa avanzar un poco en nuestro diseño de marketing, explorando más animaciones y cosas así. Y sé que Webflow podrá soportarlo una vez que estemos listos para dar ese paso.
¿Cuál es su proceso para que un nuevo diseñador se ponga al día con Webflow?
Veo Webflow como otra herramienta que los nuevos miembros del equipo deben aprender a usar para trabajar aquí en Rocket Lawyer. Y Webflow, por supuesto, lo ha hecho fácil, ya que la interfaz es bastante intuitiva si has usado algunos programas de gráficos. Es bastante fácil de aprender.
Así que, normalmente, solo decimos: "Aquí tienes Webflow. Empieza un proyecto y juega con él. O mira un proyecto antiguo y observa cómo está construido".
Empieza a crear mejores productos con Webflow
Con Webflow, el equipo de Liana ha podido:
- Agilizar su proceso de diseño
- Mejorar sus conocimientos y habilidades de programación
- Fomentar la empatía con sus colegas de desarrollo e ingeniería
- Y crear una guía de estilo viva para fortalecer su marca
Si todo esto suena a sueño, bueno: Webflow puede hacerlo realidad. Súbete al carro con tu equipo hoy mismo.
