October 2016
Brand and visual
Myself + Stowga
I spent the four days on the brand. The brief was for something simple, recognisable, robust - something which fitted in the old world of shipping and logistics, but also reflected their smart, data-led approach to finding storage.
I spent day one understanding the product and brand so far, and where it was heading. I created moodboards - grouping existing logos, narrowing this selection, then defining a set of rules for what the new logo should communicate visually based on feedback from Stowga.
On day two I created 15-20 options for the mark and presented these at the end of the day. Stowga narrowed their selection to 3 - 4 of these.
Their picks were the most minimal of the bunch - ideas which referenced the idea of stowing or shelving something, but remained abstract enough to be future-proof and transferable.
The logos which were overly representational, those directly referencing boxes or warehouses, were deemed a little too clunky and less versatile so were shelved (excuse the pun).
On day three I refined the three picks, pushed type exploration, and began exploring palette in the context of different applications.
Circular was a clear winner. It's geometric shapes communicated the robustness and trustworthiness we were looking for, but its subtle quirks and warmth gave it an approachableness that something like Din or Colfax lacked.
At the end of the day I delivered four final options for the logo, with colour still tbd.
On day four Stowga made their final choice in the morning, picking the version of the logo which had an underline beneath the 'S'. It was a brave choice to pick something so simple, but this mark communicated a strength and confidence that we could all get behind.
I produced a whole range of colour options, taking inspiration from things like hi-vis jackets, storage materials, and the colours which are used on shipping containers.
Shipping containers all use a certain type of lead paint and have quite a distinctive palette. It was colours in this spectrum which resonated strongest with Stowga who quickly narrowed in on the grey-blue + yellow combination.
I refined these colours, tightened up the type and built out the palette. I then defined some simple rules for use of the logo, all of which I wrapped up in a short v.1 brand document.
It had been a productive week. We had managed to move quickly and end up, after four days, with a strong logo and palette, and a clear visual direction for the brand. This was achieved through having a clear deliverable at the end of each day, as well as having informal design crits twice a day.
With the logo set I could begin the visual design of the website.
My task with for the two weeks following the rebrand was to apply the visual language i'd developed to Stowga's online presence. Their website functions both as a marketing tool and an overview of their services, but also a place to interrogate a huge amount of data they had collected on import and export in the UK.
Wireframes had been designed in preparation for my work, so my primary task was visual design, along with tackling some UX challenges which arose as the visual design came together, particularly on the mobile homepage.
The first iteration of the homepage used Circular, a lighter colour scheme, and a serif font (Crimson Text) for the body copy.
Circular didn't feel quite 'serious' enough in the context of the website, whilst the Crimson suffered the opposite problem.
After around 6 iterations we landed on this direction. A darker UI, and Adelle Sans for both headline and paragraph text. It's blend of humanist and grotesque characteristics captured the , and the range of weights made it a flexible and versatile choice too.
One area which I re-wireframed was the Find Space / Fill a space module on the hero panel.
Initially this occupied around a third of the page and felt disconnected from the CTA. I moved this to the center to create a more direct route to the form. I also grouped together the 'ticker' element, and the illustration block to reduce the amount of visual noise distracting from the key interactions.
Here are some iterations prior to settling on this route.
Other pages followed using the styles i'd created for the homepage, and building out some new design patterns where necessary. I used invision to gather feedback on the visuals and get a better sense of the overall structure and feel of things and we continued with are twice daily informal design crits.
For the data/locations section I created a custom map style in Map Box, a secondary navigation pattern, and rules for styling graphs and infographics.
On mobile most elements stacked fairly easily, though some areas required more attention.
I redesigned the hero area on the homepage so the forms were hidden at first, leaving just the buttons. The would then appear in an overlay on a focused screen simplying the interaction given the limited amount of space available.
At the end of my two weeks I handed over visual designs for desktop, key areas on mobile, alongside a style guide and a document specifying rules on spacing.
Certain areas will definitely require testing and further refinement once a basic version is in the browser. But visually I was happy with the tone and feel i'd managed to strike which I felt communicated both a serious data-led product, and something which was easy and appealing to use.