THE METAL POST

A website redesign and rebrand for a send-in-the-post scrap for cash recycling business

CLIENT

The Metal Post

ROLE

Lead Art Director

DATE

2017

BRIEF

The Metal Post is a way to sell scrap and scrap metals online. You simply send the scrap metal (sorted or unsorted) in the mail and make a profit.

I was asked to come up with a new art direction and style for the website, as their existing website felt uninspiring and confusing to navigate.

Initial thoughts

Looking at the clients website, and those of their competitors, they all seemed to follow the same formula. Photos of metal objects. Lifestyle shots of happy builders holding cash. The overall design lacked memorability. The branding felt repetitive and uninspiring.

A collection of photos relating to metal

Just in case you couldn’t imagine some old metal things, here are some old metal things...and a happy builder

Wanting to break away from the generic style, I decided to offer two art styles to the client; graphical, and photo-realistic. For timing’s sake, I would present just the header for each concept, designing the whole home page once the client had made their decision.

Branding

The clients existing colour palette was a little broader. I narrowed it down to four key colours; white as my background, red for call-to-actions, yellow for alerts, and grey for the footer. I tweaked their red and yellow shades a little, making them less saturated for digital.

The Gudea font, a simple colour palette of red, yellow and grey, and an image of old antique keys

Photo-Real Style

I started to explore a couple of directions using real physical items. The first idea was a bit abstract, with a full bleed photo showcasing curving metal plates of various copper shades. This created a more visually interesting header, but felt a little misleading to the user. As arty as it looked, it didn’t realistically convey the services of The Metal Post.

Preliminary abstract art direction with warm metals

Mock-up showing my initial idea with photo-real elements - but far too much abstract vibes

So I focused more on the physical items that customers might be able to send in the post, and started to sketch out some possible layouts. One header sketch showed an open cardboard box set on a table, with various metal objects scattered over it. And this would also work well threaded through the rest of the website too, with various metal objects shown in situ throughout a house (pots hanging against the kitchen wall, nuts and bolts in a metal toolbox, etc). Another showed a top-down perspective that could work in the same way.

Rough concept sketches showing the development of the art direction

Some rough sketches for the header and homepage composition

I chose the top-down perspective as this was an easier way to present the metal objects. It’s worth mentioning that this was still a rough mock up, so I used rough reference stock photography and some seriously bad photoshop drop shadows. Once you see it, you cannot unsee it, right?

Preliminary top down view art direction with various metal objects

Mock-up showing my second idea with photo-real elements from a top-down perspective

This felt much more fitting to the brand than the abstract version I’d created, and had the added benefit of showing users what kinds of metal items could be sent in the post. I wanted the objects to stand out, so I selected a light coloured background; using a deep oak wood texture didn’t work and the clarity of the items were lost. It was also great to see that even at this early stage, the composition was working well with the clients original colour palette of red, white, grey and yellow.

Graphical Art Direction

Next up, the more risky option. Exciting times, people!

Having taken a look at the long list of items users could send to The Metal Post, I decided I would present them in a cool, modern, graphical style. So I did a few more sketches and chose to create the same cardboard box composition again but this time with a side view of the box, the metal items falling in to it from above.

Rough sketch for the side view of the header and cardboard box

Process overview

There was definitely not enough time to illustrate this myself, so I did a bit of research and found iconshock, a really fab icon site with a variety of icons covering all sorts of topics. They were cheap and offered a selection of icon styles. This material design style was perfect, as I could easily replicate it - in the event that I couldn’t find a graphic I needed, I could just recreate the vector art myself to match the icon set. Iconshock also allowed me to change the main colour of the icon, so I opted for red and grey, fitting with the key brand colour. Total win. #notsponsored

Iconshock, and a variety of icons that I used for the project

Iconshock; a very smart and affordable way to illustrate a website without lifting a single pencil!

I went through iconshocks' very extensive icon list, saved out all relevant icons in to a Sketch icon library I’d created, and then started composing the header graphic. I designed the cardboard box vector myself, as I needed something larger in scale. I positioned this on the right side of the header, keeping the header title and copy left aligned. The remaining metal icons could be easily arranged around this.

The overall art direction felt clean, modern, and memorable. I was happy with the result, and waited for the clients decision.

Final design for The Metal Post header on desktop

Mock-up showing my graphical idea with illustrated elements from a side-view perspective

And the winner is...

The client went with the graphical art direction, and I was really pleased. Immediately, I began to design the rest of the homepage. I wanted to keep the layout clean and minimal, and the tonality warm, friendly and inviting.

Typography

To give that minimal feeling, small details can go a long way. I used Gudea, a very modern sans serif typeface that felt minimal, modern, yet warm. Increasing the body copy line height and character spacing allowed the layout to breathe so much more. I was pretty regimented with my content spacing, to ensure nothing felt claustrophobic or tightly grouped. The eye should effectively bounce over the content and go exactly where it wants to go with no straining.

To number the individual sections, I created large numbers (with the Yeseva One font family) at a low opacity grey, so they didn’t dominate the space. As I explored type options, I discovered that a curvy decorative serif looked great next to the minimal body copy and curvy iconography.

Buttons

Within the content teasers, I placed thin lines to divide the interactive area from the text area. This additionally gives the eye a line to follow horizontally from ‘weitere Informationen’ to ‘Zur Übersicht’ so it feels organised. The icons for these buttons needed to be airy and light, so I designed thin line icons, instead of solid background icons.

Iconography

The icons helped to break up the content, and added a really fun and friendly tone to what would typically be quite a dull topic for some. And they really belonged in The Metal Post universe, with the shades of grey and red being right on brand, which I desaturated so the red of the call-to-actions was still prominent and eye-catching.

Shapes

Taking influence from the curved iconography, I gave the buttons matching curved corners, made the single icon buttons round, gave the expanding content blocks rounded corners, and masked my images with circles. This was the final step in bring everything together.

Additional layouts

I also designed an Impressum (Legal) page, to suggest how this art direction could also be styled for text-heavy content. With careful spacing between elements, thin horizontal divider lines, and large curved typographic numbers to keep things organised, I was able to achieve a clean looking and minimalistic legal page.

Final thoughts?

I was very happy with the final look. Not only was it a dramatic shift from their existing website, but it ticked all the boxes I had set after reading the original briefing. There was now a warmth and personality to their brand that hadn't been there before. Their content was light and airy, well-structured, with a strong hierarchy that comfortably guided the user. I'm so glad the client took a risk and opted for the less generic art direction.

Development phase

In development, they discovered they were unable to use a fluid layout due to the existing CMS. And other substantial changes were made at the final step. The navigation was moved to sit above the heaver image, instead of overlaying it. The buttons had their rounded corners removed. The decorative numerical typography was switched for ordinary numbers within the titles. And text sizing was ignored. It’s a shame, but this is just the way the wind blows sometimes. And as a designer, we take our joy from the overall process, and move on to the next project.