Redesigning the visual structure of JCB

Brief

Redesign the JCB website to better showcase it’s extensive portfolio to potential clients.

This redesign is not a request from JCB.

Tools

Sketch, Pen Sketching

Timeline

1 week

Design Problem

JCB’s website currently does not reflect their expertise in the field. It doesn’t showcase their 20+ years & their extensive portfolio of projects is out dated and needs a new look & feel, while keeping its existing visual identity.

Design Opportunity

The latter therefore let me dig deeper into JCB’s offerings and design a landing page that showcased their expertise, their

Current JCB Landing Page

Landing Page Goals

The goals of this landing page are to highlight JCB’s expertise in the construction industry in Canada.

The goal IS NOT to generate new leads.

Art Direction

The goal of this redesign was not to touch the existing branding, but rather update it for a more modern and structured look & feel.

I however tweaked the existing logo a little to fit with the look & feel I was aiming for. I wanted the tagline to fit under the JCB letters for a more square look. I also darkened to tagline font to add for affirmation to the brand.

Original vs edited logo

Desired mood: Professional, expert, industry leader, modern, simplistic, successful, sharp lines

Moodboard

Typography

After playing around with some serif and sans serif font pairings, I decided to go with one font family to simplify the experience.

I ended up with the Soleil font family due its modern look & feel, alongside its rounded edges, adding a sense of friendliness.

Colours

I wanted to keep the colours as simple as possible not to distract from the eye catching construction projects created by JCB.

I therefore went with a simplistic monotone colour palette of black and whites. I added red as an accent colour as is already portrayed in the JCB logo.

Colour palette for JCB’s website redesign

Photography

As the goal of this redesign is to showcase JCB’s extensive portfolio, the photography used is extremely important to set the right tone of voice. I wanted to portray JCB’s solid brand reputation since 1985 by focusing on the details of their work. The extra touch they add to all projects.
I also decided for a black and white photography approach to add the sense of high end expertise. The photographs were also kept square with sharp corners for assertiveness.

This also adds a sense of intrigue for the user so they want to find out more information on the projects as they don’t see the full picture just yet.

Final Responsive Landing Page

From the initial website, I removed a lot of clutter and unnecessary information that a user looking to view their portfolio does not need to see on the first few clicks.
I brought the navigation bar to a hamburger menu in both desktop and mobile versions to add a sense of simplicity.

I added a clickthrough page before the actual landing page to create the same feeling you get once you see a brand new building from the outside. You have an urge to see what’s inside. As you click on the ‘EXPLOREZ’ you are opening the doors to a brand new construction and finally get to see what the interior is all about.

Pre-landing page
Full fledge desktop landing page, once you enter the website

The final landing page consists of 3 sections :

1- A quick tagline showcasing JCB’s expertise with a powerful image of a project they completed

2- Categories of their areas of expertise

3- Latest case studies/projets or news they want to share

A simple footer with all sections was also added.

Prototypes

You can view the Desktop Prototype here :

You can view the Mobile Prototype here :

)

Marie-Philipe Boucher

Written by

UX/UI Designer with a flare for international interactions | Adventurer ✈ ⛰ Currently designing for National Bank of Canada | 📍 Montreal