Detrás de escena de la actualización de la marca Flywheel

¡Esta actualización tenía que ver con renovar nuestra marca de una manera brillante y hermosa y, por supuesto, también con algunas cosas prácticas! Algunos de nuestros objetivos específicos incluyeron una mayor capacidad para escalar nuestro producto a medida que crecemos, creando diseños consistentes e intencionales que abarquen toda la empresa y haciendo que todo sea más fácil y agradable para nuestros clientes a medida que interactúan con Flywheel.

¿Interesado en cómo lo logramos todo? Únase a nosotros a medida que avanzamos detrás de escena para conocer todo el pensamiento, el proceso, las reuniones, los bocetos, los juegos de palabras, la investigación, la cafeína y el confeti que se incluyeron en la actualización de la marca Flywheel.

El no tan nuevo, nuevo logo

Te contaré un pequeño secreto: cuando comenzamos nuestra actualización, en realidad comenzó como un proyecto mucho más pequeño para pulir nuestro logotipo (en lugar de, bueno, todo). Siempre supimos que nuestra marca sería un trabajo en progreso y, en muchos sentidos, simplemente nunca tuvimos el ancho de banda para realizar cambios importantes en ella. Sin embargo, nuestro equipo creció mucho este año, y una vez que nos dimos cuenta de que teníamos los recursos para hacer una actualización completa, ¡aprovechamos la oportunidad y la aprovechamos!

Entonces, comenzamos con nuestro encantador logotipo Flywheel para crear el primer cambio en la actualización de nuestra marca.

Es simple, legible e intrínsecamente legible a la vez que encarna nuestro espíritu divertido y amigable. ¡Con una apariencia audaz pero suave, el logotipo de Flywheel invita a nuestros usuarios a compartir nuestra cultura y pasar tiempo con nosotros!

Un poco de antes y después, para que veáis por dónde empezamos.

Nuestro antiguo logotipo siempre tendrá un lugar especial en nuestros corazones (y en el antebrazo izquierdo del cofundador Tony), pero sabíamos que podría necesitar un poco de pulido para reflejar nuestros valores y energía. Aquí fue donde comenzó nuestra actualización, e implicó mirar muchos volantes y diferentes iteraciones para asegurarnos de que estábamos en el camino correcto.

“No queríamos alejarnos demasiado del logotipo original, solo queríamos que fuera más versátil y que funcionara un poco mejor en diferentes entornos, tamaños pequeños a grandes, digitalmente e impresos. No es una reinvención de la 'rueda', solo un mejor diseño”. – Andrea Trew, diseñadora gráfica

Al crear un híbrido de la fuente Museo Sans Rounded y redondear las esquinas, hicimos que nuestro logotipo se sintiera aún más amigable (¡como Flywheel!). También le dimos un poco más de espacio para respirar al aumentar el espacio entre el logotipo y la marca denominativa, y los caracteres dentro. Las cosas se estaban limitando un poco con el anterior, y nuestro objetivo es crear un entorno abierto y acogedor.

Una vez que hicimos estos ajustes menores, había una cosa más que queríamos lograr con nuestro logotipo: mayor flexibilidad. Mira, los logotipos horizontales son geniales en muchas situaciones, pero de vez en cuando son demasiado largos. (Diseñadores: sé que conocen la lucha). Entonces, creamos un logotipo secundario que es un poco más alto.

Con la versión horizontal y vertical resueltas, a continuación abordamos el problema de escalar nuestro logotipo en tamaños más pequeños. Los íconos son geniales, hasta que comienzas a trabajar con pequeñas especificaciones. Nos dimos cuenta de que las cosas se perdían un poco en la traducción durante el proceso de reducción, por lo que simplificamos nuestro logotipo y lo espesamos para asegurarnos de que cada elemento (desde las letras mismas hasta los "giros giratorios" en el costado) se mantuviera legible y hermoso en cualquier tamaño. .

Para ir un paso más allá, también creamos un logotipo aún más simplificado (o como nos gusta llamarlo, nuestro error). Al eliminar un par de radios de nuestro logotipo, aumentar el espacio entre los elementos y engrosarlo un poco más, ¡nuestro error puede ser tan pequeño como 50 píxeles de ancho! Estamos bastante orgullosos de él, y no podemos esperar a ver todos los lugares pequeños y mágicos a los que va.

Nuestra nueva y deslumbrante rueda de colores

Si eres nuevo por aquí, déjame contarte un pequeño secreto: ¡nos encantan los diseños brillantes, hermosos, coloridos y maravillosos! Entonces, en lugar de simplemente elegir un par de colores para la actualización de nuestra marca, seguimos adelante y diseñamos una rueda de colores Flywheel completa, completa con tintes y sombras.

Creemos que una de las maneras más deliciosas de arreglar un proyecto y alegrar el día de alguien es agregar un toque de color brillante. (Tenemos el mismo pensamiento sobre el confeti, ¡pero hablaremos de eso más adelante!) No nos malinterpreten, creemos que nuestro nuevo logotipo es realmente las rodillas de la abeja, pero nuestros tonos alegres son casi tan importantes para nosotros como el propio logotipo. Es por eso que incluso permitiremos que nuestro logotipo se use en uno de estos maravillosos colores (solo para ocasiones especiales, por supuesto).

Antes de nuestra actualización, en realidad solo trabajábamos con dos o tres colores (y, si somos honestos, no siempre tenían un tono uniforme). Sabíamos que queríamos más flexibilidad para ser creativos sin dejar de ser fieles a la marca Flywheel, por lo que nos propusimos crear una paleta de colores brillantes y vibrantes que nos diera mucho espacio para experimentar de una manera robusta y caprichosa. Desde encabezados de correo electrónico hasta gráficos de redes sociales e íconos en nuestra aplicación, verá estos pigmentos amigables en toda la marca Flywheel. Y como pueden ver, nos estamos divirtiendo mucho con eso.

Nuestras divertidas fuentes nuevas

Sí, así es, nuestra actualización de marca incluso incluye cuatro nuevas fuentes que son tan caprichosas y atractivas como el mismo Flywheel. Cambiar la tipografía puede parecer algo menor, pero creemos que tiene un gran impacto en nuestros usuarios. Es por eso que hemos elegido varias fuentes que podemos usar en una variedad de situaciones para crear una jerarquía efectiva y títulos atractivos.

Nuestra fuente principal es Museo Sans Rounded, un tipo de letra sans serif más audaz que se usa para encabezados y subtítulos. Similar en apariencia a nuestra marca denominativa Flywheel, este tipo de letra también es muy legible, bastante geométrico y presenta esquinas redondeadas amigables.

En contraste equilibrado, el segundo tipo de letra es Archer, un tipo de letra serif más delgado que es dulce y encantador con un toque adicional de fantasía. Particularmente adoramos esta fuente en la variación de cursiva seminegrita y la usamos más comúnmente para subtítulos.

Al más puro estilo Flywheel, también hemos incluido dos fuentes elegantes en nuestra actualización de marca para agregar algo especial a los títulos y gráficos. Heartwell es un tipo de letra audaz con un elemento hecho a mano que es perfecto para lograr ese aspecto pintado y barrido con pincel.

Si bien es igual de elegante, Smoothy se encuentra en el otro lado del espectro con una apariencia elegante y caprichosa de la que simplemente no podemos tener suficiente.

el elemento humano

A pesar de que somos una empresa digital en un mundo digital, creemos que hay algo realmente especial en el uso de elementos del mundo real en nuestro trabajo. Es por eso que comúnmente encontrarás una combinación de fotografía impresionante y diseño plano en las piezas que creamos, ¡junto con rostros familiares! Flywheel siempre se ha propuesto humanizar el mundo del hospedaje, y ¿qué mejor manera de hacerlo que mostrar a nuestros propios empleados sobrehumanos? Tome la foto de abajo, por ejemplo. Ese es Bryan, uno de nuestros ingenieros de la felicidad, canalizando su Superman interior antes de salvar el día para uno de nuestros clientes.

Además de la fotografía, cada pieza digital y física que creamos está hecha con amor y diseño intencional, sin importar cuán pequeñas puedan parecer. Creemos que lo que importa son los detalles, por lo que hacemos todo lo posible para crear experiencias excepcionales para nuestros clientes en todo momento. Ya sea que se trate de un activo para una página de destino o una caja de regalos hecha a mano para nuestros socios de agencias, tratamos de agregar el elemento humano a todo lo que construimos. (Esa es también la razón por la que encontrará cosas como un cubo de confeti en nuestra oficina. Tiene sentido, lo prometemos).

Ahora, puede parecer que todo esto se unió bastante rápido, pero pasamos varios meses trabajando en todas estas decisiones. Desde las iteraciones del logotipo hasta los ajustes de color y los experimentos con paquetes (donde aprendimos mucho más sobre las cajas de lo que nunca pensamos que haríamos), cada movimiento se eligió deliberada y cuidadosamente para asegurarnos de que estábamos tomando la decisión correcta para Flywheel.

Una vez que lo hicimos bien, algunas cosas comenzaron a suceder. La primera fue que nos emocionamos un poco con nuestros nuevos colores, íconos y fuentes, y comenzamos a introducirlos lentamente en portadas de libros electrónicos, gráficos de redes sociales y diseños de correo electrónico. (¿Puedes culparnos? ¿Cómo podríamos esperar?)

La segunda fue que podíamos empezar a implementar la nueva marca a mayor escala. Primero, ¡la aplicación Flywheel!

La increíble nueva aplicación Flywheel

Armados con deliciosas fuentes nuevas y colores hermosos y brillantes, volvimos nuestros ojos hacia la aplicación Flywheel. Siempre hemos recibido muchos comentarios realmente positivos sobre nuestra interfaz y el panel de Flywheel, por lo que queríamos asegurarnos de mantener las cosas que funcionaban y solo cambiar los elementos que podían mejorarse. Desde la primera interacción de un cliente con la página de registro hasta el momento en que activan su sitio, nos propusimos hacer que la experiencia de Flywheel sea más simple, fluida y un placer de usar.

Sin embargo, el rediseño de la aplicación Flywheel no se trató solo del front-end. Nuestros desarrolladores también se propusieron modernizar el código y construir una base sólida para prepararnos para un futuro increíble. Al eliminar el JavaScript y revisar el código, hemos podido hacer que nuestra aplicación sea más limpia, más clara y mucho más moderna. Usamos muchas tecnologías nuevas para ayudar a que el código llegue al navegador lo más rápido posible, lo que resultó en una mejor experiencia para nuestros clientes.

La parte favorita de todos acerca de la actualización es que fue como una especie de borrón y cuenta nueva: nos dio la oportunidad de tomar decisiones y cambios en todos los ámbitos. Desde cómo tratamos las animaciones hasta la forma en que se usa el color, ahora todo es consistente en todos los materiales de nuestra empresa de una manera que aún es flexible y ampliable.

Tome los menús desplegables, por ejemplo. Por lo general, nadie piensa realmente en ellos, excepto cuando intenta seleccionar un elemento secundario y mueve el mouse demasiado rápido y accidentalmente abandona el menú por completo. Esta actualización les dio a nuestros diseñadores y desarrolladores tiempo para pensar en pequeños problemas como ese y pulirlos para crear una mejor experiencia para nuestros usuarios. Entonces, en lugar de dejar accidentalmente un menú desplegable en la aplicación Flywheel, lo ayuda a ser torpe y se ajusta si corrige demasiado el mouse.

"Es un cambio sutil al que nadie prestará atención o incluso notará necesariamente, pero es ese tipo de experiencia de diseño invisible lo que realmente importa y hace que la gente se enamore de Flywheel". – Will Riley, ingeniero de front-end

Podríamos enumerar todos y cada uno de los pequeños cambios que hicimos en la aplicación, pero ese no es realmente el punto (y mucho menos mágico que encontrarlos por su cuenta). No se trata de un botón o interacción específica; se trata de la actualización en su conjunto y de todos los cambios que se incluyeron en ella. Cada pequeño cambio que hemos hecho tiene un propósito claro.

“Esta actualización involucró mucha experimentación para asegurarnos de que no solo estábamos cambiando las cosas por cambiarlas. Prestamos mucha atención a nuestros valores y las necesidades de nuestros clientes para mejorar la forma en que interactúan con Flywheel”. – Adam Trabold, diseñador principal de productos

Nuestra feliz nueva página de inicio

Por último, pero no menos importante, nos dispusimos a actualizar todo el sitio de Flywheel. El primer paso, como probablemente puedas adivinar, fue implementar las nuevas pautas de la marca. Actualizamos todos los estilos de fuente, pintamos el sitio con los nuevos colores de la marca y solucionamos algunos problemas de consistencia entre las páginas. Si bien podríamos habernos detenido allí, ¡decidimos llevar esta actualización un paso más allá con una nueva página de inicio!

Con todo lo demás renovándose, se sintió mal excluir la página de inicio. Es una parte esencial de la experiencia Flywheel, por lo que queríamos dar lo mejor de nosotros y brindarles a nuestros clientes (y futuros clientes) algo que realmente se destaque. También nos dio la oportunidad de revisar la estrategia detrás de la página de inicio para asegurarnos de que la información más importante sea fácil de encontrar y de entender.

“En Flywheel, somos para diseñadores y para agencias, por lo que tenemos la responsabilidad de asegurarnos de que la marca y el producto les hablen. Eso es lo que más me emociona de la actualización: hemos dado grandes pasos en la dirección correcta y ahora tenemos una base para todo lo que queremos hacer en el futuro”. – Nick Chickinelli, diseñador de productos

Algunas reflexiones finales

En el núcleo de nuestra marca, en realidad no cambiamos mucho. Seguimos siendo el mismo Flywheel que siempre has conocido y amado; nuestro negocio es el mismo, nuestros valores son los mismos, incluso nuestro logotipo es (en su mayoría) el mismo. Esta actualización significa que analizamos detenidamente la marca Flywheel y la pulimos para reflejar en quiénes nos hemos convertido y en quién nos esforzamos aún por ser. Es el trabajo de base que nos permitirá seguir avanzando con un impulso aún más rápido.

“Sin una marca sólida, todo tiende a desmoronarse. Tener una marca cohesiva y reconocible es el pegamento que mantiene unida a cada pieza de una empresa. Las pautas que hemos creado nos ayudarán a resolver mejor los problemas con mejores soluciones que faciliten la vida de nuestros clientes”. – Andrea Trew, diseñadora gráfica

Ya sea la forma en que un botón se anima sutilmente cuando se hace clic o el diseño de una página de destino, creemos sincera y profundamente que el diseño importa. Es uno de los siete valores que hacen que Flywheel siga girando y es una de las razones por las que creamos nuestra plataforma pensando en los diseñadores y las agencias.

“Aspiramos a ser una empresa increíble más allá del espacio de alojamiento, por lo que tener una marca que realmente hable de quiénes somos y refleje la calidad de nuestros productos fue realmente fundamental, y creo que eso es lo que hemos logrado con esta actualización”. – Dusty Davidson, CEO y cofundador

Esto es solo el comienzo, y estamos ansiosos por ampliar esta actualización para mejorar Flywheel aún más.

Entonces, ahora que ha visto el detrás de escena de nuestra actualización, ¿qué piensa? ¡Nos encantaría escuchar sus pensamientos en los comentarios para que podamos seguir mejorando y construyendo algo maravilloso!