Estrategia, Identidad y Activación

Ontruck: nueva identidad de marca y nueva web

Definiendo el Smart Trucking

Ontruck es, sin duda, una de las startups más potentes del panorama del emprendimiento español. El que fuera fundador de La Nevera Roja, Íñigo Juantegui, lanzó hace ahora tres años este proyecto junto con otros nombres recurrentes del ecosistema como Javier Escribano (Tourist Eye), Gonzalo Parejo (iContainer) o Samuel Fuentes (Delivery Hero).

Conocidos por cómo validaron su idea a coste cero con un canal de Telegram, el crecimiento de la compañía ha sido exponencial. De apenas diez empleados en 2016 y pruebas en una localidad de Madrid, la empresa cumple tres años superando las 150 personas en el equipo distribuidas en sus oficinas de Madrid, Londres y París, operando con una red de más de 2.000 transportistas y habiendo captado 36 millones de euros de inversión.

El logotipo de Ontruck antes y después del rebranding.
Un tweet de Ismael Barros en 2017 que provocó que pudiéramos empezar a hablar con el equipo de Ontruck sobre su marca.
Dedicamos unas 4 semanas a estudiar el contexto de Ontruck. Llevamos a cabo 24 horas de talleres en Madrid y Londres donde analizamos la realidad de la compañía, ayudamos a los equipos a reflexionar sobre su percepción de la marca y recogimos la materia prima con la que continuar trabajando en la nueva ruta.

Tras analizar en profundidad toda la información recogida, centramos nuestro trabajo en identificar qué estaba ocurriendo para que se manifestaran los síntomas que habían detectado desde Ontruck. La clave para el nuevo posicionamiento fue pasar de ser una startup trabajando en el sector del transporte, a ser una empresa de transporte trabajando como una startup.

Nace así el concepto de “Smart Trucking”, la manera particular de Ontruck de competir en el sector del transporte de mercancías por carretera.

El trabajo estratégico no cumpliría su función correctamente si no se aterrizara en lo concreto, en lo tangible. Es en la identidad verbal y visual donde una marca toma cuerpo para mostrarse a sus audiencias.

La nueva identidad visual se construye en base a una tipografía rotunda, sólida y compacta que quiere potenciar la idea de servicio eficiente, firme y robusto que Ontruck lleva a cabo. La propia composición del logotipo, que sugiere la forma de un camión, refuerza la identidad con uno de sus principales activos.

En nuestra búsqueda de la eficiencia y la solidez, optamos por diseñar una marca gráfica puramente tipográfica, sin isotipo como tal, pero que al sugerir una forma tan icónica como la de un camión pudiera usarse como símbolo.

La retícula de Ontruck se basa en la división dispuesta en el sistema de diseño de los palés europeos o EPAL. Las divisiones del Euro-pallet son múltiplos de las cajas estándar y van desde una distribución de 2 columnas y 1 fila hasta 4 columnas y 2 filas. La cuadrícula de Ontruck tiene las mismas divisiones, pero con diseños flexibles, por lo que la unidad mínima será diferente en cada diseño. Esta malla nos ayuda a dotar de consistencia a todo el universo visual de la marca e insistir en los conceptos de solidez y eficiencia.

ONT-06T-Animación-Grid-V2.gif
ONT 06T Animación Construcción Cartel V2.gif
1_a4CzeT6MkaS9eLfe7GwTwQ.gifEl Euro-pallet surgió de la necesidad de normalizar y estandarizar el uso de los palés con la finalidad de obtener un mejor aprovechamiento del espacio. Con ese mismo espíritu de estandarización y eficiencia nace el sistema visual de Ontruck.

Con ilustraciones e iconografía trabajadas con un acabado plano, formas geométricas angulosas y resueltas desde la retícula, se completa la parte gráfica del sistema aportando riqueza y versatilidad.

La nueva web de Ontruck fue repensada desde cero para dar protagonismo a la nueva propuesta de valor y enfatizar la fiabilidad y solidez del servicio que proporciona la marca, tanto a sus clientes, como a los transportistas de su red. Su diseño se apoya en la malla que articula el sistema visual de la nueva identidad. Esto es posible gracias al uso de nuevas técnicas de desarrollo web como CSS Grid Layout.

Para la web, la grid se adapta al tamaño del viewport. Con un ritmo por defecto de 8x8 celdas, se establece un mínimo y un máximo de tamaño por celda por cada tipo de pantalla.
El ancho es fácilmente controlable mediante porcentajes. El reto está en la altura. Desarrollamos mixins de SCSS así como filtros en Django con el objetivo de trabajar con esta grid de la forma más cómoda y eficiente posible, en la linea del servicio de Ontruck.
Aquí tenéis un ejemplo de cómo funcionaría la imagen del video anterior.

$grid-cell-heights: (
    // ...
    desktop: (72px, 88px)
);
$container-width-base: 8;
$container-height-base: 8;

@mixin container-vertical-devices-props($devices, $props, $height-base: $container-height-base) {
    // …

    // Desktop
    @if (index($devices, desktop) != null) {
        @media (min-width: 61.25em) and (max-width: 82.49em) {
            @each $prop, $v-cells in $props {  
                #{$prop}: (100vh * $v-cells) / $height-base;
            }
        }

        $desktop-cell-height: map-get($grid-cell-heights, desktop);

        @media (min-width: 61.25em) and (max-width: 82.49em) and (max-height: #{nth($desktop-cell-height, 1) * $height-base}) {
            @each $prop, $v-cells in $props {    
                #{$prop}: nth($desktop-cell-height, 1) * $v-cells;
            }
        }
   
        @media (min-width: 61.25em) and (max-width: 82.49em) and (min-height: #{nth($desktop-cell-height, 2) * $height-base}) {
            @each $prop, $v-cells in $props {    
                #{$prop}: nth($desktop-cell-height, 2) * $v-cells;
            }
        }
    }
}

@mixin container-base {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 0;
    @include container-vertical-devices-props((mobile, tablet, desktop, wide), (
        grid-auto-rows: 1
    ));
}

@mixin container-size($width: $container-width-base, $height: $container-height-base) {
    grid-template-columns: repeat($width, 1fr);
    grid-template-rows: repeat($height, 1fr);
}

@mixin cell($x, $width, $y, $height) {
    grid-column-start: $start;
    grid-column-end: span $width;
    grid-row-start: $start;
    grid-row-end: span $height;
}


.home__hero-section {
    @include container-base();
    @include container-size(8, 15);

    &__image {
        @include cell(1, 8, 2, 5);
    }

    @media (min-width: 61.25em) and (max-width: 82.49em) {
        @include container-size(8, 8);

        &__image {
            @include cell(4, 4, 2, 5);
        }
    }
}

El brand center que hemos desarrollado para Ontruck es un sitio online donde documentar, almacenar, distribuir y construir el sistema de marca. Un espacio vivo que crece al mismo ritmo que crece la propia marca y que posibilita el acceso a quienes vayan a aplicarla.

ontruck-soluble-new-brand-system-compositions.gif
Algunos de los primeros camiones con la nueva marca

Otros proyectos

¿Hablamos?

Hagamos que las cosas pasen antes y multipliquemos las probabilidades de éxito para tu proyecto mientras disfrutas del camino.