OnTruck

New brand identity and new website

Services: Brand Strategy; Identity; Activation
Year: 2018-2019

Defining smart trucking

Ontruck is clearly one of the most powerful startups in the Spanish entrepreneurial landscape. La Nevera Roja founder, Íñigo Juantegui, launched this project three years ago with other big names in the ecosystem such as Javier Escribano (Tourist Eye), Gonzalo Parejo (iContainer), and Samuel Fuentes (Delivery Hero).

Well-know for testing their idea for free on a Telegram channel, the company has grown exponentially. From just 10 employees in 2016 and trials in a Madrid site to over 150 team members in offices in Madrid, London, and Paris three years later, the company operates a network of over 2,000 drivers and has secured €36 million of investment.

The Ontruck logo before and after rebranding

A tweet from Ismael Barros in 2017 that led to us beginning to talk to the Ontruck team about their brand.

We spent 4 weeks studying Ontruck’s situation. We conducted 24 hours of workshops in Madrid and London in which we analysed the company’s standing, helped the teams reflect on their brand perception, and gathered the raw material for the next stages of plotting the new route.

After an in-depth analysis of the all the information we gathered, we focused on identifying what was happening to bring the symptoms that Ontruck had detected to the fore. The key to the new positioning was transitioning from being a startup operating in the transport sector to being a transport company working as a startup.

This was the start of the “Smart Trucking” concept, which is Ontruck’s way of competing in the haulage sector.

Strategic work won’t fully achieve its purpose if it is not grounded in specific, tangible factors. The verbal and visual identity is where a brand takes the shape it will show to its audiences.

The new visual identity is built on an emphatic, solid, and compact font intended to boost the idea of the efficient, reliable, and robust service that Ontruck provides. The composition of the logo, which evokes the shape of a lorry, strengthens the identity by using one of its main assets.

In our search for efficiency and strength, we chose to design a purely text graphic mark, without an isotype as such, that would evoke the iconic shape of a lorry to be used as a symbol.

The Ontruck design grid is based on the separation in the design system of European pallets or EPAL. Euro-pallet divides are multiples of standardised boxes and range from 2 columns and 1 row up to 4 columns and 2 rows. The Ontruck grid features the same divides, but with flexible designs so the minimum unit will be different in each design. This grid helps us ensure consistency throughout the whole visual universe of the brand and reinforce the concepts of strength and efficiency.

Euro-pallet stemmed from the need to normalise and standardise the use of pallets in order to make better use of space. This same urge for standardisation and efficiency are the building blocks of the Ontruck visual system.

Featuring flat artwork and visuals and angular geometric shapes set on the grid, the graphic part of the system is rich and versatile.

The new Ontruck website was redesigned from scratch to place the new value proposition front and centre and highlight the reliability and strength of the service provided by the brand, both to its clients and the drivers in its network. The design is based on the grid that links the new identity’s visual system. This was made possible by the use of new web development techniques such as CSS Grid Layout.

On the website, the grid adapts to the size of the viewport. With a default rhythm of 8x8 cells, a minimum and maximum size per cell is set for every type of screen. The width is easily controllable using percentages. The height is the challenging area. We developed SCSS mixins and Django filters to work on the grid as easily and efficiently as possible at the Ontruck customer service line.

Here is an example of how the image from the previous video will work.

$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);
        }
    }
}

The brand centre we have developed for Ontruck is an online space for documenting, storing, distributing, and building the brand system. A living space that grows alongside the brand and provides access to the people who will apply it.

Some of the first lorries featuring the new brand.