Marca y web nueva: así se hizo

Desde que en 2016 nos tomamos esto de la Agencia un poco en serio y lanzamos, de forma precipitada, nuestra anterior web, ya estábamos pensando en que la misma no representaba realmente lo que hacíamos.

No es que sea fácil definir lo que hacemos en pocas palabras (puedes profundizar más en la sección Sobre Nosotros), pero quizá representarlo en una web corporativa puede que sea un reto aún mayor.

Tras lanzarla sin avisar, viene el siguiente reto: contar lo que hemos hecho. Quizá la web se explique por sí sola y todo quede perfectamente claro, tanto para el usuario que nos conoce como para el que aterriza por primera vez. La analítica y el tiempo nos lo dirán.

En cualquier caso, como de vez en cuando me toca un post largo, allá va este artículo dedicado a explicar nuestra nueva marca, colores, web, estructura y todo eso.

La nueva marca

El nuevo logo (si es que lo de antes lo podíamos llamar logo) es obra propia. Empezamos a pensar en el mismo Workation de diciembre de 2019, con Rubén tomando la batuta y el resto del equipo aportando ideas locas.

Formas

Teníamos claro desde el principio que queríamos una marca sólida, geométrica, con profundidad, con aristas y con carácter. No somos «soft», ni para todos los públicos, ni tampoco queremos dejar a nadie indiferente.

Estas características representan nuestro gusto por el dato, la analítica, la medición y la visión global partiendo desde el detalle.

Queríamos conseguir también un efecto de relieve o tridimensional, con reminiscencias escherianas, que enlazan muy bien con nuestra visión de los proyectos, con nuestro tipo de análisis más allá de las atribuciones simples.

Y de paso, dejar también espacio al espectador, que puede llegar a ver una «D» mayúscula, una flecha ascendente, un cubo hueco… y más formas ocultas en una imagen que contiene muchos detalles escondidos, y que creemos que representa muy bien lo que podría ser nuestro trabajo.

Colores

Queríamos mantener nuestro turquesa corporativo, eso lo teníamos claro. Y el negro sobre blanco. Pero queríamos usar los colores para transmitir un concepto que reflejara parte de nuestra personalidad, de nuestra forma de trabajar.

Queríamos una paleta de colores que representase un proceso: pasar de una situación de alarma, a una de análisis, propuesta, ejecución y finalmente control, estabilidad.

Sabíamos que nuestro turquesa era esa situación final, ese control, estabilidad y mar en calma. Por eso nos propusimos partir de una situación de alarma (amarillo) y pasar por una de esperanza (verde) hasta llegar a la estabilidad (turquesa).

De ahí que sean 3 gamas de colores principales (lima, verde y turquesa) que representan las fases nuestra relación con el proyecto: problema, planteamiento, resolución.

Esos 3 colores tienen pequeños matices, que los convierten en 5. Representan los tipos de acciones: detección, análisis, planificación, implementación, mejora continua.

Básicamente, ese es el proceso que seguimos en nuestro trabajo.

Un cliente detecta una necesidad o algo que corregir (alarma, amarillo)

alarma lima

Analizamos su caso usando nuestros conocimientos (verde)

vector verde

Proponemos acciones a implementar basadas en experiencia (verde)

vector verde 100

Implementamos acciones que sabemos ejecutar (turquesa)

vector turquesa 100

Llegamos a una situación de control y continua mejora (turquesa)

vector turquesa 90

Si juntas las formas geométricas, los colores, la profundidad, la «D», la flecha ascendente, Escher y lo agitas todo, queda algo así…

disruptivos-logo

Tipografías

Las tipografías escogidas son de la familia Poppins. Buscábamos una fuente gruesa, con presencia pero a la vez visualmente estética. Yo aquí solo puedo añadir que es la que más me gustaba de las propuestas, de esto no tengo mucha idea.

Poppins Bold – Poppins Regular

Queríamos mantener también el corte en la «D» inicial, que viene heredado de la imagen anterior y que es, junto con el turquesa, lo que más nos gustaba de lo que era nuestra corporativa.

disruptivos

Animación

Queríamos animar el logo, ha sido un poco capricho pero ya le sacaremos partido para las cabeceras de vídeos y otras cosas que haremos en el futuro.

Contamos con Margarito Estudio, a los que pasamos este brief:

Buscamos algo sencillo pero que nos de algunos recursos para los formatos que usamos (algunas cabeceras de vídeos, posts, perfiles y poco más). Una animación corta que podría derivar en algo con más «guión» si fuese necesario. 

No somos una agencia de diseño, ni de RRSS, ni de branding ni nada «creativo» (aunque lo sepamos apreciar), somos de generar negocio mediante datos y acciones técnicas, y luego ya que los expertos en cada área ejecuten. No tenemos un producto, ofrecemos servicios/consultoría.

Los conceptos que hemos usado para representar el logo son:

Aristas, geometría, complejidad, profundidad, Escher, experiencia, resolución de problemas, análisis de datos, ascender, crecimiento, capacidad de control, de una situación de peligro (amarillo/lima) hacia una situación positiva (verde/turquesa)… Y bueno, lo de Disruptivos ya hace mucho tiempo que lo tenemos, ahora es un concepto muy utilizado pero antes molaba más…

logo animado

La verdad es que a la 2ª versión ya lo teníamos prácticamente, nos ha gustado mucho el resultado y como han interpretado el despliegue de las fases como las piezas geométricas del logo.


La nueva web

Estilos generales

Con las pautas de estilo y el logo ya definidos, Rubén se puso a diseñar páginas y elementos para utilizar en las nuevas templates. Veníamos de un diseño que utilizaba Divi Builder y teníamos mucha mezcla de elementos… así que ahora nos íbamos a construir template propia con Gutenberg y teníamos que volver a crear la mayoría de elementos ya existentes.

El panel de Figma daba miedo, la verdad.

Pero como podréis apreciar, lo principal era un diseño limpio, sin sidebars, dando prioridad al contenido y con los detalles justos que nos representasen. José Luis como siempre al mando de la codificación se encargó de llevarlo a la realidad.

Secciones

Ya que íbamos a rediseñar, ¿por qué no adaptar por fin todos los contenidos que teníamos? Gloria, Ana, Esteban y Mauro se encargaron de reetiquetar, recategorizar, migrar y optimizar cientos de artículos y landings, además de planificar redirecciones, fusiones y ampliaciones de contenido. Un trabajo importantísimo para poder mostrar realmente todo lo que hacemos.

Por temática

Además de la home, tenemos varias secciones en base al contenido que se incluye en cada una de ellas.

A. Una sección de Servicios, donde hay landings en las que se explica lo que hacemos por cada área, mostramos nuestra experiencia, casos de éxito… y enlazamos con contenido relacionado.

B. Una base de conocimientos, que distribuye todo lo relacionado a contenidos formativos.

  • Una sección con Tutoriales sobre diferentes temáticas de Marketing Digital.
  • Un blog, que contiene principalmente artículos formativos, de actualidad y corporativos.
  • Una landing especial sobre nuestros servicios de Formación (programas que dirigimos, Másters y Cursos en los que somos profesores, formación a medida…)
  • Y una landing especial sobre los Mailchimp Meetups que organizamos.

C. Por último, tenemos una sección de temática Corporativa, con información Sobre La Agencia, Clientes, Casos de éxito, y el Contacto.

Colores según contenido

Según se navega por la web, aparecen diferentes colores en los diferentes bloques de contenido y en los CTAs . Su representación es la siguiente:

  1. Un CTA turquesa te llevará hacia información Corporativa o de Servicios. Al fin y al cabo, contenido sobre nosotros y sobre lo que hacemos. Aterrizarás en esa información que te harán conocernos mejor.
  2. Un CTA verde te llevará hacia información de Contenidos, ya sean artículos del blog, tutoriales, Meetups, etc. Irás hacia las secciones que te ayudarán a formarte.
  3. Un CTA lima te pedirá que pases a la acción: rellena un formulario, ponte en contacto con nosotros, o contrata nuestros servicios directamente.

Turquesa lleva hacia –> Contenidos Corporativos, como Servicios, Experiencia, Nosotros…

Verde lleva hacia –> Contenidos Formativos como Artículos, Tutoriales, Clases…

Lima son Llamadas a la Acción como Contacto, Formularios, Suscripciones…

Estructura y navegación

El menú principal tiene accesos directos a las cabeceras de secciones, y hemos optado por un cambio bastante marcado respecto al menú tradicional que teníamos en escritorio, haciendo prevalecer la navegación tipo mobile.

Desde cada cabecera hay diferentes elementos de navegación, como bloques de enlaces y destacados, CTAs, etc… Que siguen una tendencia lógica, basada en los diferentes puntos de entrada de los usuarios.

  • El usuario que nos busque por Marca, caerá probablemente en la Home, desde donde puede navegar a secciones de Servicios, Corporativas e incluso Contenidos.
  • El usuario que entre a una página de Servicios (vía SEO principalmente) tendrá información sobre el servicio en concreto, y podrá navegar hacia Casos de Éxito relacionados, artículos sobre la materia y el Contacto.
  • El usuario que entre a una página de Contenidos (también vía SEO) podrá encontrar otros artículos relacionados, enlaces a secciones de Formación relacionada con la temática y Servicios.

Hemos aprovechado para agrupar etiquetas y categorías en el Blog (que tiene artículos con mucha antigüedad) pero nos reservamos para más adelante una reestructuración a nivel URLs.

Novedades

Además del aspecto visual, incluimos alguna funcionalidad nueva, formularios, más contenido…

La sección de «Aprende con nosotros» es completamente nueva, y nos sirve para contener todo lo relativo a Formación que ofrecemos.

También la sección Corporativa tiene algunas novedades, como la página «Sobre Disruptivos», la «Consultoría Exprés» o los «Casos de Éxito», sección que vamos a ir ampliando de forma constante.


Lo que hay por detrás

WordPress vitaminado

Hemos creado diversos shortcodes que nos permiten generar páginas distribuidoras donde cruzar contenidos según etiquetas y categorías.

Por ejemplo, si tenemos un shortcode de «listado de post», podemos mostrar artículos que sean ‘tutoriales’ y de ‘SEO’ y de esta forma construimos landings mucho más apropiadas para el usuario que el típico listado de artículos.

Tenemos también diferentes custom post types, como por ejemplo la entidad ‘Cliente’, de la cual luego podemos alimentar bloques de testimonios, podemos hacer una galería de logos, mostrar casos de éxito…

Pero tampoco os vamos a contar todos los detalles ¿verdad?

Automatizaciones

Hemos puesto en marcha algunas automatizaciones para los usuarios que nos contacten, se suscriban a la newsletter, nos expliquen su proyecto, pidan información… María y Josema han creado de nuevo todos los journeys, triggers e incluso los diseños de cada envío, además de adaptar los formularios y dejar todo el sistema «finísimo».

Si quieres ver cómo funcionan, te invitamos a que trates de activar algún trigger 🙂

Medición

Una completa instalación de Analytics con Google Tag Manager donde medir comportamiento de usuarios, eventos principales, contactos, Leads…

Quizá hagamos algún artículo explicando todo el proceso de una completa Estrategia de Etiquetado en el futuro.


Lo que vendrá

Contenidos

Un fantástico plan de contenidos actualizado ya está en marcha para seguir nutriendo nuestra Base de Conocimientos con actualidad, artículos de formación, casos de éxito y alguno que otro de opinión de vez en cuando. Si te suscribes a nuestra newsletter, los recibirás directamente en tu email.

Funcionalidades

Muy probablemente sigamos metiendo más automatizaciones, algún chatbot, calculadoras… hay cosas muy potentes que no queremos revelar todavía. Tendrás que pasarte por aquí a menudo para ir viendo todo lo que vamos incluyendo.

Análisis

Lo que más nos interesará medir será el rendimiento técnico, interacción de usuarios, efecto en rankings de buscadores para las nuevas secciones, suscriptores a nuestra newsletter y número de contactos recibidos.

Hasta aquí el artículo

Gracias por llegar hasta aquí y, por favor, déjanos tus impresiones sobre el logo y la web en los comentarios, en Twitter, en LinkedIn… donde sea. Todos serán bien recibidos y nos ayudarán a mejorar.

Nos vemos de nuevo en breve 🙂

Compartir   Compartir en twitter
Javier Moral
Me encanta el olor a analítica por la mañana.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *