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.

Moodboard

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.

Branding

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.

idea2

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.

conceptSketches

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?

idea1

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.

idea3sketch

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

Process overview

icons-website

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.

websiteAfter

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

And the winner is...

WebsiteDesign2
MobileDesign
WebsiteDesign2
MobileDesign

Typography

Type

Buttons

Iconography

icons

Shapes

Additional layouts

impressum
impressum2
impressum
impressum2

Final thoughts?

Development phase

A before and after of The Metal Post website

Find out more about The Metal Post

Other Projects

WWFApp UI

Jugend TestetWebsite Design

Europa-ParkWebsite Design

Food AppApp UI

BBC World ServiceWebsite UX, UI, and Design

Made with ❤︎ and ☯︎. Copyright Jessica denHeyer 2020. All rights reserved.

Made with ❤︎ and ☯︎. Copyright Jessica denHeyer 2020. All rights reserved.